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. 简单的todolist的demo

    放上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  2. 将xml作为输入参数传递给存储过程

    1 查看存储过程的方式 exec sp_helptext 'GetTrackingFeedLogByMaxId' select definition from sys.sql_modules wher ...

  3. Linux 下vim命令详解

    原博文:https://www.cnblogs.com/zknublx/p/6058679.html 高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx   ...

  4. Qt常用的登录界面设计

    记录一下Qt常用的登录界面的设计 方便以后使用! 1.QpushButton改变一个按钮的颜色,当鼠标放上去和移开时显示不同的颜色.QPushButton { background-color: rg ...

  5. Manjaro18+kde 更换壁纸重启失效

    更换壁纸 ​ 在kde的桌面右键->配置桌面 壁纸里更换壁纸,我不能直接添加图像并应用.我的系统在这样操作后重启就会发现一切都被重置了.刚刚添加的图片也不见了. ​ 于是,我就模范原本存在壁纸文 ...

  6. QTP（10）

    一.VBS语言基础 1.运算符和表达式 (1)运算符 (2)表达式 a.数学表达式:由算术运算符连接,计算结果为数字 b.字符串表达式:由字符串连接符连接,计算结果为字符串 c.条件表达式:由关系运算 ...

  7. P2634 树上路径长度为3的倍数的点对数 点分治

    在计算答案的时候维护一个数组num num[i]为当前所有点距离根距离%3的数量 则当前块的答案为num[0]*num[0]+2*num[1]*num[2] #include<bits/stdc ...

  8. 在xshell中安装python3.6

    首先下载python安装包 wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tar.xz 然后解压 tar Jxvf Python- ...

  9. 使用IDEA 搭建一个 SpringBoot + Hibernate + Gradle 项目

    现在创建个项目: 勾上 自已 需要东西.(这里作为演示) maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'} 关闭项目 ...

  10. linux编译esp8266

    编译工具是xtensa-lx106-elf-gcc,一般会在~/.bashrc文件下添加 export PATH="$HOME/esp-open-sdk/xtensa-lx106-elf/b ...