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

最新推荐文章于 2024-08-21 17:46:33 发布

学无止境QAQ

最新推荐文章于 2024-08-21 17:46:33 发布

阅读量1.7k

点赞数 1

分类专栏： vue前台管理项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46368050/article/details/124761336

版权

本文介绍了在Vue项目中如何进行接口统一管理，通过创建src/api/index.js文件集中管理API。当遇到跨域问题导致404错误时，解释了什么是跨域，并提供了通过代理在vue.config.js中解决跨域问题的方法，包括设置代理配置并重新运行项目以生效。

摘要由CSDN通过智能技术生成

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

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

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

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/getBaseCategoryList',  //因为在request.js