全栈开发实战：用Vue2+Koa1开发完整的前后端项目（更新Koa2） | MARKSZのBlog

[Molunerfinn]

https://molunerfinn.com/Vue+Koa/

全栈开发实战：用Vue2+Koa1开发完整的前后端项目（更新Koa2）

[Nebulazheng]

你好博主，你的这篇博客对我入门学习有很大帮助，但我在使用你的DEMO运行后进行登录报错504，我又按照你的思路重新初始化一个项目并按照你的流程，但在api test时 node app.js运行正常 访问接口却报not found 服务端监控显示404

[Molunerfinn]

404说明你的路由没配对

[BelleChou]

同在那一步出错

[Molunerfinn]

如果是新的demo代码，运行的时候注意看README啊...不是node app.js了是node server-entry.js：

[BelleChou]

应该是改成koa2的时候 controller里面没有写next

[Molunerfinn]

next只是用来控制中间件的，如果你的controller不需要执行下一个中间件是不需要写next的，直接返回ctx.body即可。

[BelleChou]

研究清楚了。我是边跟着blog边改koa2的。刚到api test那里。是自己语法写错了导致404了。小白新手。谢谢你回复我～

[ganyz505]

请问我用koa1版本的，api一直报500是为什么？post新增list时mysql中能插入新纪录但是get请求不到内容

[tscls168]

楼主您好，我也碰到访问接口出现404了，路由：router.get('/user/:id', user.getUserInfo); 控制器：const getUserInfo = async function (ctx) { const id = ctx.params.id console.log(id) const result = await user.getUserById(id) ctx.body = result }

[nimapier]

作为新手表示这篇文章非常有用，先膜为敬。 然后本人用的是koa2+vue-cli3搭建的项目，这里把我在其中遇到的问题记录一下： 首先是语法上的一些变化，类似const app = require('koa')()这样的写法需要写成： const Koa=require('koa')； const app=new Koa()； 其次是 const getUserInfo = function* (){ const id = this.params.id; const result = yield user.getUserById(id); this.body = result } 在koa2中需要写成带有ctx参数的形式，这些是博主在github上已经更新的内容。 vue脚手架3生成的项目中设置代理的方式是在根目录下新建vue.config.js文件，这样设置下来我的/auth接口是没问题的，但是/api的接口怎么也访问不到，用后端的端口访问get是没有问题的，使用8080就访问失败。 最后把两个项目合并以后上面的问题就不存在了，不过用代理的方法失败的原因还是没有找到，希望大佬解答。 还有一个小问题是使用sequelize-auto生成的list文件不含id的自增属性，导致创建待办事项时出现list.id不能为空的错误，手动加上就好了。

[Molunerfinn]

@nimapier 我还没试过用vue-cli3配合koa搭建过项目，vue端如果要配置proxy我还没试过。

不过理论上解决后端API 访问不了 这种类似的问题，基本上只需要查看两个地方，都能比较容易解决。

1. 查看所谓 访问不了 的api的状态码。到底是啥原因访问不了？先看状态码就能知道大部分信息。如果是4XX系列的状态码，尤其比如 404 ，那么就说明你访问的地址有问题，要么是你的路由没注册正确，要么是你的proxy没代理正确。这个时候错误发生在客户端，要检查客户端的问题。如果是 5XX 系列的状态码，那么说明服务端出问题导致无法响应了，那么这个时候就应该去看看Koa端是否出现诸如语法错误、函数报错等原因，此时错误发生在服务端，要检查服务端的问题。
2. 查看Koa端的日志。此处日志可以简单也可以复杂。你可以在任何你想要打断点的地方写上 console，如果你会调试Node，你也可以直接给Koa应用打断点，配合VSCode来检查到底是哪里出了问题。到底是请求根本就没发到后端呢，还是发到后端了路由不匹配呢，还是发到后端了但是你的后端报错了呢？在控制台你可以把错误信息、请求路由看得一清二楚。

本文的目的不是让大家仅仅写一个DEMO就可以了，还需要你们理解路由、控制器等等这些基本的后端概念，以及相应的HTTP状态码以及要从哪个方向解决问题。这些是基本的前端工程师的素养吧。每个人的应用写的都不太一样，所以我也无法很容易指出你的报错、你的无法访问具体是什么原因。具体的原因因人而异，但是HTTP状态码、Koa日志这些是不会骗人的，所以要学会自己排查问题。

[nimapier]

@Molunerfinn @nimapier 我还没试过用vue-cli3配合koa搭建过项目，vue端如果要配置proxy我还没试过。

不过理论上解决后端API 访问不了 这种类似的问题，基本上只需要查看两个地方，都能比较容易解决。

1. 查看所谓 访问不了 的api的状态码。到底是啥原因访问不了？先看状态码就能知道大部分信息。如果是4XX系列的状态码，尤其比如 404 ，那么就说明你访问的地址有问题，要么是你的路由没注册正确，要么是你的proxy没代理正确。这个时候错误发生在客户端，要检查客户端的问题。如果是 5XX 系列的状态码，那么说明服务端出问题导致无法响应了，那么这个时候就应该去看看Koa端是否出现诸如语法错误、函数报错等原因，此时错误发生在服务端，要检查服务端的问题。
2. 查看Koa端的日志。此处日志可以简单也可以复杂。你可以在任何你想要打断点的地方写上 console，如果你会调试Node，你也可以直接给Koa应用打断点，配合VSCode来检查到底是哪里出了问题。到底是请求根本就没发到后端呢，还是发到后端了路由不匹配呢，还是发到后端了但是你的后端报错了呢？在控制台你可以把错误信息、请求路由看得一清二楚。

本文的目的不是让大家仅仅写一个DEMO就可以了，还需要你们理解路由、控制器等等这些基本的后端概念，以及相应的HTTP状态码以及要从哪个方向解决问题。这些是基本的前端工程师的素养吧。每个人的应用写的都不太一样，所以我也无法很容易指出你的报错、你的无法访问具体是什么原因。具体的原因因人而异，但是HTTP状态码、Koa日志这些是不会骗人的，所以要学会自己排查问题。

好高效的回复！多谢你的建议！

[nimapier]

问题已解决，是代理设置错了，复制代码的时候把pathRewrite也加了上去......懒得加koa日志的恶果，学习了。

[tscls168]

你好，如果在model层需要进行多表查询应该怎么写？我按照网上添加associate，最后报错：include.model.getTableName is not a function

[valarxu]

谢谢。看过的最好的一篇，各个方面都讲得很清楚，终于把前端和后端串联起来了。

[xieweikang666]

博主你好，我在运行 node app.js后报错 👇不知道是啥意思.. const app = require('koa')() ^

TypeError: Class constructor Application cannot be invoked without 'new' at Object. (C:\Users\Administrator\Desktop\CodeLearn\guanlisystem\app.js:1:27) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

[Molunerfinn]

@xieweikang666 博主你好，我在运行 node app.js后报错 👇不知道是啥意思.. const app = require('koa')() ^

TypeError: Class constructor Application cannot be invoked without 'new' at Object. (C:\Users\Administrator\Desktop\CodeLearn\guanlisystem\app.js:1:27) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

const app = require('koa')() 是koa1的写法。现在默认安装的是koa2，那么就要按koa2的语法来：

const Koa = require('koa');
const app = new Koa();

// response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);

[xieweikang666]

嗯嗯 我看了其他人的评论修改了 谢谢拉~！

------------------ 原始邮件 ------------------ 发件人: "PiEgg"notifications@github.com; 发送时间: 2019年8月17日(星期六) 下午3:39 收件人: "Molunerfinn/Molunerfinn.github.io"Molunerfinn.github.io@noreply.github.com; 抄送: "蛇吞象"805936837@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [Molunerfinn/Molunerfinn.github.io] 全栈开发实战：用Vue2+Koa1开发完整的前后端项目（更新Koa2） | MARKSZのBlog (#98)

@xieweikang666 博主你好，我在运行 node app.js后报错 👇不知道是啥意思.. const app = require('koa')() ^

TypeError: Class constructor Application cannot be invoked without 'new' at Object. (C:\Users\Administrator\Desktop\CodeLearn\guanlisystem\app.js:1:27) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

const app = require('koa')() 是koa1的写法。现在默认安装的是koa2，那么就要按koa2的语法来： const Koa = require('koa'); const app = new Koa(); // response app.use(ctx => { ctx.body = 'Hello Koa'; }); app.listen(3000);

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[LibertyBlackLotus]

博主你好，博客写得条理很清晰，细节也很多，多谢分享。此项目有没有github上的源码，对照着学习可能效果更好

[Molunerfinn]

@LibertyBlackLotus 博主你好，博客写得条理很清晰，细节也很多，多谢分享。此项目有没有github上的源码，对照着学习可能效果更好

你好，文章的最后已经给出地址，请认真阅读。

[dydoit]

token这玩意好鸡肋啊，如果用户注销了账号，服务端还要维护一个token的黑名单，还不如session方便