解决koa2 ctx.render is not a function报错问题


Posted in Javascript onAugust 07, 2018

最近在学习使用koa2,在尝试用koa2复写之前用express写的一个入口文件的时候发现命令行报错ctx.render is not a function

解决koa2 ctx.render is not a function报错问题 

项目路径如下

解决koa2 ctx.render is not a function报错问题 

app.js是之前用express写的入口文件

koa.js是用koa2复写的入口文件

view是前端页面文件夹,使用的模板引擎是pug

报错时koa.js代码如下

//使用koa复写入口文件
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const views = require('koa-views');
const serve = require('koa-static');

const app = new Koa();
const router = new Router();

app.use(serve(__dirname));
app.use(koaBody()).use(router.routes());
app.use(views(__dirname + '/views/pages',{
  extension: 'pug'
}))

app.listen(3000);

router.get('/', async(ctx, next) => {
  await ctx.render("index",{
    title:"nodeWeb 首页"
  })
});

其实这个bug很好解决,那就是把配置模板引擎的代码移动到所有与路由相关的代码之前,在这里就应该修改为

//使用koa复写入口文件
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const views = require('koa-views');
const serve = require('koa-static');

const app = new Koa();
const router = new Router();

app.use(serve(__dirname));
//配置模板引擎
app.use(views(__dirname + '/views/pages',{
  extension: 'pug'
}))
//使用koa-router
app.use(koaBody()).use(router.routes());

app.listen(3000);

//设置路由
router.get('/', async(ctx, next) => {
  await ctx.render("index",{
    title:"nodeWeb 首页"
  })
});

造成这个bug的原因是因为中间件的执行是有顺序的,路由在前,然后模板引擎在后的话,当执行到ctx.render的时候,模板引擎相关的中间件还未执行,render方法还未绑定到ctx上,所以就会报ctx.render is not a function

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

Javascript 相关文章推荐
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
You might like
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php实用代码片段整理
2016/11/12 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
python 基础教程之Map使用方法
2017/01/17 Python
python添加模块搜索路径方法
2017/09/11 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python中二分查找法的实现方法
2020/12/06 Python
Servlet面试题库
2015/07/18 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
理财投资建议书
2014/03/12 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
家庭困难证明
2014/10/12 职场文书
小学优秀班主任材料
2014/12/17 职场文书
Python WSGI 规范简介
2021/04/11 Python