vite+vue项目之后台系统使用真实接口替换模拟接口需要步骤

第一步

更改.env.development和.env.production的文件内容，将VITE_API_URL=http://接口IP:接口端口号中的接口IP地址和接口端口号替换成真实后端接口的IP地址和端口，这个问后端要就可以，替换完后需要重新启动项目（npm run dev）

第二步

我们项目中的登录接口写在src\api\Login.ts中，当前我们的登录页面（Login.vue）中只传了两个字段（用户名、密码）， 字段名分别为userName和passWord，需要将这两个字段替换为真实后端登录接口需要的字段，如果后端还需要其他字段，需要一并添加进去传给后端，如果前端使用了md5加密需和后端说明，若不需要就不加密，同时获取成功后的代码也需要根据后端真实接口的返回情况进行修改login().then(res => { // 需要修改})

登录接口改为如下，其中/sys/oauth/token是登录接口地址，params是传参参数，至于Axios的用法可以查看Axios的官方文档：

 * 登录
 * @method login
 */
export const login = (params: any) => {// //模拟接口// return new Promise((resolve, reject) => {// const { userName, passWord } = params// console.log('userName：', userName)// console.log('passWord：', passWord)// if (userName === 'admin' && passWord === '21232f297a57a5a743894a0e4a801fc3') {// resolve({ code: 0, msg: '登录成功！', token: 'admin' })// } else {// resolve({ code: 500, msg: '账号或密码错误！' })// }// })return Axios.get("/sys/oauth/token", {params: params});
} 

第三步

同时在src\api\request.ts文件中，对请求拦截器、响应拦截器的代码内容根据后端真实接口的返回情况进行配置，配置内容基本如下：

// http request 请求拦截器
service.interceptors.request.use((config: any) => {// 如果token存在，就将token赋值到header的Authorization，先知道逻辑即可，代码后面补充// 这里的Token由后端在登录接口返回，返回后将其存到localStorage，在这里进行headers的配置// 一般需要的字段是Authorization，真实需要的字段可问后端，也有情况会需要在getToken()前面加一个bearer // if (getToken()) {// 	config.headers.Authorization = getToken()// }// 追加时间戳，防止GET请求缓存// if (config.method?.toUpperCase() === 'GET') {// 	config.params = { ...config.params, t: new Date().getTime() }// }return config},error => {return Promise.reject(error)}
)

//http response 响应拦截器
service.interceptors.response.use(response => {if (response.status !== 200) {// 对接接口出错return Promise.reject(new Error(response.statusText || 'Error'))}const res = response.data// 响应成功，这里设置了0为响应成功的返回值，可根据实际后端返回的修改if (res.code === 0) {return res}// 没有权限，如：未登录、登录过期等，需要跳转到登录页// 这里401表示登录过期，403表示登录用户没有接口权限if (res.code === 401) {// 弹框提示登录过期，用户点击后跳转登录页，同时清空token，代码后面补充}if (res.code === 401) {// 弹框提示没有权限，用户点击重新登录跳转到登录页，点击关闭则只关闭弹框，代码后面补充}// 除了code=0、code=401、code=403的错误提示，代码后面补充return null},error => {return Promise.reject(error)}
) 

写在最后

以上就是在后台系统中使用真实接口替换模拟接口需要步骤的代码和说明

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取