axios的封装、代理商转发、数据mock
引入下axios,而后对axios做下基本的封装。而后就是mock数据的方式说一下,以及在项目中使用的mock方式。
1、axios封装
axios
是什么就不说了吧,你应该以及很熟了,就直接安装吧。
$ npm install axios --save
而后我们简单的在
src/utils/request.js
中简单的进行了一下axios封装。对于环境的不同判断,比方开发环境、灰度环境、线上环境等等在
@vue/cli3.x
中通过新建一个.env.[xxx]
的文件来维护–>环境变量和模式
2、数据mock
数据mock我们使用yapi这个接口平台来管理,这样的话既可以很好的维护一封api文档,又可以进行数据的mock,这是我们这个项目的的接口文档:vue-mall
你也可以使用
mockjs
、esaymock
之类的,其实都差不多,yapi还是很好用的,少量基础的用法文档都有讲,在项目中我用高级mock的比较多,反正都是写js也可以用mockjs
的语法,还是挺方便的。
2、代理商转发
- 其实代理商转发就是配置下webpack的
devServer
,详见webpack从0到1-devServer初探。 - 而在
vue-cli3.x
的脚手架生成了项目中,由于隐藏了webpack的配置文件,所以新建一个vue.config.js,而后在所提供的config配置文件修改下就行,原理还是一样的。
const mockUrl = 'http://yapi.demo.qunar.com/mock/17982'module.exports = { // ... devServer: { port: 8080, open: true, overlay: { warnings: false, errors: true }, proxy: { '/dev-api': { target: mockUrl, pathRewrite: { '^/dev-api': '' }, secure: false, changeOrigin: true } } }, // ...}
3、小结
- 总而言之,
vue
的脚手架更新了以后,开发配置一个项目还是变得更简单了。 - 欢迎大家围观项目中的少量实际的用法。
- 对于老版本的脚手架配置方式:https://www.songma.com/p/896f8127fe60
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » axios的封装、代理商转发、数据mock
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » axios的封装、代理商转发、数据mock