Koa中ejs模板的使用
要想在Koa中使用ejs模板渲染网页,还需要koa-views 配合才行,下面请看详细步骤。
安装koa-views
和 ejs
npm install --save koa-views
npm install ejs --save
引入 koa-views
配置中间件
//引入
const Koa = require('koa')
const path = require('path')
const views = require('koa-views')
const app = new Koa()
//配置需要渲染的文件路径及文件后缀
// app.use(views('views',{map:{html:'ejs'}})); // 模板后缀名是ejs,与下面写法不同,map和extension效果一样的,但是map写法,模板的后缀名是xxx.html,extension写法的后缀名是xxx.ejs
app.use(views(path.join(__dirname,'./view'),{
extension:'ejs'
}))
Koa中使用ejs
// 写一个中间件配置公共的信息,可以在全站模板内直接调用
app.use(async (ctx,next)=>{
ctx.state.userinfo = '较瘦';
await next(); //继续向下匹配路由
});
//render参数1:要渲染的ejs文件名,参2:需要传递的变量
app.use(async(ctx)=>{
let title = 'hello lval'
await ctx.render('index',{title})
})
Ejs 引入外部的ejs模板
<%-includeheader.ejs%>
ejs语法
输出:
在页面中输出变量值,你可以这么用:
<div><%= var01 %></div>
如果不希望变量值的内容被转义,那就这么用:
<div><%- var02 %></div>
模块的逻辑支持:
所有使用 <% %>
括起来的内容都会被编译成 Javascript,你可以在模版文件中像写 js 一样 Coding,也允许你声明变量,作用域就是当前模版,因为一个模版会被编译成一个 Javascript 函数。
<ul>
<% for(var i = 0; i < 10; i++) {%>
<li>item <%-i %></li>
<% } %>
<ul>
1. ejs 绑定数据
<%= title %>
2. ejs 绑定html数据
<%- htmlString %>
3. ejs 判断语句
<% if (num > 20){ %>
<div> true </div>
<% }else{ %>
<div> false </div>
<% } %>
4. ejs 循环数据
<% for(var i=0;i<list.length;i++){ %>
<li><%= list[i] %></li>
<% } %>
5. ejs 引入组件
<% include public/header.ejs %>