# 开发使用说明

TIP

主要是介绍该如何上手开发使用

# 配置特别强调

#加密秘钥
VITE_APP_SEART_KEY=
#加密向量
VITE_APP_IV=
#tinymce的api_key
VITE_APP_TINYMCE_API_KEY=

1
2
3
4
5
6

# 加解密

加密秘钥和向量是页面跳转传值过程中为了安全,用来处理加解密的配置.

# TinyMce

富文本编辑器使用的是TinyMce编辑器,需要申请api-key

tinymce访问地址 (opens new window)

# 页面模版使用

因为是基于有来的vue3-element-admin开发,为了不产生冲突和影响项目实际存放路径放置在了src\pages\laravel-fast-api\v1目录下, 这么做是为了区分基础功能和后续开发完善的业务逻辑功能.便于以后维护.

# 模版目录

src\pages\laravel-fast-api\v1\template该目录下主要有init,list,tree三个模版.其中最主要的就是list和tree

list 主要用于列表类数据的快速开发
tree 主要用于树形结构数据的快速开发

# 添加新的业务目录

src\store\modules\permission-store.ts是由该文件中的 parseDynamicRoutes 方法决定的,想增加新的目录需要自行完善

参考示例如下:

/**
 * 解析后端返回的路由数据并转换为 Vue Router 兼容的路由配置
 *
 * @param rawRoutes 后端返回的原始路由数据
 * @returns 解析后的路由集合
 */
  const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
    const parsedRoutes: RouteRecordRaw[] = [];

    // 新增的组件目录，可根据实际需求修改路径
    const baseViewsPath = "../../pages/laravel-fast-api/v1/";
    // 原来的组件目录
    const originalViewsPath = "../../views/";

    rawRoutes.forEach((route) => {
      const normalizedRoute = { ...route } as RouteRecordRaw;

      // console.log("route.component:");
      // console.log(normalizedRoute);

      // 处理组件路径 - 先检查新目录，再检查原目录
      if (normalizedRoute.component?.toString() === "Layout") {
        normalizedRoute.component = Layout;
      } else {
        // 构建组件的路径
        const componentName = normalizedRoute.component?.toString();
        if (componentName) {
          // 优先从基础录查找
          normalizedRoute.component =
            modules[`${baseViewsPath}${componentName}.vue`] ||
            // 再从源目录查找
            modules[`${originalViewsPath}${componentName}.vue`] ||
            // 最后 fallback 到404页面
            modules["../../views/error-page/404.vue"];
        } else {
          // 如果没有指定组件，默认使用404
          normalizedRoute.component = modules["../../views/error-page/404.vue"];
        }
      }

      //处理redirect为空时的问题
      if (normalizedRoute.redirect === "") {
        // 重定向为空时，改为重定向到当前路由 path（或其他合理默认值）
        normalizedRoute.redirect = normalizedRoute.path;
      }

      // 递归解析子路由
      if (normalizedRoute.children) {
        normalizedRoute.children = parseDynamicRoutes(route.children);
      }

      parsedRoutes.push(normalizedRoute);
    });

    return parsedRoutes;
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 组件使用

# 组件位置

src\pages\laravel-fast-api\v1\components\element

# 组件说明

以下顺序是根据项目中代码排列顺序

选择地区 Address
选择管理员 Admin
选择相册 Album
选择银行 Bank
卡片布局 Card 全局
弹窗组件 Dialog 全局
TinyMce富文本编辑器 Editor 全局
选择树形分类 Group 包含 GoodsClas 商品分类 Category 文章分类 Label 标签分类
选择级别 Level
分页 Paginate 全局
选择角色 Role 全局
表格 Table 全局
选择时间 TIme 全局
上传 Upload 全局
选择用户 User

← youhu-uniapp 功能展示一 →