2025年6月

创建软件管理模块的完整流程:

  1. 创建页面组件文件:
    主页面:/src/views/software/index.vue
    搜索组件:/src/views/software/modules/notice-search.vue
    新增/编辑抽屉:/src/views/software/modules/notice-operate-drawer.vue
  2. 添加相关API接口:
    src/service/api/system-manage.ts
  3. 添加类型定义
    src/typings/api.d.ts
  4. 添加国际化配置,注意配置路由名称的时候不用配置app.d.ts
    src\typings\app.d.ts
    src/locales/langs/zh-cn.ts
    src/locales/langs/en-us.ts

1.修改 .env.test 配置文件中 VITE_SERVICE_BASE_URL 和VITE_OTHER_SERVICE_BASE_URL, 记得带/api (这个文件是API跳转的基础URL)

2.修改 .env 文件中 VITE_HTTP_PROXY=Y 修改成Y:表示开启代理,在开发环境中,代理的主要作用是解决跨域问题,生产环境不建议开启,避免影响性能

3.修改 .env 文件中 VITE_SERVICE_SUCCESS_CODE 这里的成功状态码如果有很多个,可以用 , 分隔。
这个时候request请求需要改造支持多状态码,修改文件src\service-alova\request\index.ts 对应 createAlovaRequest 方法下的 isBackendSuccess

async isBackendSuccess(response) {
      const resp = response.clone();
      const data = await resp.json();
      // 获取成功状态码列表(从环境变量中获取并解析为数组)
      const successCodes = import.meta.env.VITE_SERVICE_SUCCESS_CODE.split(',').map(code => code.trim());
      // 检查后端返回的 code 是否在成功状态码列表中
      return successCodes.includes(String(data.code));
    }

4.修改api方法fetchLogin中的userName

export function fetchLogin(userName: string, password: string) {
  return alova.Post<Api.Auth.LoginToken>('/auth/login', { username: userName, password });
}

5.(1)修改api方法fetchGetUserInfo中api,GetUserInfo改GetCurrentUser

export function fetchGetUserInfo() {
  return alova.Get<Api.Auth.UserInfo>('/auth/getCurrentUser');
}
interface UserInfo {
      /** User ID (from backend: Id) */
      id: number;
      /** Username (from backend: Username) */
      username: string;      // 注意这里修改后,建议查询下 UserInfo. 或者 userInfo.
      /** User roles (from backend: Roles) */
      roles: string[];
      /** Button permissions (frontend specific) */
      buttons: string[];
    }

6.路径:src\store\modules\auth\index.ts 下的const userInfo: Api.Auth.UserInfo = reactive 修改, 查询下 UserInfo. 或者 userInfo. 修改userInfo.userName 为 userInfo.username

  const userInfo: Api.Auth.UserInfo = reactive({
    id: 0,
    username: '',
    roles: [],
    buttons: []
  });

注意:(1)由于 axios 和 alova 的错误处理机制不同,axios 版本:返回 { data, error } 结构,alova 版本:直接返回数据或抛出异常,路径: src\store\modules\auth\index.ts 修改 auth store 以适配 alova 的返回格式。(2) 默认开发环境使用mock,可以删除对应的mock文件, 改为 requestAdapter: adapterFetch()