koa 基础（二十五）数据库与 art-template 模板联动 --- 新增数据

1.视图层

根目录/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="#">删除</a> <a href="#">编辑</a>
      </td>
    </tr>
    {{/each}}
  </table>
</body>

</html>

根目录/views/add.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="/doAdd" method="post">
    <br />用户名：
    <input type="text" name="username" />
    <br />
    <br /> 年龄：
    <input type="text" name="age" />
    <br />
    <br /> 性别：
    <input type="text" name="sex" />
    <br />
    <br />
    <input type="submit" value="提交" />
  </form>
</body>

</html>

2.控制层

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) => {
  let data = await DB.update('user', {
    'username': '赵六'
  }, {
      'username': '赵六666'
    });

  console.log(data.result);

  ctx.body = '更新数据';
})

// 删除学员
router.get('/delete', async (ctx) => {
  let data = await DB.remove('user', {
    'username': '张珊珊'
  });

  console.log(data.result);

  ctx.body = '删除数据';
})

app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

3.效果图

koa 基础（二十五）数据库 与 art-template 模板 联动 --- 新增数据

koa 基础（二十五）数据库与 art-template 模板联动 --- 新增数据