其他分享
首页 > 其他分享> > 七.nunjucks模板引擎

七.nunjucks模板引擎

作者：互联网

七.nunjucks模板引擎

根据用户请求路径的不同响应不同的页面，直接发送html页面

模板引擎可以解决这个问题，通过模板引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模板中，然后发送给客户端。

 

1.安装nunjucks

在koa框架下安装nunjucks需要两个第三方模块

执行命令安装这两个模块

 cnpm install --save koa-views
 cnpm install --save nunjucks

2.创建文件夹，views方法定义路径，和文件index.html

 创建一个views文件夹，新建一个index.html文件

 

3.koa-views方法

 1.app.use(views(__dirname+'/views',{map:{html:'nunjucks'}}))
 2.使用views方法来定义 模板引擎的路径和使用哪一个模板引擎

4.render方法

 app.use(async ctx=>{
     ctx.render('index',{title:"这是从后台传过去的数据"})
 })
 render的方法定义的是  文件名（无后缀）和传过去的参数

 

 const koa=require('koa')
 const app=new koa()
 ​
 const nunjucks=require('nunjucks')
 const views=require('koa-views')
 ​
 //用nunjucks引擎渲染html文件
 //views（第一个参数是模板引擎所在的路径，，第二个参数是设置引擎渲染的文件）
 app.use(views(__dirname+'/views',{map:{html:'nunjucks'}
 }))
 app.use(async ctx=>{
     await ctx.render("index",{title:'我的主页home page---'})
     //render(第一个参数的文档的名字（无后缀）,第二个参数可以给模板传递参数)
 })
 ​
 app.listen(3000,()=>{
     console.log('server is running!')
 })
 -------------------
     node nunjucks.js
 -------------------
     访问页面 http://127.0.0.1:3000/
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>nunjucks模板引擎</title>
 </head>
 <body>
 ​
 <div class="head"> {{title}}后台传过来的参数</div>
 ​
 </body>
 </html>
 

标签：nunjucks,views,koa,html,引擎,模板
来源： https://www.cnblogs.com/luvianjiajiali/p/16278093.html