koa 基础(二十五)数据库 与 art-template 模板 联动 --- 新增数据
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 模板 联动 --- 新增数据的更多相关文章
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- koa 基础(十五)cookie 设置中文
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 夯实Java基础(二十五)——JDBC使用详解
1.JDBC介绍 JDBC的全称是Java Data Base Connectivity(Java数据库连接).是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问(例如MyS ...
- [转]WPF and Silverlight 学习笔记(二十五):使用CollectionView实现对绑定数据的排序、筛选、分组
在第二十三节,我们使用CollectionView实现了对于绑定数据的导航,除导航功能外,还可以通过CollectionView对数据进行类似于DataView的排序.筛选等功能. 一.数据的排序: ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
- Bootstrap <基础二十二>超大屏幕(Jumbotron)
Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...
随机推荐
- 解决Eclipse中springBoot中文乱码问题
除了常见的application.properties文件中设置#设置spring-boot 编码格式banner.charset=UTF-8server.tomcat.uri-encoding=UT ...
- java 读取property
Properties prop = new Properties(); String path = AlarmController.class.getResource("/").g ...
- Ceph自动化部署----Ceph-ansible
目录 Ceph自动化部署----Ceph-ansible 一.前言--Ceph的几种不同的部署方式 二.使用Ceph-ansible部署Ceph Ceph自动化部署----Ceph-ansible 一 ...
- Jmeter (三) 集合点 、检查点 (断言)
不同的 测试工具有不同的命名 断言 :即检查点,在请求中 加入测试人员的判断,返回 结果 TRUE or FALSE ,得到 测试人员的判断是否正确 集合点 1.打开 synchronizing ...
- Asp.Net MVC5 使用Unity 实现依赖注入
到这里安装完毕会提示一个redme.txt,说 把 UnityConfig.RegisterComponents(); 放到下图的位置,我们照做即可. 然后我们看一下这个 UnityConfig ...
- kotlin默认参数和具名参数
纯语法操练,这里先定义一些数学计算公式,顺便来复习复习,如下: 然后编写测试代码来调用下它们: 编译运行: 但是!!!对于这四个函数都有一个参数是pi: 而实际上它是一个常量,可以手动给它定义一个默认 ...
- System.nanoTime与System.currentTimeMillis
System.nanoTime提供相对精确的计时,但是不能用他来计算当前日期.(系统计时器的当前值,以毫微秒为单位) System.currentTimeMillis返回的是从1970.1.1 UTC ...
- BBS-media配置
media配置: 在上传头像的时候会用到media,首先需要在setting中加下面这一句话 MEDIA_ROOT=os.path.join(BASE_DIR,"blog",&qu ...
- mysql 模拟oracle中的序列
因业务需要,把oracle 数据据转成mysql,同时oracle中程序本来一直在用 序列, mysql中没有,所以需要在mysql中新建一个表进行模拟, CREATE TABLE `sequence ...
- vue项目 WebViewJavascriptBridge 适配android和ios
前言 最近在app 原生页面 嵌套 做Vue 的H5,混合开发,当然原生和Vue 交互方面当然用到 WebViewJavascriptBridge 这个东西啦, 当然在用到的时候也有问题,可以参考大佬 ...