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中
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135823476.png)
前端拿到数据并解析。访问3000端口
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135828718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3MTAzNjU0,size_16,color_FFFFFF,t_70)
如果使用<%=%>拿到数据不会进行解析
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135839764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3MTAzNjU0,size_16,color_FFFFFF,t_70)
前台会原封不动的接收后台的数据
在测试一下 设置个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进行判断
访问端口看输出
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135850350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3MTAzNjU0,size_16,color_FFFFFF,t_70)
如果一个数据在每一个路由里面都要去渲染我们可以使用
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
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135859186.png)
访问这2个路由
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135904259.png)
Superman在里面没问题
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418135909878.png)
也接收到了。
以上就是关于koa2ejs的测试 有问题请指出以便及时改正。