通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是每一个页面的内容都是通过字符串的方式给送给浏览器的，这样的开发方式并不友好，我们更希望直接发送html页面。
模板引擎可以解决这个问题，通过模板引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模板中，然后发送给客户端。
const Koa = require("koa");
const nunjucks = require("nunjucks");
const views = require("koa-views");
const app = new Koa();
app.use(views(__dirname + '/views', {
//将使用nunjucks模板引擎渲染以html为后缀的文件。
map: { html: 'nunjucks' }
}));
app.use(async ctx => {
//render方法渲染模板，第二个参数可以给模板传递参数
await ctx.render("index",{title:"我的第一个模板"})
})
app.listen(3000, () => {
console.log("server is running");
})
写在view文件夹下的模板文件（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>{{title}}</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
app.use(views(__dirname + ‘/views’, {
//将使用nunjucks模板引擎渲染以html为后缀的文件。
map: { html: ‘nunjucks’ }
}));
这个方法两个参数，一个指定模板引擎在哪个目录（实际上目录里面存的是一个标准的html），第二个指定模板引擎
使用render方法渲染模板，第二个参数可以给模板传递参数
const router = require("koa-router")();
const Koa = require("koa");
const nunjucks = require("nunjucks");
const views = require("koa-views");
const app = new Koa();
app.use(views(__dirname + '/views', {
//将使用nunjucks模板引擎渲染以html为后缀的文件。
map: { html: 'nunjucks' }
}));
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: "欢迎来到晓舟报告"
})
});
router.get('/docs', async (ctx, next) => {
await ctx.render('index', {
title: '晓舟报告',
desc: '让学习更高效'
})
});
app.use(router.routes())
app.listen(3000, () => {
console.log("server is running");
})
两个get方法都加载的是一个html(index)，但是却能展示两个页面。
写了一个html作为模板，可以当俩页面用。不错不错。
表单向后台发送数据，首先看两个form标签的属性。
action属性：指定表单提交数据的路径
method属性：指定表单提交数据的请求方法，请求方法包括get、post。
get会在url上带着，post则不会。
form标签设置完成之后，要对表单空间进行设置
input.name属性：指定数据传输的字段(key)
input.type=“submit”：指定提交按钮，点击后提交表单数据
router.get("/data", async ctx => {
let username = ctx.query.username;
await ctx.render("home", { usr: username })
})
获取get请求的数据
实例代码如下所示：
const router = require("koa-router")();
const Koa = require("koa");
const nunjucks = require("nunjucks");
const views = require("koa-views");
const app = new Koa();
app.use(views(__dirname + '/views', {
//将使用nunjucks模板引擎渲染以html为后缀的文件。
map: { html: 'nunjucks' }
}));
app.use(async (ctx, next) => {
await ctx.render("index");
await next();
})
//获取get请求的参数
router.get("/login", async ctx => {
let username = ctx.query.username;
let password = ctx.query.password;
await ctx.render("home", {
username: username,
password: password
})
})
app.use(router.routes())
app.listen(3000, () => {
console.log("server is running");
})
index.html
<body>
<form action="/login" method="GET">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录">
</form>
</body>
home.html
<body>
<p>用户名：{{username}}</p>
<p>密码：{{password}}</p>
</body>
直接通过ctx.query可以获取get请求的数据，
若需要获取post请求的数据，需要安装第三方模块koa-parser来解析post请求，实例代码如下所示：
const router = require("koa-router")();
const Koa = require("koa");
const nunjucks = require("nunjucks");
const views = require("koa-views");
const parser = require('koa-parser')
const app = new Koa();
app.use(parser());
app.use(views(__dirname + '/views', {
//将使用nunjucks模板引擎渲染以html为后缀的文件。
map: { html: 'nunjucks' }
}));
app.use(async (ctx, next) => {
await ctx.render("index");
await next();
})
//获取Post请求的参数
router.post("/login", async ctx => {
let username = ctx.request.body.username;
let password = ctx.request.body.password;
await ctx.render("home", {
username: username,
password: password
})
})
app.use(router.routes())
app.listen(3000, () => {
console.log("server is running");
})
学习视频
https://www.bilibili.com/video/BV1zf4y1r711?p=8&share_source=copy_web