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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js canvas实现擦除动画
Jul 16 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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中$_POST与php://input的区别实例分析
2015/01/07 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python configparser模块常用方法解析
2020/05/22 Python
python中如何设置代码自动提示
2020/07/15 Python
重构Python代码的六个实例
2020/11/25 Python
工程管理造价应届生求职信
2013/11/13 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
本科毕业生自荐信
2014/06/02 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
怎么用Python识别手势数字
2021/06/07 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis