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. 十，StatefulSet简介及简单使用

    目录 StatefulSet简介 为什么要用statefulset控制器 简单测试 使用 StatefulSet 创建基础的PV StatefulSet 清单 statefulset管理pod的启停顺 ...

  2. 【转】QT中添加的资源文件qrc时的路径问题小结

    @2019-06-13 [小记] QT中添加的资源文件qrc时的路径问题小结

  3. PTA ”写出这个数“

      读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10的100次方. 输出格式: 在 ...

  4. css改变背景透明度

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml- ...

  5. 转PostgreSQL 用游标优化的一个例子

    一位PG社区的朋友提到的一个应用场景,目前遇到性能问题. 数据结构大概是这样的,包含一个主键,一个数组,一个时间,其他字段. 请求分析: 有检索需求,比较频繁.查找数组中包含某些元素的记录,并按时间排 ...

  6. [React] Always useMemo your context value

    Have a similar post about Reac.memo. This blog is the take away from this post. To understand why to ...

  7. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  8. Elasticsearch：运用shard filtering来控制索引分配给哪个节点

    在我们的实际部署中,我们的各个node(节点)的能力是不一样的.比如有的节点的计算能力比较强,而且配有高性能的存储,速度也比较快,同时我们可能有一些node的能力稍微差一点,比如计算能力及存储器的速度 ...

  9. nginx信号

    ps aux | grep nginx #查看nginx进程,要查看nginx的pid,就得使用这个命令查看*********************nginx信号****************** ...

  10. removeAttr(name)

    removeAttr(name) 概述 从每一个匹配的元素中删除一个属性 1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的.解决的方法就是使用$(" ...