接口

接口配置详解

请求工具封装

项目使用Request类对Axios进行了封装，提供了统一的请求处理机制。该封装位于src/utils/request.ts文件中。

核心功能：

class Request {
    private instance: AxiosInstance;

    constructor() {
        this.instance = axios.create({
            baseURL: import.meta.env.VITE_APP_BASE_URL.substr(-1) == '/' ? import.meta.env.VITE_APP_BASE_URL : `${import.meta.env.VITE_APP_BASE_URL}/`,
            timeout: 0,
            headers: {
                'Content-Type': 'application/json',
                'lang': storage.get('lang') ?? 'zh-cn'
            }
        });

        // 请求拦截器和响应拦截器配置...
    }

    // HTTP方法封装
    public get<T = any, R = AxiosResponse<T>>(url: string, config?: RequestConfig): Promise<R> { ... }
    public post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: RequestConfig): Promise<R> { ... }
    public put<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: RequestConfig): Promise<R> { ... }
    public delete<T = any, R = AxiosResponse<T>>(url: string, config?: RequestConfig): Promise<R> { ... }

    // 错误处理方法
    private handleNetworkError(err: any) { ... }
    private handleAuthError(code: number) { ... }
}

export default new Request()

配置参数：

请求配置扩展了Axios的默认配置，添加了两个自定义参数：

interface RequestConfig extends AxiosRequestConfig {
    showErrorMessage?: boolean  // 是否显示错误消息
    showSuccessMessage?: boolean  // 是否显示成功消息
}

API模块划分

项目的API接口按照功能模块进行了清晰的划分，所有接口定义文件位于src/app/api/目录下。每个文件对应一个业务模块，包含该模块的所有接口定义。

api目录结构：

src/app/api/
├── addon.ts        # 插件相关接口
├── aliapp.ts       # 支付宝小程序相关接口
├── app.ts          # 应用相关接口
├── auth.ts         # 认证授权相关接口
├── cloud.ts        # 云编译相关接口
├── dict.ts         # 字典相关接口
├── diy.ts          # 自定义相关接口
├── diy_form.ts     # 万能表单相关接口
├── h5.ts           # H5相关接口
├── home.ts         # 首页相关接口
├── member.ts       # 会员相关接口
├── module.ts       # 模块相关接口
├── notice.ts       # 消息管理相关接口
├── pay.ts          # 帐单列表相关接口
├── pc.ts           # PC相关接口
├── personal.ts     # 个人相关接口
├── poster.ts       # 海报相关接口
├── printer.ts      # 打印相关接口
├── site.ts         # 站点相关接口
├── stat.ts         # 统计相关接口
├── sys.ts          # 系统相关接口
├── tools.ts        # 插件开发相关接口
├── upgrade.ts      # 升级相关接口
├── user.ts         # 用户相关接口
├── verify.ts       # 核销相关接口
├── weapp.ts        # 微信小程序相关接口
├── wechat.ts       # 微信相关接口
└── wxoplatform.ts  # 微信开放平台相关接口

接口定义规范

项目中的接口定义遵循统一的规范，每个接口都是一个独立的函数，返回封装后的请求对象。

接口定义示例：

/**
 * 登录接口
 * @param params 登录参数
 * @param app_type 应用类型
 */
export function login(params: Record<string, any>, app_type: string) {
    return request.get(`login/${ app_type }`, { params })
}

/**
 * 添加用户组
 * @param params 用户组参数
 * @returns Promise
 */
export function addRole(params: Record<string, any>) {
    return request.post(`sys/role`, params, { showSuccessMessage: true })
}

/**
 * 编辑用户
 * @param params 用户参数
 */
export function editUser(params: Record<string, any>) {
    return request.put(`user/user/${ params.uid }`, params, { showSuccessMessage: true })
}

/**
 * 删除用户
 * @param uid 用户ID
 */
export function deleteUser(uid: number) {
    return request.delete(`user/user/${ uid }`, { showSuccessMessage: true })
}

接口调用示例

以下是在组件中调用接口的典型示例：

方式1：直接调用

import { ref } from 'vue'
import { getRoleList, addRole } from '@/app/api/sys'

const roleList = ref([])

// 获取角色列表
const loadRoleList = async () => {
    try {
        const res = await getRoleList({
            page: 1,
            limit: 10,
            keyword: ''
        })
        roleList.value = res.data.list
    } catch (error) {
        console.error('获取角色列表失败', error)
    }
}

// 添加角色
const handleAddRole = async (formData) => {
    try {
        await addRole({
            role_name: formData.roleName,
            role_desc: formData.roleDesc,
            status: formData.status
        })
        await loadRoleList() // 添加成功后刷新列表
    } catch (error) {
        // 错误信息会由请求拦截器自动显示
    }
}

方式2：在Composition API中封装

import { ref, reactive, onMounted } from 'vue'
import { getUserList, deleteUser } from '@/app/api/user'

// 用户管理hook
const useUserManagement = () => {
    const userList = ref([])
    const loading = ref(false)
    const searchParams = reactive({
        page: 1,
        limit: 20,
        keyword: ''
    })

    const loadUserList = async () => {
        loading.value = true
        try {
            const res = await getUserList(searchParams)
            userList.value = res.data.list
        } finally {
            loading.value = false
        }
    }

    const removeUser = async (userId) => {
        try {
            await deleteUser(userId)
            await loadUserList() // 删除成功后刷新列表
        } catch (error) {
            // 错误处理
        }
    }

    onMounted(() => {
        loadUserList()
    })

    return {
        userList,
        loading,
        searchParams,
        loadUserList,
        removeUser
    }
}

export default useUserManagement