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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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字符编码转换之gb2312转为utf8
2013/10/28 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php实现微信发红包功能
2018/07/13 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
javascript折半查找详解
2015/01/26 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
医学生个人求职信范文
2013/09/24 职场文书
大学生就业自我鉴定
2013/10/26 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
优秀医生事迹材料
2014/02/12 职场文书
暑期研修感言
2014/02/17 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
水电维修专业推荐信
2014/09/06 职场文书
运动会稿件100字
2014/09/24 职场文书
结婚纪念日感言
2015/08/01 职场文书
七个Python必备的GUI库
2021/04/27 Python