Vue项目中常见问题(8)接口统一管理及解决服务器跨域问题

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

1.在src下的api中新建一个index.js文件,对API进行统一管理 

2.我们在src/index.js中对API进行统一管理

3.在main.js入口文件中测试一下

4.在控制台Network中查看

5.分析:为什么404?

6.到底什么是跨域呢?

7.那么怎么去解决跨域问题呢?

 7.1我们用代理的方法来解决一下跨域问题

 7.2在vue.config.js中照着webpack.config.js的内容复制粘贴过来,再改改

 7.3因为是vue.config.js是配置文件,修改后需要重新运行,才能生效

8.再次进入控制台Network中查看

---

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

接口统一管理

项目很小:(比如只有两三个组件,接口也只有一两个的情况)

完全可以在组件的生命周期函数中发请求  

比如在函数的mounted、created中发请求,获取到服务器的数据,存储在data当中,就可以展示出来,axios.get('xxx')这种

项目大:(比如组件有好几百个,接口有好几十个的情况)

如果我们还是按照上面的axios.get('xxx'),假如有100个组件都用了这种方法,那万一有一天接口地址发生了改变,那这100个组件你要挨个找到一个一个修改,这样是很麻烦的

所以就有了接口统一管理,找的话也好找

 

1.在src下的api中新建一个index.js文件,对API进行统一管理 

2.我们在src/index.js中对API进行统一管理

//当前这个模块:API进行统一管理

//你要发请求,需要用到我们封装的axios
//引入我们封装的aixos
import requests from './request'

//三级联动的接口
///请求地址: api/product/getBaseCategoryList   get  无参数

export const reqCategoryList = ()=>requests({  //对外暴露
  url:'/product/getBaseCateg