解决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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
JS实现self的resend
2010/07/22 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python win32 简单操作方法
2017/05/25 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python dataframe NaN处理方式
2019/12/26 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
网吧消防安全制度
2014/01/28 职场文书
世界环境日活动总结
2015/02/11 职场文书
月考总结与反思
2015/10/22 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
javascript canvas实现雨滴效果
2021/06/09 Javascript