不以风骚惊天下，愿以技术渡佳人。
大家好，我是奶挺老师，江湖人称莒巭萎（lvbuwei），嘿嘿嘿，我又来叨扰大家了。
通过前面两节课程的学习，相信大家通过实际操作和翻阅其他文档，已经可以自主操作koa和koa-router了，那么我们服务和路由都能控制了，但是我们发现我们的页面很丑，也没有怎么设计，这个时候我们不能做了好东西自己独吞啊，是吧，有句话说的好啊，独乐了不如众乐乐，当年冠希哥还不忘给咱们喝汤呢，我们岂有独据之理啊。
那么如何更好的来操作页面呢，今天给大家带来的小娘们是ejs模板引擎，这个模板允许我们在html文件中输出变量、判断语句、原样输出、循环数据等，对于后端开发来说这个模板非常方便。下面，我们进入她的身体，看看到底藏了哪些技能包，一起来吧，宝贝们。。。
安装ejs模板
cd Desktop/code/koa_demo
npm install ejs koa-views --save
安装成功以后，我们来控制她，我们手中可是有遥控器的哦。。。
配置ejs模板
新建ejs课程文件
cd Desktop/code/koa_demo
mkdir ejs
cd ejs
mkdir views
touch index.js
cd views
touch index.html
引入koa-views渲染ejs中间件
const Koa = require('koa')
const Router = require('koa-router')
const views = require('koa-views') //引入koa-views渲染器
const app = new Koa()
const router = new Router()
/**
* koa-views 使用任何路由器之前，必须先使用,下面两种配置方式任选其一
*/
/**
* [extension description] koa-views 配置ejs模板第一种方案，前端页面文件后缀必须是.ejs
* @type {String}
*/
app.use(views(__dirname + '/views',{extension: 'ejs'}))
/**
* [extension description] koa-views 配置ejs模板第二种方案，前端页面文件后缀必须是.html
* @type {String}
*/
// app.use(views(__dirname + '/views', {
// map: {
// html: 'ejs'
// }
// }));
router.get('/index', async (ctx,next) => {
await ctx.render('index') //渲染文件时，await不能丢哈
})
app
.use(router.routes())
.use(router.allowedMethods())
app.listen(3000)
console.log('service is running 3000 port')
保存代码，启动服务
node index.js
访问http://localhost:3000/index可以看到
ejs基本语法
变量赋值
语法：<%=变量 %> 首先我们要到index.js中给index.ejs/index.html页面传递一个变量
...
router.get('/index', async (ctx,next) => {
let params = {
title: '张三'
}
await ctx.render('index',{params}) //渲染文件时，await不能丢哈，第二个参数就是我们传递到页面中的参数
})
...
index.ejs/index.html页面修改（只是文件后缀名不同，里面的代码完全一致）
...
<body>
<h2>this is ejs page</h2>
<h3>welcome to ejs模板引擎</h3>
<h3>变量渲染</h3>
<span><%=params.title %></span>
</body>
...
那我们如果后台给前端传了一个html标签怎么办？浏览器又会如何渲染呢，你看
index.js修改
...
router.get('/index', async (ctx,next) => {
let params = {
title: '张三',
htmlTag: '<h3>原样输出</h3>'
}
await ctx.render('index',{params}) //渲染文件时，await不能丢哈
})
...
index.ejs修改
...
<body>
<h2>this is ejs page</h2>
<h3>welcome to ejs模板引擎</h3>
<h3>变量渲染</h3>
<span><%=params.title %></span>
<p>原样输出</p>
<%=params.htmlTag %>
<%-params.htmlTag %>
</body>
...
可以看出：
如果想要html标签不渲染直接输出就用“<%= 变量%>”语法
如果想要浏览器解析标签后再渲染就用“<%-变量%>”
逻辑/循环语句
语法：<% if(条件) { %>渲染内容<% } %>
index.js修改
...
router.get('/index', async (ctx,next) => {
let params = {
title: '张三',
htmlTag: '<h3>原样输出</h3>',
is:false,
lists: [69,69,69]
}
await ctx.render('index',{params}) //渲染文件时，await不能丢哈
})
...
index.ejs修改
...
<body>
<h2>this is ejs page</h2>
<h3>welcome to ejs模板引擎</h3>
<h3>变量渲染</h3>
<span><%=params.title %></span>
<p>原样输出</p>
<%=params.htmlTag %>
<%-params.htmlTag %>
<h3>逻辑语句</h3>
<% if (params.is) { %>
<h2><%= params.title %></h2>
<% }else { %>
<h2>false</h2>
<% }%>
<h3>循环语句</h3>
<ul>
<% for(let i = 0; i < params.lists.length; i++) {%>
<li><%= params.lists[i] %></li>
<% }%>
</ul>
</body>
...
注意啊：改完代码要重新启动服务
引入其他组件
语句：<%- ./index.html, {key: value}%> index.ejs修改
...
<body>
<h2>this is ejs page</h2>
<h3>welcome to ejs模板引擎</h3>
<h3>变量渲染</h3>
<span><%=params.title %></span>
<p>原样输出</p>
<%=params.htmlTag %>
<%-params.htmlTag %>
<h3>逻辑语句</h3>
<% if (params.is) { %>
<h2><%= params.title %></h2>
<% }else { %>
<h2>false</h2>
<% }%>
<h3>循环语句</h3>
<ul>
<% for(let i = 0; i < params.lists.length; i++) {%>
<li><%= params.lists[i] %></li>
<% }%>
</ul>
<h3>引入组件</h3>
<%- include('./components/header',{user: params.title}) %>
</body>
...
新增components文件夹并且新增header.ejs组件
cd cd Desktop/code/koa_demo/ejs/views
mkdir components
cd components
touch header.ejs
header.ejs修改
<h1>This Is Header Component page</h1>
<%= user %>
重启服务
ok,到这里ejs在koa框架中的基本使用我们就已经掌握了，恭喜恭喜，各位爱卿又向全栈进阶了一步。
这下我们把ejs从里到外都给剥开了揉碎了，舒服了舒服了。希望大家自己也动手敲一下代码哈，奶挺老师每节课都是自己手动敲的，基本没有复制过代码，所以也希望各位不要偷懒哦。。。
个人格言: 花堪折时直须折 莫待无花空折枝。生死看淡，不服就干...
