• koa 基础(二十六)数据库 与 art-template 模板 联动 --- 编辑数据、删除数据


    1.通过 ObjectID 获取 _id

    根目录/module/db.js

    /**
     * DB库
     */
    var MongoDB = require('mongodb');
    var MongoClient = MongoDB.MongoClient;
    var ObjectID = MongoDB.ObjectID;
    var Config = require('./config.js');
    
    class Db {
      /**
       * 单例
       * 解决多次实例化,实例不共享的问题
       */
      static getInstance() {
        if (!Db.instance) {
          Db.instance = new Db();
        }
        return Db.instance;
      }
    
      constructor() {
        this.dbClient = ''; /*属性 存放db对象*/
        this.connect(); /*实例化的时候就连接数据库*/
      }
    
      connect() { /*连接数据库*/
        let _that = this;
        return new Promise((resolve, reject) => {
          if (!_that.dbClient) { /*解决数据库多次连接的问题*/
            MongoClient.connect(Config.dbUrl, (err, client) => {
              if (err) {
                reject(err);
              } else {
                _that.dbClient = client.db(Config.dbName);
                resolve(_that.dbClient);
              }
            })
          } else {
            resolve(_that.dbClient);
          }
        })
      }
    
      find(collectionName, json) { /*查询数据*/
        return new Promise((resolve, reject) => {
          this.connect().then((db) => {
            var result = db.collection(collectionName).find(json);
            result.toArray((err, docs) => {
              if (err) {
                reject(err);
                return;
              }
              resolve(docs);
            })
          })
        })
      }
    
      update(collectionName, json1, json2) { /*更新数据*/
        return new Promise((resolve, reject) => {
          this.connect().then((db) => {
            db.collection(collectionName).updateOne(json1, {
              $set: json2
            }, (err, result) => {
              if (err) {
                reject(err);
              } else {
                resolve(result);
              }
            })
          })
        })
      }
    
      insert(collectionName, json) { /*新增数据*/
        return new Promise((resolve, reject) => {
          this.connect().then((db) => {
            db.collection(collectionName).insertOne(json, function (err, result) {
              if (err) {
                reject(err);
              } else {
                resolve(result);
              }
            })
          })
        })
      }
    
      remove(collectionName, json) { /*删除数据*/
        return new Promise((resolve, reject) => {
          this.connect().then((db) => {
            db.collection(collectionName).removeOne(json, function (err, result) {
              if (err) {
                reject(err);
              } else {
                resolve(result);
              }
            })
          })
        })
      }
    
      getObjectId(id) { /*mongodb里面查询 _id 把字符串转换成对象*/
        return new ObjectID(id);
      }
    }
    
    module.exports = Db.getInstance();

    2.视图层

    根目录/views/index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .table {
          border: 1px solid #eee;
          text-align: center;
        }
        
        .table td,
        .table th {
          border: 1px solid #eee;
          text-align: center;
        }
      </style>
    </head>
    
    <body>
      <br />
      <br />
      <a href="/add">增加用户</a>
      <br />
      <br />
      <table class="table">
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        {{each list}}
        <tr>
          <td>{{$value.username}}</td>
          <td>{{$value.age}}</td>
          <td>{{$value.sex}}</td>
          <td>
            <a href="/edit?id={{@$value._id}}">编辑</a> <a href="/delete?id={{@$value._id}}">删除</a>
          </td>
        </tr>
        {{/each}}
      </table>
    </body>
    
    </html>

    根目录/views/edit.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <h2>编辑用户</h2>
      <form action="/doEdit" method="post">
        <input type="hidden" name="id" value="{{@list._id}}" />
        <br />用户名:
        <input type="text" name="username" value="{{list.username}}" />
        <br />
        <br /> 年龄:
        <input type="text" name="age" value="{{list.age}}" />
        <br />
        <br /> 性别:
        <input type="text" name="sex" value="{{list.sex}}" />
        <br />
        <br />
        <input type="submit" value="提交" />
      </form>
    </body>
    
    </html>

    3.控制层

    根目录/app.js

    // 引入模块
    const Koa = require('koa');
    const router = require('koa-router')(); /*引入是实例化路由 推荐*/
    const render = require('koa-art-template');
    const path = require('path');
    const BodyParser = require('koa-bodyparser');
    const DB = require('./module/db.js');
    
    // 实例化
    let app = new Koa();
    
    // 配置post提交数据的中间件
    app.use(BodyParser());
    
    // 配置 koa-art-template 模板引擎
    render(app, {
      root: path.join(__dirname, 'views'), // 视图的位置
      extname: '.html', // 后缀名
      debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式
    })
    
    // 显示学员信息
    router.get('/', async (ctx) => {
      let result = await DB.find('user', {});
    
      await ctx.render('index', {
        list: result
      });
    })
    
    // 增加学员
    router.get('/add', async (ctx) => {
      await ctx.render('add');
    })
    
    // 执行增加学员的操作
    router.post('/doAdd', async (ctx) => {
      // 获取表单提交的数据
      // console.log(ctx.request.body); // { name: 'aaa', age: 'aa', sex: 'a' }
      let data = await DB.insert('user', ctx.request.body);
      // console.log(data);
    
      try {
        if (data.result.ok) {
          ctx.redirect('/');
        }
      } catch (err) {
        console.log(err);
        ctx.redirect('/add');
      }
    })
    
    // 编辑学员
    router.get('/edit', async (ctx) => {
      // 通过 get 传过来的 id 来获取用户信息
      let id = ctx.query.id;
      // 获取用户信息
      let data = await DB.find('user', { "_id": DB.getObjectId(id) });
      console.log(data);
    
      await ctx.render('edit', {
        list: data[0]
      });
    })
    
    router.post('/doEdit', async (ctx) => {
      // 获取用户信息
      // console.log(ctx.request.body);
      var id = ctx.request.body.id;
      var username = ctx.request.body.username;
      var age = ctx.request.body.age;
      var sex = ctx.request.body.sex;
    
      let data = await DB.update('user', { "_id": DB.getObjectId(id) }, {
        username, age, sex
      })
    
      try {
        if (data.result.ok) {
          ctx.redirect('/')
        }
      } catch (err) {
        console.log(err);
        ctx.redirect('/edit');
      }
    })
    
    // 删除学员
    router.get('/delete', async (ctx) => {
      let id = ctx.query.id;
      let data = await DB.remove('user', { "_id": DB.getObjectId(id) });
      console.log(data);
    
      if (data) {
        ctx.redirect('/');
      }
    })
    
    app.use(router.routes());
    app.use(router.allowedMethods());
    
    app.listen(3000);

    .

  • 相关阅读:
    常见浏览器的兼容问题
    SCSS 的理解
    常见浏览器兼容性问题与解决方案(上)
    常见浏览器兼容性问题与解决方案(下)
    ie6定位absolute bug触发layout解决
    AngularJS 最常用的八种功能
    IE6的3像素bug
    CSS属性级Hack
    什么是SASS
    什么是less?
  • 原文地址:https://www.cnblogs.com/crazycode2/p/10977029.html
Copyright © 2020-2023  润新知