模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
上面是比较官网的解释,其实吧 看完之后可能似乎懂了点
还是从实际例子 理解的会快点
模板引擎 使用上很方便 上手也很快
koa是基于node.js的 后端服务器开发框架 能用的模板引擎 有很多
这里我们来介绍 俩种 koa-swig 和koa-ejs
1.koa-swig
第一步安装
npm install koa-swig -S
npm install co -S // 这里我们安装了一个co 的异步流程控制模块
// co模块使用Promise,基于Node.js和浏览器的基于生成器的控制流优势,可让您以一种不错的方式编写非阻塞代码
// co 模块可以将异步解放成同步。co 函数接受一个 generator 函数作为参数,在函数内部自动执行 yield 。
2.配置模板引擎
const render=koaSwig({
root:__dirname+'/views', //模板的存放目录
autoescape:true, //设置自动 escape 编码 相当于 vue中的v-html 和 v-text
cache:false, // 缓存关闭 线上版本一般是开启的
ext:'.html' // 设置模板后缀
})
app.context.render=co.wrap(render);// 在app context对象 中注册
3.在路由中使用
router.get('/',async (ctx,next)=>{
let data="hello koa";
ctx.body=await ctx.render('index.html',{data})
})
4.前台页面中使用
<h1>{{data}}</h1> // 渲染后台回来的数据
// 这里扩展一下 如果是 for循环和 if语句的话
{% for item in data %}
{% if condtion %}
//条件1
{% else %}
// 条件2
{% endif %}
{% endfor %}
当然模板引擎 不只有 koa-swig这个 还有ejs 但使用方式还是很类似的
1.安装 koa-ejs
npm i koa-ejs --save
- 引入ejs
const render = require('koa-ejs');
const path = require('path');
// 初始化ejs,设置后缀为html,文件目录为`views`
render(app, {
root: path.join(__dirname, 'views'),
layout: false,
viewExt: 'html',
cache: false,
debug: false
});
- 通过浏览器访问,返回ejs模板
// 渲染首页
router.get('/',async (ctx,next)=>{
await ctx.render('index',{
title: '我是首页',
body: '我是内容啊'
});
})
关于ejs的更详细的使用还是看他的官网 很简单 就从上看到下 就可以 一页的内容就描述完了
//附上他的官网
https://ejs.bootcss.com/#docs
生活那么苦,为啥不给自己一颗糖吃呢!坚持下去!你会看到不一样的风景!加油 奥利给!