zoukankan      html  css  js  c++  java
  • 文本结构转换为菜单代码、权限、创建文件结构

    文本结构转换为菜单代码信权限

    以下代码用于有菜单关系的文本结构转换为代码对应的结构。

    • 使用场景,产品丢给你一堆层级菜单,你得把他在代码中表现出层级关系,以及路由,路由当然不能用中文,一大批数据可能得弄半天。
    • 于是你想简单写个文本,并且翻译一下,转换为代码所需格式。
    • 使用方法,路由写在菜单名的 __ 两个下划线后面,二级菜单使用 - 表示,目前仅支持二级菜单,望好心人改改,支持多级菜单,例如三级菜单使用 -- 表示。
    • 注:以下英文直接来自百度整段翻译,不要介意~
    
    const str = `
    任务管理 __ task management
    数据报表 __ Data Report
    -动态报表 __ - Dynamic Report
    系统配置 __ system configuration
    -到期提醒管理 __ - Management of expiration reminders
    -公告管理 __ - Announcement Management
    系统管理 __ system management
    -角色管理 __ - Role management
    -日志报表 __ - Log Report
    `
    function getMemuJson(str) {
      const arr = str.split('
    ').map(item => item.trim()).filter(item => item) // 拆分每行
      let manMenuIndex = 0 // 主菜单索引
      let subMenuIndex = 0 // 子菜单索引
      let letterIndex = 65 // 从字母 A 编码开始
      const menuRes = []
      arr.forEach(name => {
        if(!name.match(/^-/)) {
          subMenuIndex = 0
          menuRes.push({
            id: String.fromCharCode(letterIndex + manMenuIndex),
            name: getEnOrCh(name, 'ch'),
            route: `/${tf(getEnOrCh(name))}`,
          })
          manMenuIndex = manMenuIndex + 1
        } else { // 子菜单
          const parentId = String.fromCharCode(letterIndex + (manMenuIndex - 1))
          menuRes.push({
            id: String.fromCharCode(letterIndex + (manMenuIndex - 1)) + (subMenuIndex + 1),
            menuParentId: parentId,
            name: getEnOrCh(name, 'ch'),
            route: `/${menuRes.find(item => item.id === parentId).route.slice(1)}/${tf(getEnOrCh(name))}`,
          })
          subMenuIndex = subMenuIndex + 1
        }
      })
    
      return menuRes
    
      function getEnOrCh(str, isEn = 'en') { // 截取每行上的英文或中文
        return isEn === 'en' ? str.match(/__ (.*)/)[1].replace(/^-+/, '').trim() : str.match(/(.*)__/)[1].replace(/^-+/, '')
      }
    
      function tf(str){ // 转换 `ab-c d_ef` 为小驼峰
        let arr=str.split(' ').join('-').split('-').join('_').split('_');
        for(let i=1; i<arr.length; i++){
          arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
        }
        arr[0] = arr[0].toLowerCase() // 此行为小驼峰
        return arr.join('');
      };
    
    }
    
    function getShell(menuRes) {
      // 简单生成脚本, 用于根据基准页面创建各个路由的页面。注意 window 下的脚本不是这样的
      const basePage = `/Users/xw/Documents/git/boilerplate/clients/src/pages/basePage/` // 基准页面, 我这里是一个文件夹
      const outDir = `/Users/xw/Documents/git/boilerplate/clients/src/pages/` // 输出的位置, 我这里与基准页面在同一目录
      let bat = menuRes.map(item => {
        const out = `${outDir}${item.route}`
        return `
          if [ ! -d ${out} ]; then mkdir -p ${out} & cp -r ${basePage} ${out}; else echo '已经存在'; fi
        `.replace(////g, '/')
      }).join('
    
    ')
      return bat
    }
    
    function getAuth(str) {
      let obj = {}
      getMemuJson(str).map(item => item.id).forEach(item => {
        if(!obj[item[0]]) {
          obj[item[0]] = [item]
        } else {
          obj[item[0]].push(item)
        }
      })
      const arr = Object.keys(obj).map(key => obj[key])
      return arr.map(item => item.join(','))
    }
    
    console.log('生成的菜单数据', getMemuJson(str)) // 配置在代码里
    console.log('生成的管理员菜单配置', getAuth(str)) // 配置在数据库
    console.log('生成的脚本', getShell(getMemuJson(str))) // 创建与配置对应的文件结构
    

    console.log(‘生成的菜单数据’, getMemuJson(str))

    [
      {
        "id": "A",
        "name": "任务管理 ",
        "route": "/taskManagement"
      },
      {
        "id": "B",
        "name": "数据报表 ",
        "route": "/dataReport"
      },
      {
        "id": "B1",
        "menuParentId": "B",
        "name": "动态报表 ",
        "route": "/dataReport/dynamicReport"
      },
      {
        "id": "C",
        "name": "系统配置 ",
        "route": "/systemConfiguration"
      },
      {
        "id": "C1",
        "menuParentId": "C",
        "name": "到期提醒管理 ",
        "route": "/systemConfiguration/managementOfExpirationReminders"
      },
      {
        "id": "C2",
        "menuParentId": "C",
        "name": "公告管理 ",
        "route": "/systemConfiguration/announcementManagement"
      },
      {
        "id": "D",
        "name": "系统管理 ",
        "route": "/systemManagement"
      },
      {
        "id": "D1",
        "menuParentId": "D",
        "name": "角色管理 ",
        "route": "/systemManagement/roleManagement"
      },
      {
        "id": "D2",
        "menuParentId": "D",
        "name": "日志报表 ",
        "route": "/systemManagement/logReport"
      }
    ]
    

    console.log(‘生成的管理员菜单配置’, getAuth(str))

    [ 'A', 'B,B1', 'C,C1,C2', 'D,D1,D2' ]
    

    console.log(‘生成的脚本’, getShell(getMemuJson(str)))

    if [ ! -d /Users/xw/Documents/git/boilerplate/clients/src/pages/taskManagement ]; then mkdir -p /Users/xw/Documents/git/boilerplate/clients/src/pages/taskManagement & cp -r /Users/xw/Documents/git/boilerplate/clients/src/pages/basePage/ /Users/xw/Documents/git/boilerplate/clients/src/pages/taskManagement; else echo '已经存在'; fi
    
    if [ ! -d /Users/xw/Documents/git/boilerplate/clients/src/pages/dataReport ]; then mkdir -p /Users/xw/Documents/git/boilerplate/clients/src/pages/dataReport & cp -r /Users/xw/Documents/git/boilerplate/clients/src/pages/basePage/ /Users/xw/Documents/git/boilerplate/clients/src/pages/dataReport; else echo '已经存在'; fi
    
    # 更多省略...
    
  • 相关阅读:
    Tomcat7,Tomcat8 的manager 配置
    JavaScript 获得当前日期+时间
    CentOS 安装jdk 1.8
    nginx文件结构与解析,例子
    jxl解析多个excel工作表-java代码
    一个上传图片,预览图片的小demo
    利用DES,C#加密,Java解密代码
    CentOS安装Nginx
    摄像机标定--很懒的方法
    slam-g2o安装失败的解决问题
  • 原文地址:https://www.cnblogs.com/daysme/p/11477002.html
Copyright © 2011-2022 走看看