学习koa模板引擎中间件koa-views
我们做WEB出身的一直很自然的想到怎么实现前端显示，早期我们都是把asp,php在html插入相应的asp及php代码，后面再就是使用一些标记来用于前台显示，主要是为了实现MVC，把前端和后端逻辑分离，现在想像一下按理来nodejs应也是有的，其实koa作为WEB框架按理也是有这一部分的，所今天来学习一下中间件koa-views.
我现在也是一边学一边写的，主要是记录下来当时学习的过程，因此可能有很多错误的地方，表达也可能有问题，这个不是重点，重点就是记录一下一个新手学习和思考的过程，也给小白一个学习参考。
1、第一步我想应是安装这个中间件，我们使用yarn add koa-views看看。为什么用yarn呢，当然是这个效率高一点，速度快一点，npm install 确实有点慢。安装很成功，没什么问题。这里突然想到怎么看一个模块有没有装呢，先查查。我们用yarn list koa-views来看看。当然也可以进入node_modules看看有没有这个目录或文件，也可以在vscode中编写时看看会不会报错，如果安装了会能正常通过右链转到定义处的。
PS D:\chen\nodejs\test> yarn add koa-views
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
PS D:\chen\nodejs\test> yarn list koa-views
yarn list v1.22.19
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ koa-views@8.0.0
Done in 0.20s.
2、看来是安装好了，安装好了我们就得引用这个中间件然后注册中间件
const views = require('koa-views');
app.use(views(path.join(__dirname,'./view'),{
extends:'ejs'
}))
3、我们通过上面看出他是要建一个view目录用来存放视图文件，扩展名为ejs,我来试一试。结果测试一下出现不了页面，提示：Cannot find module ‘ejs’ ，是不是还要安装一个ejs模块？先安装试一下，看来这个koa-views只是类以于我们定义一个用来存放静态文件一样的功能，最终要想到html中增加相应的标记来输出动态内容还是要依赖于ejs模板引擎，不然就是原样的html静态文件输出。安装了ejs后显示正常了，得了的输出结果为：
hello koa2
EJS Welcome to hello koa2
这里我突然想到，如果我把ejs改为html或者其它的扩展名是否可行呢，试一下，结果是原样的输出，并没替换掉title标记，因此看来ejs要想完成替换扩展名必须为ejs，再就如果我们再加上路由的话，他是不是也能通过路由来找到相应的ejs文件呢，我再来试一下，
<%= title %>
EJS Welcome to <%= title %>
完整的代码如下：
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
app.use( async ( ctx ) => {
let title = 'hello koa2'
await ctx.render('index', {
title,
})
})
app.listen(3000)
测试1：
增加路由后的效果，测试可以正常执行，但这里要注意的是route.get第一个参数是路由地址，第二个参数是一个方法，不能是字符串，这个方法的参数是一个ctx对象，我们可以通过ctx的render来对视图进行渲染。第一个参数是模板名称，这里会自动到view去找test.ejs文件，这个是在前面koa-views中定义好的，第二个参数是要规换的数据。
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const router = require('./router/router')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
async function test(ctx){
await ctx.render("test",{title:"====aaa==="});
}
router.get("/test",test);
app.use(router.routes(), router.allowedMethods());
app.listen(3000)
view/test.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>這是我的一個測試程序<%= title %></p>
</body>
</html>
测试2：
可不可以多次执行render呢？测试一下发现可以，只不过会用后面的替换前面的。只显示bbbb了，
async function test(ctx){
await ctx.render("test",{title:"====aaa==="});
await ctx.render("test",{title:"====bbbd==="});
}
bbbd=
這是我的一個測試程序bbbd=
测试3：
如果我替换的变量不一样，会怎么样呢？经过测试发现ejs的标记必须完全替换，不然会出错，也就是说前面有title的话，后台必须要有title对应的数据，如果没有就会出错，像下面就会出错，他不是简单理解为了第一次替换title和userName，第二次再替换userName，下面的实际效果是第一次替换title的同时替换userName，第二次必须也要有title，不能只是userName，不然会出错。
async function test(ctx){
await ctx.render("test",{title:"====aaa===",userName:"----"});
await ctx.render("test",{userName:"====顏歡==="});
}
router.get("/test",test);