前言
接触Vue已经有几年了,每次新建项目都有一些新奇的想法,之前分享过一篇Vue中使用Axios拦截器(拦截请求与相应),由于我最近的项目需要长期维护,所以不能再向小项目那种方式创建前端架构了,需求需要方便维护、高扩展性,但不是说我最初的那种方式不好,只是不适合中大型项目而已。所以今天我分享一下我在中大型项目中封装Axios和Helper的方法。每个人的需求不同,抱着学习的态度,大家一起分享经验。所以废话不多说,直接上干货。
项目目录
首先是我的项目架构,由于我的项目分的比较细,我只展示部分和本文章相关的模块。
Api后端接口
为什么要把接口单独抽离出模块呢?是因为在中大型项目中后端可能使用saas平台架构,拆分出不同模块,为了方便维护,快速查找定位接口,我们就需要将单文件进行解耦,抽离相同模块方便维护。当然如果后端没有用saas平台架构或接口较少的话,可以不使用这种方式直接写到index.js中这些都是根据个人需求去改变的无需纠结。
// User.js
公共Helper
同理,helper也可以抽离出不同的方法,方便维护。
由于有些代码比较长我这里只分享一部分模块。
到此我的common公共文件就完成了,其实中心思想还是将之前的单文件抽离出不同的模块,这样方便后面扩展。接下来是网络请求的封装。这里可能比较绕,不过仔细看过后还是能理解的。
sevice 网络请求封装(axios封装)
service网络请求封装结束,这里主要的是api.js的封装比较绕,其实就是动态创建后端接口的方法,万变不离其宗,都是换汤不换药的写法
utils工具类
最后的工具类其实就是将我们所有的方法绑定到vue的prototype原型上,以此形成完整的闭环 如果不了解vue绑定插件的机制的话,可以去vue.js官网自行查找,其实没多难。
工具类的绑定结束,致辞我们就差最后一步就完成我们的闭环了,那就是引入到main.js中
main.js webpack入口文件
使用方法
大功告成,这就是目前我项目中网络请求与helper公共方法的封装。希望对大家有所帮助,同时也虚心接受大家的各种建议和意见。希望大家在评论区进行评论。我会持续对我所掌握的知识进行分享。不忘初心坚持开源开放的学习态度。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!