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. conda查找安装包的版本以及安装特定版本的包

    如下图 想要安装特定版本的torchvision,然后conda search torchvision,能够列出conda云上所有的安装包 然后,安装包的时候,conda install 包名=版本就 ...

  2. MySQL导出数据到文件中

    一.导出一张表数据 把test_time表中的数据导出成txt 文件 mysql> show global variables like '%secure%'; +--------------- ...

  3. 第十章、os模块

    目录 第十章.os模块 一.os模块 第十章.os模块 一.os模块 方法 详解 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirn ...

  4. 【Day2】3.面向对象编程

    课程目标 1. 面向对象编程 2. 类和实例 3. 访问限制 4. 实例属性和类属性 面向对象编程 • 面向对象编程是一种程序设计思想 • 面向对象把类和对象作为程序的基本单元 • 对象包含属性和方法 ...

  5. Phoenix设置联合主键

    1例如 create table test12(email varchar not null,id integer not null,name varchar not null,age integer ...

  6. Android异常与性能优化相关面试问题-bitmap面试问题详解

    recycle: 对于Bitmap来说内存分为Java内存和Native内存,而当图片不用时建议调用一下recycle()方法来将native层的内存进行回收,下面看一下它的源码官方对它的解释: LR ...

  7. 【2019中国大学生程序设计竞赛-女生专场】C - Function

    原题 韦神提供的思路orz 首先一个显然的性质,所有的c可以提出来,方程变成ax^2+bx的形式 因为x的值是离散的,而m的值又不大 所以一开始让x都为1(注意!x是正整数),然后每次挑一个x让他加一 ...

  8. [CEOI1999]Sightseeing trip(Floyed)

    [CEOI1999]Sightseeing trip Description There is a travel agency in Adelton town on Zanzibar island. ...

  9. Web前端开发——HTML文件结构

    在编写html文件时,把文件保存成 .htm 或 .html的后缀. 基本文件结构 <html> <head> <title></title> < ...

  10. Netty入门 零基础

    因为接下来的项目要用到netty,所以就了解一下这个程序,奈何网上的教程都是稍微有点基础的,所以,就写一篇对于netty零基础的,顺便也记录一下. 先扔几个参考学习的网页: netty 官方API:  ...