---

写在前面

上篇文章介绍了如何在vite+vue项目的后台系统中写删除和查看详情，本篇文章介绍如何在vite+vue项目的后台系统中使用真实接口替换模拟接口需要步骤

完整源码：项目gitee地址

在线演示：演示地址

账号：admin 密码：admin

下面我们以登录接口为例，使用真实接口替换模拟的登录接口，本篇文章针对没有项目经验的同学，有项目经验的可忽略不看

第一步

更改.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)
    }
)

写在最后

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