- 安装koa-views和ejs
1. 安装 koa-views
npm install --save koa-views / cnpm install --save koa-views
2. 安装 ejs
npm install ejs --save / cnpm install
- 配置koa-views中间件
const Koa = require('koa'),
body = require('koa-body'),
Router = require('koa-router'),
views = require('koa-views');
const app = new Koa;
const router = new Router;
// app.use(views('../views', { map: { html: 'ejs'}}))
// 这种方式配置模板引擎，模板引擎的后缀名是html结尾
app.use(views('../views', {
extension: 'ejs'
}));
router.get('/', async (ctx) => {
await ctx.render('views')
})
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => console.log('http://localhost:3000'))
image.png
创建目录存放ejs模板引擎，需要注意的是官网指出两种配置引擎的方式，
app.use(views('../views', { map: { html: 'ejs'}}))这种方式配置的模板引擎的后缀名是html结尾。
-
ejs引入外部模板
这种做法的好处是可以将部分公共的模板提取出来
<%- include xxx.ejs %>
- ejs绑定数据
<%=xxx%>
// 将title传入模板中
router.get('/', async (ctx) => {
let title = '首页站点';
await ctx.render('views', {
title: title
})
})
// 使用
<%=title%>
- ejs绑定html模板
<%-xxx%>
// 将temp的html模板传入ejs中
router.get('/', async (ctx) => {
let temp = `<h2>ejs模板</h2>`;
await ctx.render('views', {
temp: temp
})
})
// 使用
<%-temp%>
- ejs模板中使用if判断语句
router.get('/', async (ctx) => {
let status = false;
await ctx.render('views', {
status,
})
})
<% if(status) {%>
<span>true</span>
<% } else {%>
<span>false</span>
<% } %>
- ejs模板中使用for循环语句
router.get('/', async (ctx) => {
let list = [
{
name: 'zhangsan',
age: 24
},
{
name: 'lisi',
age: 20
},
{
name: 'admin',
age: 30
}
];
await ctx.render('views', {
list,
})
})
<% for(let i = 0; i < list.length; i++) { %>
<p>姓名: <%=list[i].name%> 年龄: <%=list[i].age%></p>
<% } %>
