解决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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
详解vue项目打包步骤
Mar 29 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 各种应用乱码问题的解决方法
2010/05/09 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
JavaScript解析JSON数据示例
2019/07/16 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
利用python实现命令行有道词典的方法示例
2017/01/31 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
pycharm实现猜数游戏
2020/12/07 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
《这儿真好》教学反思
2014/02/22 职场文书
初中生期末评语大全
2014/04/24 职场文书
安全生产演讲稿
2014/05/09 职场文书
2014年度思想工作总结
2014/11/27 职场文书
董事长岗位职责
2015/02/13 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
vue实现拖拽交换位置
2022/04/07 Vue.js