Web前端必做笔记之一：Nunjucks模版入门

最新推荐文章于 2024-03-17 09:44:49 发布

我是小白菜鸟

最新推荐文章于 2024-03-17 09:44:49 发布

阅读量208

点赞数

文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/qq_42302014/article/details/121704750

版权

本文介绍了如何使用Nunjucks模版引擎提升Web前端开发效率。通过Koa创建服务器并结合koa-views，我们可以直接响应HTML页面并绑定后台数据。安装并配置nunjucks后，应用可以将模版存储在views目录，通过map属性指定模版引擎。这样，服务器就能发送结构化的HTML响应给客户端，简化了开发流程。

摘要由CSDN通过智能技术生成

Web前端必做笔记之一：Nunjucks模版入门

我们通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是么一个页面的内容都是通过字符串的方式发送给浏览器的，这样的开发方式并不友好，我们更希望发送HTML页面
模版引擎就可以解决这个问题，通过模版引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模版中，然后发送给客户端。
这里我们选择一个功能完善，容易上手的模版引擎：nunjucks
安装nunjucks
在koa框架下安装nunjucks需要两个第三方模块
koa-views:负责配置koa的模版引擎
命令行执行以下命令

npm  install --save koa-views
npm  install --save nunjucks

const Koa = require('koa'); 
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks'); 
const app = new Koa(); //创建应用

app.use(views(__dirname + "/views",{    //项目放在views目录里，使用的模版引擎是nunjucks
     map:{html:'nunjucks'}
}))   //views()  有两个参数，第一个参数是指定模版引擎是存放在那个目录，第二个参数是那个模版引擎


app.use(router.routes());
app.listen(3000, () => {
   console.log("server is running")
})