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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
javascript 闭包
Sep 15 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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按百分比生成缩略图的代码分享
2014/05/10 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python实现的登录与提交表单数据功能示例
2019/09/25 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python定时器线程池原理详解
2020/02/26 Python
python生成大写32位uuid代码
2020/03/03 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
学期评语大全
2014/04/30 职场文书
公共场所标语
2014/06/30 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
课外小组活动总结
2014/08/27 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
法定代表人授权委托书
2014/09/19 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年教研工作总结
2014/12/06 职场文书