俺咋能看懂公司前端项目?

?●●●

大家好，

我是一名刚步入社会的有志青年开发者。

在校学了三年的后端开发，没想到刚步入公司干起了前端工作，华丽的转变让我有点猝不及防，谁让我辣么优秀！

趁着头发茂密，让我们步入正题！

很有幸进入公司就参与了项目的开发，项目的前端是采用的Vue和Element框架，我刚拿到公司封装之后的Vue的脚手架翻了翻，瞬间感觉对不起老大，我不配当你小弟，请原谅我猜不透你的心思。何以解忧，唯有度娘。

熟悉了那么一个星期，让我最钦佩的是调用后端接口这块封装的代码，使用的时候仿佛像在写java调用类的静态方法一样，就像这样AppController.create，有人肯定会问你的参数是不是让狗吃了，兄台白慌，听哥说完，你不看完我咋提高阅读量，下面请不要随地吐痰。

作为前端开发，避免不了与后台接口打交道，经常要去接口文档或者访问swagger网址查看接口详情，就导致代码和查看接口之间来回切换。年轻手速快记性好的请随意。

接口联调的时候如何一眼就能知道该调哪个接口和传哪些参数很重要，有助于开发的效率。如果有一种将接口信息植入到前端项目里，调用的时候它还能提示你调哪个方法，参数还能一目了然的方式，那就美滋滋了。然而在这里，你赚大了。

框架的灵魂在于它的设计思想，在这里仅传授设计思想，不然就像我最近写论文一样半天憋不出俩字写个猴年马月。

唉

前面写的有点啰嗦了，

下面那就开始掉头发吧。

首先了解一下前端管理后台接口的架构流程，技术选型后端要使用swagger接口管理，前端vue使用vuex状态管理，解析swagger需要用到Handlebars模板编译和fs文件解析。

1、使用Swagger。

首先要想设计好这块，必须要求后台服务引入swagger插件，它就是一款让你更好的书写API文档的框架。如果你公司没有用它就lower了，我不是求针对，我就是针对你。

2、解析Swagger和生成actions。

后台服务启动后访问http://ip:port/v2/api-docs得到一个JSON字符串，首先将字符串解析成JSON对象，然后获取对象中tags数组和paths对象，tags里面包含每个类的名称和描述，paths里面包含接口的访问url、请求方式、接口描述、所属tags和参数描述。通过遍历tags从paths对象里面获取每个接口的详细信息，最后通过Handlebars编译成指定格式的js文件。每个类对应一个文件，文件内容是一个对象，里面包含一个actions对象，这个actions对象含有一个类里面的所有接口详细信息。说到这里，估计有的小伙伴已经眼神已经迷离了。总结一下，网上一大堆，不抄你赖谁，写好喝咖啡，王者带你飞。

3、vuex装饰actions。

我们都知道vuex里面action是支持异步操作的。这里我们对上述每个生成的acitons文件进行装饰，装饰的内容包括每个接口请求前、发送请求和请求之后对state数据的改变。装饰之后生成新的actions。最后交给store进行管理。这里的发送请求其实就是调用封装好之后的axios的方法。

4、组件使用vuex辅助函数。

vuex里面有四个辅助函数mapState()、mapGetters、mapMutations和mapActions，这里仅使用mapState和mapActions即可满足需求，其中mapState用来获取请求接口的loading情况，通过判断loading和v-loading结合可以提高用户体验。mapActions将保存在store的actions映射到组件当中，在组件中直接可以通过this来调用actions完成网络请求。

5、抽离封装组件。

我们不能在每次调用接口都使用辅助函数来一遍吧，所以需要抽离一个公共组件，在这个公共组件里可以封装一个统一的方法调用mapActions生成的函数，通过传递action函数名和参数来完成接口的调用，组件里面还可以封装一些对请求错误处理的公共方法。如果想要更简单的，可以封装一个全局的方法dispatch进行调用。

6、混入（mixins）使用。

Vue里面有一个很好的混入功能，混入组件拥有自己的生命周期，可以将一些公共的数据放在组件里。这里我们可以通过混入将之前抽离封装的组件。在需要接口调用时，直接可以this.xxx进行调用。

最后达到的效果：

在vue组件中使用this.dispatch(AppController.create,{...args})，返回值为接口调用的返回值。

关于vue接口管理的设计就到这里，下一篇我将讲述如何使用react或rn高效管理调用后端接口。

对于vuex和redux不熟的童鞋

赶紧去学

别在这听我胡扯。

关于作者：卜壮，普元前端开发工程师，负责Mobile 8.0项目管理平台前端部分。熟悉ReactNative，目前正在学习Vue，大前端技术探求者。

关于EAWorld：微服务，DevOps，数据治理，移动架构原创技术分享。