v3-admin-vite 改造自动路由,view页面自解释Meta

需求

v3-admin-vite是一款不错的后端管理模板,主要是pany一直都在维护,最近将后台管理也进行了升级,顺便完成一直没时间解决的小痛痒:

在不使用后端动态管理的情况下。我不希望单独维护一份路由定义,我希望页面是自解释的。就像HTML标记,一个页面的标题等信息由页面内<title>决定,而一个页面的访问地址(路由)由页面目录决定。很自然的思维是么?单独维护一份路由感觉就没那么自然了,我希望这一切都由页面自解释。访问路径我只需要移动页面的位置,Ctrl+CV目录的结构就好了

思路

之前实战过数个项目,大部分都轻车熟路了。但是对于v3-admin-vite系统,还是有几个地方需要调整 :

1.目录的定义

目录的定义除了名称外,还有图标等信息需要管理。因此需要采用文件补充信息,我的解决方案是将要输出成为左侧目录结构的目录(好绕口)下放一个index.ts文件,为了避免和其它的文件冲突,约定默认导出export default必须包含title这个string信息,表示目录名称(神马?title为空怎么办?有点正常业务思维吧),顺便把图标的定义也在导出解决。

2.View文件的定义

View文件的定义由于目录定义一样,只需要将你导出成为菜单的vue模块添加导出定义即可。把meta信息导出,自动输出路由配置。

3.Name约定

除了meta信息以外,admin-v3还要求name不能一致(没试过 ?改个一样的试试看😏),我们可以直接从文件名读取,至少一个目录下文件名是不会一致的。当然如果多个目录的话,就要注意一下了,功能页面名称唯一这个应该很容易办到。

4.递归扫描文件

webpack,vite等工具都提供了文件扫描的接口,只是不能使用变量进行路径扫描,必须字面量(常量),好在支持通配符。解决起来不难。

5.顺序问题的解决

由于工具扫描都是基于文件名称的,而实际需要显示的结构和文件顺序 不一定相同,例如我有a.vue,b.vue,按名称扫描a会出现在前面。因此我扩充了一下Meta定义,添加了一个position属性 ,没设置时,默认以100作为排序值,根据其对所有的目录递归排序,这样就OK了。

功能实现

看一下最终的对应效果

对于目录标记,我们只需要在目录下添加一个index.ts文件:

import { RouteMetaEx } from '@/router'

export default {
  title: '二级目录测试',
} as RouteMetaEx

对于View模块,我们只需要添加多一个typescript块导出meta:

<template>
  <div>测试节点3</div>
</template>
<script lang="ts">
import { RouteMetaEx } from '@/router'
const meta: RouteMetaEx = {
  title: '3级节点1', // 只有导出title的才会成为路由
  elIcon: 'Cpu', // element-ui的内置ICON,比svgIcon优先
  // svgIcon: 'dashboard',
  roles: ['role0'], // 哪些角色可以显示
  position: 100
  //keepAlive: true // 是否要keepAlive保持页面状态
  // hidden: true 默认为false,不会挂载到菜单
}
export default meta
</script>

使用是不很简单?哈哈哈哈。

这里添加了position的RouteMetaEx在后面有定义,其它结构和功能和Meta定义一致。注意vue的文件名在view下要唯一。

然后我们的src/router/index.ts里dynamicRoutes需要按照下面方式来导出:


export interface RouteMetaEx extends RouteMeta {
  position?: number //排序,不填写的话默认为100,用于控制菜单顺序
}

/**
 * admin-vite-v3 自动路由
 * 递归扫描views下的文件,识别导出title的页面加入路由,需要配置权限 (Roles 属性)
 * 注意二级目录产生要求在目录index.ts里导出含title的meta
 * @author Jim 2024/4/1
 */
const autoRoutes: Array<RouteRecordRaw> = []

const scanDir: Record<string, any> = import.meta.glob('../views/**/index.ts', { eager: true }) // 处理目录
const dirNodeCache = new Map<string, RouteRecordRaw>()
for (const key in scanDir) {
  const component = scanDir[key]
  if (component.default?.title) {
    // 通过默认导出title判断
    const groups = /\.\.\/views\/((\w+\/)+)index\.ts/.exec(key) || []
    const dirName = groups[2].slice(0, -1) // 提取目录名
    const perfix = groups[1].slice(0, -dirName.length - 1) // 提取前缀目录
    const currentNode: RouteRecordRaw = {
      path: dirName,
      name: dirName,
      children: [],
      meta: { ...component.default, alwaysShow: true } // 合并alwaysShow进去,保持目录结构
    }
    const upperNode = dirNodeCache.get(perfix)
    if (upperNode) {
      upperNode.children?.push(currentNode)
    } else {
      // 一级目录
      currentNode.path = `/${dirName}` // 更改根格式
      currentNode.component = Layouts
      autoRoutes.push(currentNode)
    }
    dirNodeCache.set(groups[1], currentNode)
  }
}
const scanModule: Record<string, any> = import.meta.glob('../views/**/*.vue', { eager: true }) // 处理节点
for (const key in scanModule) {
  const component = scanModule[key]
  if (component.default?.title) {
    // 通过默认导出title判断
    const groups = /\.\.\/views\/((\w+\/)*)(\w+)\.vue/.exec(key) || []
    const dirPath = groups[1]
    const moduleName = groups[3]
    if (!dirPath) {
      // 一级菜单特殊处理
      autoRoutes.push({
        path: `/${moduleName}`,
        name: moduleName,
        component: Layouts,
        redirect: `/${moduleName}/index`,
        meta: component.default,
        children: [
          {
            path: 'index',
            name: moduleName,
            component: () => component,
            meta: component.default
          }
        ]
      })
    } else {
      const currentNode: RouteRecordRaw = {
        path: moduleName,
        name: moduleName,
        component: () => component,
        meta: component.default
      }
      const upperNode = dirNodeCache.get(dirPath)
      if (upperNode) {
        // 挂上级目录下,没有定义就不要挂了
        upperNode.children?.push(currentNode)
      } else {
        console.error(`upper node ${dirPath} not found`)
      }
    }
  }
}

const sortFunc = (a: RouteRecordRaw, b: RouteRecordRaw) =>
  ((a.meta as RouteMetaEx).position ?? 100) - ((b.meta as RouteMetaEx).position ?? 100)
function sortByPosition(nodes: RouteRecordRaw[]) {
  nodes.forEach((node: RouteRecordRaw) => {
    if (node.children) {
      const sortedChildren = node.children.sort(sortFunc) // 排序所有children
      sortByPosition(sortedChildren)
    }
  })
}
autoRoutes.sort(sortFunc)
sortByPosition(autoRoutes)

export const dynamicRoutes: RouteRecordRaw[] = autoRoutes

其他部分可以不用动。这样我们便有了路由导出的功能。

副作用

这样处理虽然开发方便,但是也有它的局限和副作用。副作用就是分包问题,由于所有的模块获取菜单定义必须读文件,因此无法懒加载,会导致扫描过程需要加载全部的模块,这样一来当模块非常多的时候加载会比较耗资源,也无法细化的分包。但对于中小项目一个gzip包全部load下来还是问题不大。大型项目可能要采用其它方案例如自动化脚本来输出路由。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506103.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题 一、运行环境 1、硬件 手机型号&#xff1a;NOVA 7 系统&#xff1a;HarmonyOS版本 4.0.0 2、软件 android SDK platforms&#xff1a;14.0(API Level 34)、13.0&#xff08;API Level 33&#xff09; SDK Build-T…

【踩坑】荣耀系统Android8.0 system目录Read-only file system

本来以为直接把Charles证书改成系统证书格式&#xff0c;然后通过mt管理器root之后移动到系统证书目录就行了&#xff0c;结果访问baidu仍然显示网络错误&#xff0c;折腾一晚上。后来直接安装为用户证书&#xff0c;与系统证书冲突。 手机型号&#xff1a;荣耀v10 EMUI&…

win10 安装kubectl,配置config连接k8s集群

安装kubectl 按照官方文档安装&#xff1a;https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/ curl安装 &#xff08;1&#xff09;下载curl安装压缩包: curl for Windows &#xff08;2&#xff09;配置环境变量&#xff1a; 用户变量&#xff1a; Path变…

牛客NC92 最长公共子序列(二)【中等 动态规划 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/6d29638c85bb4ffd80c020fe244baf11 思路 https://blog.csdn.net/qq_36544411/article/details/120021203 思路 动态规划法&#xff0c; 我们以dp[i][j]表示在s1中以第i个元素结尾&#xff0c;s2中以第j个元素结…

CCF-CSP26<2022-06>-第1/2/3题

202206-1 归一化处理 题目&#xff1a;202206-1 题目分析&#xff1a; 给出了数学上归一化的数学公式&#xff0c;直接按照要求完成即可。 AC代码&#xff1a; #include <bits/stdc.h> using namespace std; int main() {int n;cin >> n;double a[n];double s…

开关恒流源简介

目录 工作原理 设计要点 应用场景 初步想法&#xff0c;为参加活动先占贴&#xff08;带家人出去玩没时间搞~~&#xff09;&#xff0c;后面优化 开关恒流源是一种基于开关电源技术的恒流输出电源设备。它采用开关管进行高速的开关动作&#xff0c;通过控制开关管的导通和截…

【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统概述

系列文章目录 【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统介绍 文章目录 系列文章目录[TOC](文章目录) 前言一、Linux 概述1.1、GNU 与自由软件1.2、Linux是什么1.3、Linux 特色1.4、Linux的优缺点1.4.1、Linux 优点1.4.2、Linux 缺点 二、虚拟机介绍2.1…

数据结构与算法 顺序栈的基本运算

一、实验内容 编写一个程序sqstack.cpp&#xff0c;实现顺序栈的各种基本运算&#xff0c;并在此基础上写一个程序exp6.cpp,实现以下功能 初始化栈s判断栈是否为空依次进栈元素a,b,c,d,e判断栈是否为空输出出栈序列判断栈是否为空释放栈 二、实验步骤 1、sqstack.cpp 2、ex…

6.5物联网RK3399项目开发实录-驱动开发之LCD显示屏使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接&#xff1a;https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f LCD使用 简介 AIO-3399J开发板外置了两个LCD屏接口&#xff0c;一个是EDP&#xff0c;一个是LVDS&#xff0c;接口对应板…

go: go.mod file not found in current directory or any parent directory.如何解决?

这个错误表明你正在执行 go get 命令&#xff0c;但是当前目录或任何父目录中都找不到 go.mod 文件。这可能是因为你的项目还没有使用 Go Modules 进行管理。 要解决这个问题&#xff0c;有几种方法&#xff1a; go mod init <module-name> 其中 <module-name>…

CentOS系统下Docker的安装教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

oracle+110个常用函数

ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,ascii(0) zero,ascii( ) space from dual; A A ZERO SPACE --------- --------- --------- --------- 65 97 48 32 2. CHR 给出整数,返回对应的字符; SQL> select chr(54740) zhao,chr(65) chr…

C语言-malloc(申请函数)free(释放函数)

malloc和free的语法格式 malloc 函数是 C 语言标准库中的一个重要函数&#xff0c;用于动态分配内存。其语法如下&#xff1a; void *malloc(size_t size);这里的 void * 表示返回的是一个 void 类型的指针&#xff0c;实际上这个指针指向的是一个 char 类型的内存块。size_t …

R语言决策树(1)

数据集heart_learning.csv与heart_test.csv是关于心脏病的数据集&#xff0c;heart_learning.csv是训练数据集&#xff0c;heart_test.csv是测试数据集。要求&#xff1a;target和target2为因变量&#xff0c;其他诸变量为自变量。用决策树模型对target和target2做预测&#xf…

机器学习—— PU-Learning算法

机器学习—— PU-Learning算法 本篇博客将介绍PU-Learning算法的基本概念、基本流程、基本方法&#xff0c;并简单探讨Two-step PU Learning算法和无偏PU Learning算法的具体流程。最后&#xff0c;将通过Python代码实现一个简单的PU-Learning示例&#xff0c;以便更好地理解这…

事务传播行为Propagation

目录 背景Propagation测试程序1测试程序2分析 背景 前段时间&#xff0c;某个项目在部署时&#xff0c;被公司的一个检测拦截了&#xff0c;提示报错如下&#xff1a; Your code exists Method or Class with Transactional annotation that not use Propagation.REQUIRED.有…

npm镜像源证书过期问题解决

title: npm镜像源证书过期 search: 2024-02-29 文章目录 Failed to check for updates 问题ERR_PNPM_NO_PKG_MANIFESTnpm缓存清除指令权限不足导致删除不了解决方案npm创建基础配资文件 Failed to check for updates 问题 错误描述如上 检查完 node,vue,npm 的版本后都没啥问…

使用hping3网络工具构造TCP/IP数据包和进行DDos攻击

1 概述 hping3是一个强大的命令行工具&#xff0c;用于生成、发送和解析TCP/IP协议的数据包。它是开源的网络安全工具&#xff0c;由Salvatore Sanfilippo开发&#xff0c;主要应用于网络审计、安全测试和故障排查等领域。hping3不仅可以作为普通的网络连通性检测工具&#xf…

壁纸小程序Vue3(首页布局)

1.创建一个公共目录common来存放css和images App.vue中引用 <style lang"scss"> /*每个页面公共css */ import common/style/common-style.scss; </style> 2.渲染轮播图 <template><view class"homeLayout"><vi…

苍穹外卖04 (新增内表的外键id获取,多表分页查询,多表批量删除,修改先查在改内表外键id用主表的,起售时包含了“停售”状态的外关联表)

1. 新增套餐 1 需求分析和设计 业务规则&#xff1a; 套餐名称唯一 套餐必须属于某个分类 套餐必须包含菜品 名称、分类、价格、图片为必填项 添加菜品窗口需要根据分类类型来展示菜品 新增的套餐默认为停售状态 2 代码实现 1 根据分类id查询菜品 DishControllerGetMa…