当前位置：首页 > Web开发 > 正文

{ title }) }) 4、Ejs 引入模板 %- include header.ejs % 5、Ejs 绑定数据

2024-03-31 Web开发

Koa 中使用 ejs 模板的使用

1、安置 koa-views 和 ejs

1. 安置 koa-views npm install --save koa-views / cnpm install --save koa-views 2. 安置 ejs npm install ejs --save / cnpm install ejs --save

2、引入 koa-views 配置中间件

const views = require(‘koa-views‘); app.use(views(‘views‘, { map: {html: ‘ejs‘ }}));

3、Koa 中使用 ejs:

router.get(‘/add‘,async (ctx)=>{
let title = ‘hello koa2‘
await ctx.render(index‘,{ 　　title
　　})
})

4、Ejs 引入模板

<%- include header.ejs %>

5、Ejs 绑定数据

<%=h%>

6、Ejs 绑定 html 数据

<%-h%>

7、Ejs 模板判断语句

<% if(true){ %> <div>true</div> <%} else{ %> <div>false</div> <%} %>

8、Ejs 模板中循环数据

<%for(var i=0;i<list.length;i++) { %> <li><%=list[i] %></li> <%}%>

demo :

//引入 koa模块 /* ejs模板引擎的使用： 1.npm install koa-views --save 2.npm install ejs --save 3.var views = require(‘koa-views‘); app.use(views(__dirname, { extension: ‘ejs‘ })) //模板的后缀名是ejs 4 await ctx.render(‘index‘); 注意：我们需要在每一个路由的render里面都要衬着一个大众的数据大众的数据放在这个里面，，这样的话在模板的任何处所都可以使用 ctx.state = { //放在中间件 session: this.session, title: ‘app‘ }; * */ var Koa=require(‘koa‘), router = require(‘koa-router‘)(), views = require(‘koa-views‘); var app=new Koa(); //配置模板引擎中间件 --第三方中间件 //app.use(views(‘views‘, { map: {html: ‘ejs‘ }})); //这样配置也可以注意如果这样配置的话模板的后缀名是.html app.use(views(‘views‘,{ extension:‘ejs‘ /*应用ejs模板引擎*/ })) //写一其中间件配置大众的信息 app.use(async (ctx,next)=>{ ctx.state.userinfo=‘张三‘; await next();/*继续向下匹配路由*/ }) router.get(‘/‘,async (ctx)=>{ let title="你好ejs"; await ctx.render(‘index‘,{ title:title }); }) router.get(‘/news‘,async (ctx)=>{ //ctx.body=‘这是一个新闻‘; let list=[‘11111‘,‘22222‘,‘33333‘]; let content="<h2>这是一个h2</h2>"; let num=12; await ctx.render(‘news‘,{ list:list, content:content, num:num }) }) app.use(router.routes()); /*启动路由*/ app.use(router.allowedMethods()); app.listen(3000);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <% include public/header.ejs%> 这是一个ejs的模板引擎 <h2><%=title%>-----<%=userinfo%></h2> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <% include public/header.ejs%> <h2>ejs循环数据---<%=userinfo%></h2> <ul> <%for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <%}%> </ul> <h2>绑定html数据</h2> <br/> <%=content%> <br/> <%-content%> <br/> <br/> <h2>条件判断</h2> <br/> <%if(num>24){%> 大于24 <%}else{%> 小于24 <%}%> <br/> <br/> </body> </html>

koa ejs 模板引擎

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30837.html

{ title }) }) 4、Ejs 引入模板 %- include header.ejs % 5、Ejs 绑定数据

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢