技术分享：前端篇论管理后端接口的最终方案

前端的一生，离不开三件事，兼容，ui与后端接口。

在刚开始工作没多久的时候，看着后端提供的那串玩意就在想，应该怎么样才能优雅的处理这几串东西。在工作的转场中，我试图从别人身上去寻找那份答案，但终究都不是我想要的那份真物。

阶段

在学习的路上，接触了几种方式

各自为政

刚刚开始碰到的是游击战模式，接口路径，他在这头，她又在另外一头，有时候他在这头，他还在另外一头。

this.$fetch('api/commodity')
function login () {
---
---
fetch('api/login')
---
---
}
复制代码

只把一些诸如登陆、用户信息等全局接口进行封装，没有一个明确的get模块和set操作分离，去对应后端的接口文档，在团队开发的时候，会带来一定程度的混乱。

中央集权失败

第二份工作时，在项目结构中看到了一个api.js，里面记录了一些后端接口的路径,在使用的时候，直接引用这个文件。

src/api
epxort default {
	LOGIN: 'api/login',
    GET_USER_INFO: 'api/userInfo',
}
// src/App.vue
this.$fetch(this.$api.LOGIN)
复制代码

初用没什么毛病，但是后面碰到了'api/commodity/:id'这种params的路径，就无从下手了，终究还是伪物，变回各自为政。

进厂

再后来࿰