我们在src/mock/user/role/index.js中简单模拟一个获取所有角色的接口getAllRoles
import mock from "@/mock"; export const getAllRoles = () => mock.get('/static/mock/user/role/getAllRoles.json')可以看到，我们是在mock接口中获取了static/mock目录下的json数据。因此我们需要根据接口文档或者约定好的数据结构准备好getAllRoles.json数据
{ "success": true, "result": { "pageNo": 1, "pageSize": 10, "total": 2, "list": [ { "id": 1, "createTime": "2019-11-19 12:53:05", "updateTime": "2019-12-03 09:53:41", "name": "管理员", "code": "管理员", "description": "一个拥有部分权限的管理员角色", "sort": 1, "menuIds": "789,2,55,983,54", "menuNames": "数据字典, 后台, 账户信息, 修改密码, 账户中心" }, { "id": 2, "createTime": "2019-11-27 17:18:54", "updateTime": "2019-12-01 19:14:30", "name": "前台测试", "code": "前台测试", "description": "一个拥有部分权限的前台测试角色", "sort": 2, "menuIds": "15,4,1", "menuNames": "油耗统计, 车联网, 物联网监管系统" } ] }, "message": "请求成功", "code": 0 }我们来看看mock是怎么做的
先看下真实接口的调用方式
import { getAllRoles } from "@/api/user/role"; created() { this.getAllRolesData() }, methods: { async getAllRolesData() { const res = await getAllRoles() console.log(res) } }那么mock时怎么做呢？非常简单，只要将mock中提供的方法替代掉api提供的方法即可。
// import { getAllRoles } from "@/api/user/role"; import { getAllRoles } from "@/mock/user/role";可以看到，这种mock方式与调用真实接口的契合度还是挺高的，正式调试接口时，只需将注释的代码调整即可，过渡非常平滑！
注意，在生产环境下，为了防止打包时将static/mock目录下的内容copy到dist目录下，我们需要配置下CopyWebpackPlugin，以vue-cli@2为例，我们修改webpack.base.conf.js即可。
const devMode = process.env.NODE_ENV === 'development'; new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: devMode ? config.dev.assetsSubDirectory : config.build.assetsSubDirectory, ignore: devMode ? '' : 'mock/**/*' } ]) 蒸汽时代，真香下一步的设想，使用类型安全的typescript，让前端API层真正做到面向接口文档编程，规范入参，出参，可选参数，等等，提高可维护性，在编码阶段就大大降低出错几率。虽然还在重构阶段，但是我想说，重拾typescript是真香，突然怀念使用Angular的那两年了，期待vue3.0能将typescript结合得更加完美......
电气时代，更多畅想未来还有无限可能，面对日渐复杂和多样化的业务场景，我们会提炼出更好的架构和设计模式。目前有一个不成熟的设想，是否能在接口设计上做到更规范化，后端输出接口文档的同时，提炼出API json之类的数据结构？前端拿到API json，通过nodejs文件编程的能力，自动化生成前端接口层代码，解放双手。
结语当然，以上只是我的一点点经验和设想，是在我能力范围内能想到的东西，希望能帮助到一些有需要的同学。如果大佬们有更好的经验，可以指点一二。
首发链接
往期精彩：
用初中数学知识撸一个canvas环形进度条
