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. css强制换行显示省略号之显示两行后显示省略号

    1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...

  2. 重装系统失败后怎么用好系统U盘启动解决？

    很多朋友在第一次重装电脑系统时都会出现这样或那样的错误,导致重装系统后进不去系统,非常的被动.那么当我们遇到这种情况该怎么办呢?其实我们可以使用好系统U盘启动来解决重装系统后进不去的问题. 好系统U盘 ...

  3. JDBC模拟登陆及SQL语句防注入问题

    实现模拟登陆效果:基于表Tencent package boom; import java.sql.Connection; import java.sql.DriverManager; import ...

  4. deep_learning_Function_sklearn的train_test_split()

    sklearn的train_test_split   train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. 格式: X_tra ...

  5. C# 获取 oracle 存储过程输出参数值

    public bool QueueToRegister(string appointsId, string enrolDoctor) { using (OleDbConnection conn = n ...

  6. Keepalived + Haproxy + PXC 理论篇

    最终模型: 将Kp1 + Kp2 分别和Ha1和Ha2部署在一起,同时绑定VIP ip,对外提供访问,同时监控本机的Haproxy的可用性 通过Ha1 + Ha2 为PXC提供负载均衡,分发请求到后端 ...

  7. 第11章 Spring Boot使用Actuator

    在生产环境中,需要实时或定期监控服务的可用性,spring-Boot的Actuator 功能提供了很多监控所需的接口. Actuator是Spring Boot提供的对应用系统的自省和监控的集成功能, ...

  8. 返回vector指针案例

    void prog1_static(void) { int pos = 9; // elem will hold the element's value vector<int> *elem ...

  9. Postman之 SSL证书配置随手记

    参考文档: https://learning.getpostman.com/docs/postman/sending_api_requests/certificates/ 随着 https 的推动,更 ...

  10. jmeter+jenkins+git+ant

    摘自:https://www.cnblogs.com/syw20170419/p/10732167.html 使用场景: 多人协作,共同完成脚本的编写,脚本之间进行合并后,用远程构建运行脚本.做接口的 ...