Koa的ejs模块

Ejs可以将node.js的后台数据渲染到静态页面上。

安装ejs模块>npm install ejs –save 安装npm install koa-views --save引入koa-views模块配置中间件

成功
实验
const views=require(‘koa-views’);
const Koa=require(‘koa’);//引入模块
const Router=require(‘koa-router’);
var app = new Koa();
var router = new Router();//实例化
//配置模板引擎中间件

app.use(views(‘views’,{extension:‘ejs’}))

router.get("/",async (ctx)=>{
await ctx.render(‘test’);
})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000)
在views文件夹下写一个test.ejs
访问端口

开始说ejs可以将后台数据渲染到前台那么怎么渲染？
app.use(views(‘views’,{extension:‘ejs’}))
/app.use(views(‘views’,{map:{html:‘ejs’}}));///后缀名必须是Html

router.get("/",async (ctx)=>{
var data1=‘hello world’;//定义准备向静态界面加入的数据
await ctx.render(‘test’,{data:data1});//将data1的数据赋给data传到test.ejs中
})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000)

在test.ejs中用<%=data%>拿到data进行展示访问3000端口展示如下

在后台定义一个数组将数组传到后台并遍历它
router.get("/",async (ctx)=>{
// var data1=‘hello world’;
var arr=[“a”,“b”,“c”];
await ctx.render(‘test’,{arrs:arr});
})

<% for(var i=0;i<arrs.length;i++) {%>
<%=arrs[i]%>
<%}%>
前台拿到数组然后遍历数组输出，访问3000端口看看结果

Abc输出来了
一般写代码的时候我们常常会把公有的东西抽取出来，需要的时候调用它就行了而不必每一次都去写它。在ejs中可以引入其他的ejs。定义一个header.ejs。

通过<%include header.ejs%> 引入它
然后重新运行

头部的信息就出现在test.ejs中了。
如果后台传到前台的数据是带标签的前台如果想解析要通过<%-%>获取
router.get("/",async (ctx)=>{
// var data1=‘hello world’;
var arr=[“a”,“b”,“c”];
var i=“

这是一个块

”
await ctx.render(‘test’,{k:i});
})
定义一个块传到test.ejs中

前端拿到数据并解析。访问3000端口

如果使用<%=%>拿到数据不会进行解析

前台会原封不动的接收后台的数据
在测试一下 设置个num随机产生
router.get("/",async (ctx)=>{
// var data1=‘hello world’;
var arr=[“a”,“b”,“c”];
var num=Math.random()*100
var i=“

这是一个块

”
await ctx.render(‘test’,{k:i,num:num});
})
<%if(num>50){%>
helloworld
<%}else {%>
Hi
<%}%>
前台对Num进行判断
访问端口看输出

如果一个数据在每一个路由里面都要去渲染我们可以使用
ctx.state={ //放在中间件中
data:data
data1:data1
}
定义一个中间件
app.use(async (ctx,next)=>{
ctx.state.user=‘superman’;
await next();
})
router.get("/",async (ctx)=>{
// var data1=‘hello world’;
var arr=[“a”,“b”,“c”];
var num=Math.random()*100
var i=“

这是一个块

”
await ctx.render(‘test’,{k:i,num:num});
})
router.get("/123",async (ctx)=>{
// var data1=‘hello world’;
var arr=[“a”,“b”,“c”];
var num=Math.random()*100
var i=“

这是一个块

”
await ctx.render(‘test1’,{k:i,num:num});
})
2个路由 第二个路由在test1.ejs里面只接收刚才定义的全局变量user

访问这2个路由

Superman在里面没问题

也接收到了。
以上就是关于koa2ejs的测试 有问题请指出以便及时改正。