vue - axios - koa2从前端都后台走通

前端准备

• npm 安装 vue（我是用的脚手架，这还是方便的）
• vue -router 安装前端路由

前端路由是用在前端页面需要跳转，并且不需要想服务器请求数据。

• npm 安装 axios

axios 的作用是解决跨域请求资源问题，我们的项目是运行在本地的 8080 端口，而后台项目是运行在本地的 3000端口，所以你 vue 想要去拿到 koa 的数据， 你就肯定会跨域

在项目的入口文件 main.js 中引入

第二行是 vue 的配置，和 axios 没什么关系
第三行是配置 axios 的前缀，就是你每次请求都会给你加上这个前缀
第四行是全局配置 axios 为了方便使用，能够让你在其他的 vue 文件中能用到 axios

如这段代码，this.$router.push 就是前端路由跳转

this.$http.get(’/geta’)…这就是上边配置 axios 的作用了

this.$http 就是我们的 axios ，请求路径是 ‘/geta’，相当于你请求的路径是

http://localhot: 3000/geta

---

后台准备

• npm 安装 koa
• 在启动项目文件（不做特定，一般都是app.js）中，引入 koa ，初始化服务器。

这样就搭建一个简单服务器了，node app 就 ok了

ok 服务器搭建好了，要处理前端请求怎么办，不急

---

需要在后台安装两个插件

• 安装 koa-router

• 安装 koa-bodyparser

安装好之后 ，我们先引入

要注意 router 的引入是分两步引入的，当然还有另一种引入方式

ok 现在我们可以处理前端发过来的请求了

这样就处理了前端发过来的请求，并且给前端返回了一个数据。

这样我们返回前端去看

不对！！！！！！

没事小问题，我们需要在后端 app.js 中处理一下

在重新启动后台，再去前端查看

这样数据是不是就请求出来了呢，为什么打印出来是这个数据是这个。

因为前端发起的 get 请求之后，得到数据的处理是将得到的数据打印出来，

而我们在后台给出的数据就是一个字符串 ‘靳世’ , 所以打印结果就是那样了。

---

我们还要一个 bodyparser 没用， 它是用来出来 post 请求的，处理 post 所

带的请求参数，请求体。方法和 get 类似，只是在前端发送post 请求的时候

需要带参数，比如这样：

this.$http.post('/login',{
username:'jin shi',
password: '123456'
}).

那在后台接收的时候

router.post('/login',async(ctx)=>{
	console.log(ctx.request.body)
	//控制台打印出 post 的请求体
})

这样后台就得到了 post 提交的数据了

---

至于后台的数据从哪儿来，去哪儿呢。当然是数据库了，后台 koa 去链数
据库存取数据，这样一个完整的前端、后台、数据库项目就ok了

easy 否？