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

最近在学习使用koa2，在尝试用koa2复写之前用express写的一个入口文件的时候发现命令行报错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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解基于Koa2开发微信二维码扫码支付相关流程

    前段时间在开发一个功能,要求是通过微信二维码进行扫码支付.这个情景我们屡见不鲜了,各种电子商城.线下的自动贩卖机等等都会有这个功能.平时只是使用者,如今变为开发者,也是有不小的坑.所以特此写一篇博客记录一下. 注: 要开发微信二维码支付,你必须要有相应的商户号的权限,否则你是无法开发的.若无相应权限,本文不推荐阅读. 两种模式 打开微信支付的文档,我们可以看到两种支付模式:模式一和模式二.这二者的流程图微信的文档里都给出了(不过说实话画得真的有点丑). 文档里指出了二者的区别: 模式一开发前,商

  • 使用webpack打包koa2 框架app

    以前在用koa写server的时候,发布简直是噩梦.需要将src里面的全部文件都覆盖掉,config配置文件也要覆盖,稍有不慎就会线上报各种各样的问题,然后就得回退,本地调好在发布.偶然看见一篇文章讲 如何使用webpack打包koa app ,惊为天人,原来webpack也能打包后台.这在以前想都没想过. 关键问题 一:所有node_modules里的模块都不进行打包 webpack的核心功能是将引用的各个模块打到一个文件里,并会将各种规范的模块进行统一的模块化处理(webpack规范). 然

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

  • 理解Koa2中的async&await的用法

    Koa是一款非常著名的Node服务端框架,有1.x版本和2.x版本.前者使用了generator来进行异步操作,后者则用了最新的async/await方案 一开始使用这种写法的时候,我遇到一个问题,代码如下: const Koa = require('koa'); const app = new Koa(); const doSomething = time => { return new Promise(resolve => { setTimeout(() => { resolve('

  • 浅谈Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置. 本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会). CORS将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额外请求头部的get和post请求,并且如果是post请求,请求格式不能是application/json(因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见).而其余的,put.post请求,Content-Type为appl

  • Koa2 之文件上传下载的示例代码

    前言 上传下载在 web 应用中还是比较常见的,无论是图片还是其他文件等.在 Koa 中,有很多中间件可以帮助我们快速的实现功能. 文件上传 在前端中上传文件,我们都是通过表单来上传,而上传的文件,在服务器端并不能像普通参数一样通过 ctx.request.body 获取.我们可以用 koa-body 中间件来处理文件上传,它可以将请求体拼到 ctx.request 中. // app.js const koa = require('koa'); const app = new koa(); c

  • nodejs中Express与Koa2对比分析

    知会上看到有个问题 <Express会被Koa2取代吗?> .刚好对Express.koa有点小研究,于是简单回答了一下. 1.先说结论 目前没有看到Express会被koa2取代的迹象. 目前来说,Express的生态更成熟,入门门槛相对较低.从npm上的下载热度来说,两者的差距还较大,Express的月下载量约为koa2的40倍. 不过koa2的亮点足够吸引人,生态也开始变得完善. 2.从使用门槛来说 从使用上来说,Express对初学者更有好些,对着官网修修改改改就能做点东西出来. ko

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • node+koa2+mysql+bootstrap搭建一个前端论坛

    node+koa2+mysql+bootstrap搭建一个前端论坛

    前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人信息维护.头像等基本信息 发表文章,富文本编辑器采用wangEditor插件,编辑.删除文章,文章分类等 文章评论.文章收藏.点赞等 支持文章分页.评论分页加载 关注取关用户 资源(文件)上传分享.下载.查看 学习资源推荐..... 作者个人日记 but....由于种种原因,目前仅实现了部分功能,资

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

    最近在学习使用koa2,在尝试用koa2复写之前用express写的一个入口文件的时候发现命令行报错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'); c

  • React Hook 'useEffect' is called in function报错解决

    目录 总览 声明组件 声明自定义钩子 总结 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use作为函数名的前缀.比如说,useCounter使其成为一个组件或一个自定义钩子. 这里有个示例用来展示错误是如何发生的. // App.j

  • 解决spring mvc 返回json数据到ajax报错parseerror问题

    最近使用ajax接收spring mvc传过来的json数据时总是出现parseerror的错误,错误源码如下: 前端: $.ajax({ type: 'POST', url: "groupFunctionEdit", dataType: 'json', contentType: "application/json", data: JSON.stringify(functiondata), success: function(data){ alert('数据加载成功

  • laravel解决迁移文件一次删除创建字段报错的问题

    需求:通过写迁移文件更新user表中 topic 字段类型,从原来的varchar到json. 因为无法直接修改成json数据类型,只能采用先删除在创建的方式. 迁移文件代码如下: <?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateUserTable extends Migration{ /** * 运行迁移 * * @return v

  • 解决python3中自定义wsgi函数,make_server函数报错的问题

    #coding:utf-8 from wsgiref.simple_server import make_server def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) return '<h1>Hello, web!</h1>' if __name__ == '__main__': httpd = make_server('localho

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • 解决大于5.7版本mysql的分组报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated

    原因: MySQL 5.7.5和up实现了对功能依赖的检测.如果启用了only_full_group_by SQL模式(在默认情况下是这样),那么MySQL就会拒绝选择列表.条件或顺序列表引用的查询,这些查询将引用组中未命名的非聚合列,而不是在功能上依赖于它们.(在5.7.5之前,MySQL没有检测到功能依赖项,only_full_group_by在默认情况下是不启用的.关于前5.7.5行为的描述,请参阅MySQL 5.6参考手册.) 执行以下个命令,可以查看 sql_mode 的内容: mys

  • 解决pandas read_csv 读取中文列标题文件报错的问题

    从windows操作系统本地读取csv文件报错 data = pd.read_csv(path) Traceback (most recent call last): File "C:/Users/arron/PycharmProjects/ML/ML/test.py", line 45, in <module> data = pd.read_csv(path) File "C:\Users\arron\AppData\Local\Continuum\Anacon

  • 解决PyCharm同目录下导入模块会报错的问题

    在PyCharm2017中同目录下import其他模块,会出现No model named ...的报错,但实际可以运行 这是因为PyCharm不会将当前文件目录自动加入source_path. 在当前目录右键make_directory as-->Sources Root python导入模块 同一目录下在a.py中导入b.py import b 或者 from b import 方法/函数 不同目录下在a.py中导入b.py import sys sys.path.append('b模块的绝

  • 解决php用mysql方式连接数据库出现Deprecated报错问题

    以上是用php5.5 连接mysql数据库时报的错. 于是我用php5.4 连接正常没有报错. 这与mysql版本无关系,php 5.x版本,如5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5,但是程序出现如下错误:Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in,看意思就很

随机推荐