vue3后台管理框架之API接口统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口；

参数请参考mock中的模拟接口

//统一管理咱们项目用户相关的接口

import request from '@/utils/request'

import type { loginForm, loginResponseData, userInfoReponseData } from './type'

//项目用户相关的请求地址

enum API {
    LOGIN_URL = '/user/login',

    USERINFO_URL = '/user/info',
}
//登录接口
export const reqLogin = (data: loginForm) =>
    request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息

export const reqUserInfo = () =>
    request.get<any, userInfoReponseData>(API.USERINFO_URL)

// 登录需要携带参数ts类型
export interface loginForm {
    username: string
    password: string
}
interface dataType {
    token: string
}
// 登录接口返回数据类型
export interface loginResponseData {
    code: number
    data: dataType
}
interface userInfo {
    userId: number
    avatar: string
    username: string
    password: string
    desc: string
    roles: string
    buttons: string
    routes: string
    token: string
}
interface user {
    checkUser: userInfo
}
// 用户信息返回数据类型
export interface userInfoReponseData {
    code: number
    data: user
}