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. js小功能3：一个简单的计算器功能

    html: <input type='text' id='txt1' /> <select id='select'> <option value='+'>+< ...

  2. JavaMaven【二、目录结构&HelloMaven】

    目录结构 Demo: 1.创建目录结构 2.编写hello maven以及对应的test,放到对应目录下 package com.shane.maven01.model; public class H ...

  3. tp5.1 nginx配置

    解决方案 修改fastcgi的配置文件    目录:/www/server/nginx/conf/fastcgi.conf fastcgi_param PHP_ADMIN_VALUE "op ...

  4. loadrunner执行场景时报Error -27040: Data Format Extension: Init: Internal error问题解决

    [问题描述] 在loadrunner控制台执行场景时,所有用户均Failed,查看errors,错误原因如下: Error -27040: Data Format Extension: Init: I ...

  5. Java 访问 C++ 方法：JavaCPP

    JavaCPP提供了在Java中高效访问本地C++的方法.采用JNI技术实现,支持所有Java实现包括Android系统,Avian 和 RoboVM. JavaCPP提供了一系列的Annotatio ...

  6. laravel的下载与安装

    下载代码 https://github.com/laravel/laravel 在开发环境中配置好之后将根目录的 .env.example 文件改成 .env ,此文件是laravel的配置文件,将 ...

  7. Redis02——Redis单节点安装

    Redis单节点安装 一.Redis的数据类型 string hash list set zset 二.安装 2.1.下载 wget http://download.redis.io/releases ...

  8. java 学习笔记（三）ZooKeeper集群搭建实例，以及集成dubbo时的配置 （转）

    ZooKeeper集群搭建实例,以及集成dubbo时的配置 zookeeper是什么: Zookeeper,一种分布式应用的协作服务,是Google的Chubby一个开源的实现,是Hadoop的分布式 ...

  9. JS 函数基础

    函数简介 函数 函数也是一个对象 函数中可以封装一些功能(代码),在需要时可以指向这些功能(代码) 函数中可以保存一些代码在需要时调用 使用typeof检查一个函数对象时,会返回function 创建 ...

  10. mysql中source提高导入数据速率的方法

    示例: 第一步: 第二步: 使用 source 导入你所需要导入的文件 第三步: 在导入的数据停止后,输入  commit; 这样数据就算是导入完成了.