# feat:使用orval对openAPI进行借口生成;完成orval的配置;

- 使用orvel进行api接口函数生成
- 使用axios进行后端api调用

orval.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'orval';
+
+export default defineConfig({
+    'your-api': {
+        // OpenAPI 规范文件路径（支持本地文件或 URL）
+        input: {
+            target: 'http://localhost:8080/v3/api-docs', // 可改为你的 Swagger JSON 地址，如：http://localhost:8000/openapi.json
+        },
+        output: {
+            // 生成代码的模式：tags-按接口标签拆分文件
+            mode: 'tags',
+
+            // 客户端类型：使用 axios
+            client: 'axios',
+
+            // 生成 vue-query hooks
+            target: './src/api/client.ts',
+
+            // 生成的 TypeScript 类型存放目录
+            schemas: './src/api/models',
+
+            // 每次生成前自动清理旧文件
+            clean: true,
+
+            // 覆盖默认配置
+            override: {
+                // 自定义 axios 实例
+                mutator: {
+                    path: './src/util/axios-instance.ts',
+                    name: 'customAxiosInstance',
+                },
+
+                // 为每个接口生成 vue-query hooks
+                query: {
+                    useQuery: true,      // 生成 useGetXXX hooks
+                    useMutation: true,   // 生成 usePostXXX hooks
+                },
+            },
+        },
+
+        // 生成后自动格式化代码
+        hooks: {
+            afterAllFilesWrite: 'prettier --write',
+        },
+    },
+});

package.json

@@ -6,10 +6,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "api:gen": "orval"
   },
   "dependencies": {
+    "axios": "^1.15.2",
     "element-plus": "^2.13.6",
+    "orval": "7.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.13",
@@ -18,6 +21,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
+    "prettier": "^3.8.3",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vue-tsc": "^2.2.8"

src/util/axios-instance.ts

@@ -0,0 +1,62 @@
+import axios, {type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+
+// 自定义配置接口
+export interface CustomInstanceConfig extends AxiosRequestConfig {
+    // 可以添加自定义配置
+    skipAuth?: boolean; // 是否跳过鉴权
+}
+
+// 创建 Axios 实例
+const axiosInstance: AxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+    timeout: 30000,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// 请求拦截器
+axiosInstance.interceptors.request.use(
+    (config) => {
+        // 添加 token
+        const token = localStorage.getItem('token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+// 响应拦截器
+axiosInstance.interceptors.response.use(
+    (response: AxiosResponse) => {
+        // 根据后端返回格式调整
+        if (response.data.code !== 0) {
+            return Promise.reject(new Error(response.data.message || '请求失败'));
+        }
+        return response.data;
+    },
+    (error) => {
+        // 统一错误处理
+        if (error.response?.status === 401) {
+            // 未授权，跳转登录
+            window.location.href = '/login';
+        }
+        return Promise.reject(error);
+    }
+);
+
+// 自定义实例函数（供 Orval 使用）
+export const customAxiosInstance = <T>(config: CustomInstanceConfig): Promise<T> => {
+    return axiosInstance(config);
+};
+
+// 也可以导出第二参数形式（如需处理完整响应）
+export const customAxiosInstanceWithFullResponse = <T>(
+    config: CustomInstanceConfig
+): Promise<AxiosResponse<T>> => {
+    return axiosInstance(config);
+};