首页 > 其他分享> 文章详细

七.nunjucks模板引擎

2022-05-16 19:00:37 阅读：222 来源： 互联网

标签：nunjucks views koa html 引擎模板

七.nunjucks模板引擎

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

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

1.安装nunjucks

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

koa-views：负责配置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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

七.nunjucks模板引擎