# 开发使用说明

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

# 添加菜单

TIP

菜单是通过后端返回的路由数据来生成的,所以在添加菜单时需要先在后端添加路由数据,然后再在前端添加菜单

# 前提-菜单类型

type 10菜单MENU,20目录CATALOG,30外链EXTLINK,40按钮BUTTON

主要是菜单10和20目录两种,顶级菜单是20目录,业务是菜单10

# 添加菜单步骤

-1在系统设置-菜单管理中添加菜单 -2在对应的comonent中添加页面路径

# 注意事项

# 顶级菜单

TIP

注意:顶级菜单的route_path需要写/

component: "Layout",
type:20,
route_path:"/config",
always_show:1

1
2
3
4
5

# 二级菜单或次级菜单

TIP

注意:只有顶级菜单才可以写Layout,如果不是需要显示的页面,那么自定义规则随便填写

component: "前端路径",
type:10,
route_path:"system/permission/index",
always_show:0

1
2
3
4

# 隐藏菜单

隐藏菜单依然要写路径,只是需要注意以下几点

-1隐藏菜单的deep层级需要跟显示页面层级一致

-2隐藏菜单的hidden为1,是否隐藏就选是

-3隐藏菜单的meta_no_cache为1,是否缓存就选是

component: "前端路径",
type:10,
route_path:"user/user/editUser/index",
hidden:1,
meta_no_cache:1

1
2
3
4
5

菜单图标可以在后台选择

总结,在后台操作修改好,根据数据库数据完善seeder填充文件.最终定型为预填充数据

← 功能展示功能展示一 →