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脚本 Node.js 使用入门
Mar 07 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
js实现登录验证码
Dec 22 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 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
mysql建立外键
2006/11/25 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
mongodb和php的用法详解
2019/03/25 PHP
鼠标图片振动代码
2006/07/06 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中property函数用法实例分析
2018/06/04 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
通信工程求职信
2014/07/16 职场文书
学习作风建设心得体会
2014/10/22 职场文书
教师工作总结范文2014
2014/11/10 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
辩论会主持词
2015/07/03 职场文书