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);

.