开发使用说明

提示

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

配置特别强调

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

加解密

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

TinyMce

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

tinymce访问地址

页面模版使用

因为是基于有来的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;
  };

组件使用

组件位置

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

添加菜单

提示

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

前提-菜单类型

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

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

添加菜单步骤

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

注意事项

顶级菜单

提示

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

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

二级菜单或次级菜单

提示

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

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

隐藏菜单

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

-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

---

菜单图标可以在后台选择

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