解决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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
使用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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
扩展String功能方法
2006/09/22 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JSONP之我见
2015/03/24 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python批量图片处理简单示例
2019/08/06 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
求职信格式范本
2013/11/15 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
银行员工辞职信范文
2014/01/20 职场文书
中青班党性分析材料
2014/02/16 职场文书
学期评语大全
2014/04/30 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android