第03讲 koa2使用ejs
2018-05-06 本文已影响2413人
谢炳南
1. 下载依赖包
npm install koa-views --save
npm install ejs --save
2. index.js页面代码
// 引入koa
const koa = require('koa');
const app = new koa();
// 注意：引入的方式
const router = require('koa-router')();
const views = require('koa-views');
// 配置模版引擎中间件
// 如果这样配置不修改html后缀g改成ejs
app.use(views('views',{extension:'ejs'}));
// 如果这样配置不修改html后缀
// app.use(views('views',{map:{html:'ejs'}}));
// 公共数据，每个路由里面都要该数据
app.use(async (ctx,next)=>{
ctx.state = {
userName:'张三'
}
// 继续向下匹配路由
await next();
});
router.get('/',async (ctx)=>{
let title = '你好ejs';
let list = ['哈哈','嘻嘻','看看','问问'];
let content = "<h2>这是一个h2</h2>";
let num = 10;
await ctx.render('index',{
title,list,content,num
});
});
// 作用:启动路由
app.use(router.routes());
// 作用:这是官方文档的推荐用法,我们可以看到 router.allowedMethords() 用在 router.routes() 之后,
// 所有,在当所有的路由中间件最后使用.此时根据 ctx.status 设置 response 响应头
app.use(router.allowedMethods());
// 监听端口≈
app.listen(3000,function(){
console.log('启动成功');
});
3. 新建文件夹views并新建子文件index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>普通模版</h1>
<h2><%=title%> <%=userName%></h2>
<h1>ejs循环输出模版</h1>
<ul>
<%for(var i = 0;i<list.length;i++){%>
<li><%= list[i] %></li>
<%}%>
</ul>
<h2>原文输出标签</h2>
<%- content %>
<h2>条件判断</h2>
<% if(num > 20){ %>
大于20
<% }else{ %>
小于20
<% } %>
</body>
</html>
