项目梳理

文件目录

项目根目录结构
├── PROXY.md
├── README.md # 说明文档
├── cache.dockerfile
├── commitlint.config.js # commintlint 规范
├── docker # docker 部署配置文件
│ └── nginx.conf # 若开启 browerhistroy 可参考配置
├── docs
├── globals.d.ts
├── index.html # 主 html 文件
├── jsx.d.ts
├── mock # mock 目录
│ └── index.ts
├── node_modules # 项目依赖
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── shims-vue.d.ts
├── src # 页面代码
├── tsconfig.json
└── vite.config.js # vite 配置文件

src目录如下
├─assets #图片资源，svg图标等
├─components #公共组件库
├─config #全局配置文件，颜色、请求代理、样式、全局变量
├─constants #全局静态配置文件，表单
├─hooks
├─layouts #布局，头部、尾部、内容、菜单、面包屑、全局通知、搜索、设置
├─pages
├─router #路由表
│ └─modules
├─service #网络请求封装 request，原先在util中，现统一
│ └─api #所有api封装
├─store #vuex
│ └─modules
├─style #全局样式
│ └─theme #主题包
└─utils #全局工具类

菜单生成

layouts/components/MenuContent.ts的useRenderNav方法加入以下逻辑

  1. // 对于meta中hide的路由不生成菜单
  2. if (item.meta.hide) {
  3.   return undefined;
  4. }

路由配置

  • meta.hide 隐藏菜单，需改写useRenderNav逻辑，如上
  • meta.single 只显示一级菜单
  • 动态路由目前只支持2级，所以更深的配置到同级加上冗余的路径名，配置如下：
    1. {
    2.   path: '/project',
    3.   name: 'project',
    4.   meta: { title: '项目', icon: 'server' },
    5.   component: Layout,
    6.   children: [
    7.     {
    8.       path: 'manage',
    9.       name: 'projectManage',
    10.       component: () => import('@/pages/project/manage/index.vue'),
    11.       meta: { title: '项目管理' },
    12.     },
    13.     {
    14.       path: 'add',
    15.       name: 'projectAdd',
    16.       component: () => import('@/pages/project/add/index.vue'),
    17.       meta: { title: '新建项目', hide: true },
    18.     },
    19.     {
    20.       path: ':projectId',
    21.       name: 'projectShow',
    22.       component: () => import('@/pages/project/show/index.vue'),
    23.       meta: { title: '查看项目', hide: true },
    24.     },
    25.     {
    26.       path: ':projectId/floor/:floorId',
    27.       name: 'floorShow',
    28.       component: () => import('@/pages/floor/show/index.vue'),
    29.       meta: { title: '查看楼层', hide: true },
    30.     },
    31.     {
    32.       path: ':projectId/floor/add',
    33.       name: 'floorAdd',
    34.       component: () => import('@/pages/floor/add/index.vue'),
    35.       meta: { title: '增加楼层', hide: true },
    36.     },
    37.   ],
    38. },

    网络请求封装

    原项目在utils目录下，现service/request.ts

提供基础的get/post/upload方法，主要看HTTP接口中的泛型使用(83行)，配合api的index中方法传入该泛型（定义在types中）

  1. import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
  2. import { MessagePlugin } from 'tdesign-vue-next';
  3. import qs from 'qs';
  4. import proxy from '../config/proxy';
  5. import { TOKEN_NAME } from '@/config/global';
  6. import { showMessage } from './status';
  8. const env = import.meta.env.MODE || 'development';
  10. const host = env === 'mock' ? '/' : proxy[env].host; // 如果是mock模式 就不配置host 会走本地Mock拦截
  12. const instance = axios.create({
  13.   baseURL: host,
  14.   timeout: 20000,
  15.   // withCredentials: true,
  16. });
  18. const reqMethods = ['get', 'head'];
  19. instance.interceptors.request.use((config: AxiosRequestConfig) => {
  20.   const token = localStorage.getItem(TOKEN_NAME);
  21.   if (token) {
  22.     config.headers[TOKEN_NAME] = `Bearer ${token}`;
  23.   }
  24.   // 数组参数序列化
  25.   if (reqMethods.includes(config.method)) {
  26.     // eslint-disable-next-line func-names
  27.     config.paramsSerializer = function (params) {
  28.       return qs.stringify(params, { arrayFormat: 'repeat' });
  29.     };
  30.   }
  31.   return config;
  32. });
  34. instance.defaults.timeout = 5000;
  36. instance.interceptors.response.use(
  37.   (response: AxiosResponse) => {
  38.     const token = response.headers.authorization;
  39.     if (token) {
  40.       localStorage.setItem(TOKEN_NAME, token);
  41.     }
  42.     if (response.status !== 200) {
  43.       showMessage(response.status);
  44.     }
  45.     return response;
  46.   },
  47.   (err) => {
  48.     // 错误提示
  49.     const { response } = err;
  50.     if (response) {
  51.       const {
  52.         data: { message },
  53.       } = response;
  54.       if (message) {
  55.         MessagePlugin.error(message);
  56.       } else {
  57.         showMessage(response.status);
  58.       }
  59.     } else {
  60.       MessagePlugin.error('网络连接异常，请稍后再试');
  61.     }
  63.     const { config } = err;
  64.     if (!config || !config.retry) return Promise.reject(err);
  66.     config.retryCount = config.retryCount || 0;
  67.     if (config.retryCount >= config.retry) {
  68.       return Promise.reject(err);
  69.     }
  71.     config.retryCount += 1;
  72.     const backoff = new Promise((resolve) => {
  73.       setTimeout(() => {
  74.         resolve(null);
  75.       }, config.retryDelay || 1);
  76.     });
  78.     return backoff.then(() => instance(config));
  79.   },
  80. );
  82. // 封装常用请求，这里是重点泛型T由封装api的方法传入
  83. interface Http {
  84.   get<T>(url: string, params?: unknown): Promise<T>;
  85.   post<T>(url: string, params?: unknown): Promise<T>;
  86.   upload<T>(url: string, params: unknown): Promise<T>;
  87.   download(url: string): void;
  88. }
  90. const http: Http = {
  91.   get(url, params) {
  92.     return instance({
  93.       url,
  94.       method: 'get',
  95.       params,
  96.     })
  97.       .then((res) => res.data)
  98.       .catch((err) => err.data);
  99.   },
  100.   post(url, data) {
  101.     return instance({
  102.       url,
  103.       method: 'post',
  104.       data,
  105.     })
  106.       .then((res) => res.data)
  107.       .catch((err) => err.data);
  108.   },
  109.   upload(url, data, params = {}) {
  110.     return instance({
  111.       url,
  112.       method: 'post',
  113.       params,
  114.       headers: {
  115.         // 'content-type': 'text/csv'
  116.         'content-type': 'multipart/form-data',
  117.       },
  118.       data,
  119.     })
  120.       .then((res) => res.data)
  121.       .catch((err) => err.data);
  122.   },
  123.   download(url) {
  124.     const iframe = document.createElement('iframe');
  125.     iframe.style.display = 'none';
  126.     iframe.src = url;
  127.     // eslint-disable-next-line func-names
  128.     iframe.onload = function () {
  129.       document.body.removeChild(iframe);
  130.     };
  131.     document.body.appendChild(iframe);
  132.   },
  133. };
  135. export default instance;
  136. export { http };

api封装

index 请求方法

  1. import { USER_ID } from '@/config/global';
  2. import { http } from '@/service/request';
  3. import { ILoginData, IUserInfo } from './types';
  5. const base = '/armory/barrack/v1';
  7. const api = {
  8.   login: '/users/login',
  9.   userInfo: '/users',
  10. };
  12. const baseParam = {
  13.   domain: 'xxx',
  14. };
  16. // 登录
  17. export function login(params): Promise<ILoginData> {
  18.   return http.post<ILoginData>(base + api.login, { ...baseParam, ...params });
  19. }
  21. // 获取用户信息
  22. export function getInfo(): Promise<IUserInfo[]> {
  23.   const userId = localStorage.getItem(USER_ID);
  24.   const url = `${base + api.userInfo}/${Number(userId)}`;
  25.   return http.get<IUserInfo[]>(url, { ...baseParam });
  26. }

types 数据接口定义

  1. export interface ILoginData {
  2.   token: string;
  3.   userId: string;
  4.   userName: string;
  5. }
  7. interface Role {
  8.   id: string;
  9.   name: string;
  10.   code: string;
  11. }
  13. export interface IUserInfo {
  14.   id: number;
  15.   name: string;
  16.   domain: string;
  17.   createTime: string;
  18.   updateTime: string;
  19.   loginType: string;
  20.   role: Role;
  21.   state: string;
  22. }

权限管理

根目录下的permission.ts配合store/modules/user.ts
主要改写user中的login、getUserInfo方法，即可实现自己的权限逻辑，配合token和roles判断
改写roles获取不同角色的路由生成菜单
大致登录过程如下：
image.png

开发避坑

vue-router页面回退不显示

如果路由页面没有指定根标签，那么在路由返回时（go(-1)，history.back()等），找不到可替换的标签，页面无法正常加载，vue3支持不设置根标签带来的影响
故在编写路由页面时必须指定根标签，组件页面可不受此约束