koa框架使用模板引擎

模板引擎（这里特指用于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 %}
     	 //条件１
   {% 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

生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油奥利给！

yunchong_zhao

发布了236 篇原创文章 · 获赞 80 · 访问量 2万+

私信关注

koa框架 使用 模板引擎

猜你喜欢

koa框架使用模板引擎