koa2使用ejs和nunjucks作为模板引擎的使用


Posted in Javascript onNovember 27, 2018

一、使用 ejs 作为模板引擎

koa2 如果使用 ejs、jade 这种作为模板引擎的话,直接使用 koa-views 进行模板加载即可。

比如使用 ejs :

安装:

yarn add koa-views ejs

使用:

在使用 render 的时候,需要进行异步文件模板读取,因此 ctx.render 需要使用 await

const app= require('koa')();
const koaViews= require('koa-views');
const path = require('path');

app.use(koaViews(path.join(__dirname, './view'), {
 extension: 'ejs'
}));

app.use( async ( ctx ) => {
 const title = "postbird";
 await ctx.render('index', {
 title
 });
});

app.listen(3000)

二、使用 nunjucks 作为模板引擎

我实在是讨厌 ejs 的模板引擎语法,觉得太弱也太麻烦,而且新版本中,去除了模板继承,很不方便。

我比较喜欢 nunjucks ,另外我发现了一个 aui-template 的模板引擎,语法使用起来很舒服,速度也很快,可以体验一下。

aui-template 文档地址:

http://aui.github.io/art-template/zh-cn/docs/

1、安装 koa-nunjucks-2

使用 nunjucks 作为模板引擎,不需要安装 koa-views。

并且可以借助别人封装好的中间件 koa-nunjucks-2 来实现,koa-nunjucks 这个名字已经被使用,但是作为很烂,也没维护。

有时间我会看看他的源码,怎么加载的 nunjucks

yarn add koa-nunjucks-2

2、使用 nunjucks

const koaNunjucks = require('koa-nunjucks-2');

app.use(koaNunjucks({
 ext: 'njk',
 path: path.join(__dirname, './views'),
 nunjucksConfig: {
 trimBlocks: true
 }
}));

3、渲染模板

同样,异步文件读取,需要使用 await 。

router.get('view', async (ctx) => {
 var food = {
 'ketchup': '5 tbsp',
 'mustard': '1 tbsp',
 'pickle': '0 tbsp'
 };
 await ctx.render('index',{title:'nunjucks',food});
});

4、模板语法

更多的语法可以看文档:

https://mozilla.github.io/nunjucks/cn/templating.html#for

<body>
 <h1>{{title}}</h1>
 <p>循环:</p>
 <ul>
 {% for key,value in food %}
  <li>{{key}} - {{value}}</li>
 {%endfor%}
 </ul>
</body>

三、效果

koa2使用ejs和nunjucks作为模板引擎的使用

四、问题

在使用 koa-nunjucks-2 的时候,发现一个问题:

app.use(nunjucks({})) 必须放在 app.use(router.routes()).use(router.allowedMethods()) 前面才能起作用,否则会报错 ctx.render() 不是一个 function。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 #Javascript
You might like
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
医院工作检讨书范文
2014/02/10 职场文书
工地宣传标语
2014/06/18 职场文书
小学入学感言
2015/08/01 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
使用python绘制横竖条形图
2022/04/21 Python