vue3专栏项目 -- 四、前后端结合（上）

一、前后端分离是什么

前面我们一直在和静态数据打交道，虽然流程可以跑个半通，但是静态数据还是给我们造成了诸多不便，现在我们是时候用上后端了。

现在的应用开发模式，自从SPA出现以后，前端和后端可以平行的进行对应的工作，然后再进行接口的联调和整合，这种开发方式就是前后端分离开发。

二、什么是RESTful API

HTTP动词：

· GET（select）：从服务器取出资源（一项或多项）

· POST （create）：在服务器新建一个资源

· PUT （update）：在服务器更新资源

· PATCH （update）：在服务器更新资源

· DELETE（delete）：从服务器删除资源

三、接口文档

1、接口文档需要包括的点

· endpoints：具体路径

· 使用什么样的method?

· 发送请求的具体参数

· 请求返回的数据格式

2、swagger 的出现

文档规范，我们这个项目看 api.vikingship.xyz 就可以看到这个专栏项目的swagger

有了这个swagger文档，我们就可以很方便的在界面中了解和把玩现在所有的API了，它给前后端工程师都带来了很多的便利

接下来我们把这些写好的后端API在项目中使用，在应用中展示这些数据

四、axios的基本用法

安装axios：npm install axios --save

安装完毕之后我们就可以使用了，如下尝试，注意后端接口API：apis.imooc.com/api/并且添加上icode这个参数，如下已成功返回数据，说明我们的接口已经跑通啦

前面 http://apis.imooc.com/api 可以避免重复，如下，axios给我们提供了axios.default.baseUrl

后面这个icode我们也可以如下，axios提供了Interceptors，称为拦截器，我们来看看怎么用

那会不会影响我们其他参数的添加呢，如下，发现不会影响

上面是测试，最终我们main.ts中如下

五、使用vuex action 发送异步请求

之前我们专栏列表逻辑是从testData中读数据然后展示在界面上，testData是我们自己造的一些数据。现在有了后端接口，我们就多了一步发送请求，获取数据，最后展示页面的过程。

我们需要添加新的mutation，触发数据变化，但是文档中写了mutation有一个特殊的规则，就是mutation必须是同步函数，而axios请求是异步请求，vuex提出了一个新的概念来替换这个名字即Action，Action类似于mutation，不同点在于，Action可以提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作

如下，vuex中引入axios，然后添加actions，在actions中定义一个函数，函数中axios请求专栏列表数据，请求回来后通过commit调用mutations，然后在mutations中定义一个函数，在函数中把获取回来的专栏列表数据赋值给store中的专栏列表数据属性中

然后我们在页面中调用这个actions即可，如下，在组件挂载的时候调用，通过dispatch调用action，即如下atore.dispatch(‘actions中的函数’)

如下，发现可以获取到数据了，但是图片出现了问题

是因为返回的数据中头像图片avator是对象，所以要修改类型啥的。

因为返回的数据结构和我们之前定的有出入，所以我们需要进行修改一下，如下

主要就是看接口文档中这些返回数据的类型是什么样，进行对应调整即可