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 模板 联动 --- 新增数据的更多相关文章

  1. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  2. koa 基础（十五）cookie 设置中文

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  3. 夯实Java基础(二十五)——JDBC使用详解

    1.JDBC介绍 JDBC的全称是Java Data Base Connectivity(Java数据库连接).是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问(例如MyS ...

  4. [转]WPF and Silverlight 学习笔记（二十五）：使用CollectionView实现对绑定数据的排序、筛选、分组

    在第二十三节,我们使用CollectionView实现了对于绑定数据的导航,除导航功能外,还可以通过CollectionView对数据进行类似于DataView的排序.筛选等功能. 一.数据的排序: ...

  5. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  6. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  7. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

随机推荐

  1. MYSQL 增加语句(数据)

    增加数据     如果你失忆了,希望你能想起曾经为了追求梦想的你.     前一节我们学习了查询语句 SELECT,这节课,我们学习增加 INSERT INTO ****  VALUES ****,基 ...

  2. <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用

    <%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...

  3. Python中GUI库PyQt5的安装和配置

    在使用Tkinter开发GUI程序时,发现相关文档比较少,开发起来太累.经过综合比较,决定使用PyQt这个库.下面是简单的安装步骤. 1.安装 PyQt5 : pip install PyQt5 -i ...

  4. TCP/IP网络知识

    1.TCP/IP概念 TCP/IP不是单指一种传输协议,而是一组传输控制协议/互联网协议. 2.TCP/IP分层 (计算机网络中,实际应用的网络协议是TCP/IP协议族,TCP/IP的应用层大体上对应 ...

  5. Delphi WaitCommEvent函数

  6. Linux下pwn从入门到放弃

    Linux下pwn从入门到放弃 0x0 简介 pwn,在安全领域中指的是通过二进制/系统调用等方式获得目标主机的shell. 虽然web系统在互联网中占有比较大的分量,但是随着移动端,ioT的逐渐流行 ...

  7. eclipse控制台出现中文乱码的问题

    在Eclipse.exe同目录下,在eclipse.ini添加:Dfile.encoding=utf-8

  8. mybatis框架中 动态代理的问题

    在配置文件时候 id唯一性 所以不允许重载 <select id=" querydemo"   resultType="pojo"> sql 语句  ...

  9. 异步通信&同步通信

    首先是两者的不同: 同步通信要求接收端时钟频率和发送端时钟频率一致,发送端发送连续的比特流:异步通信时不要求接收端时钟和发送端时钟同步,发送端发送完一个字节后,可经过任意长的时间间隔再发送下一个字节. ...

  10. PHP程序员的技能图谱

    PHP知识图谱