Nestjs递归菜单树结构

方法1:

buildMenuTree (menuList: Menu[], pid: string): MenuTree[] {
    let result: MenuTree[] = [];
    menuList.forEach(menu => {
      const menuTree = new MenuTree();
      menuTree.id = menu.id;
      menuTree.name = menu.name;
      menuTree.code = menu.code;
      menuTree.route = menu.route;
      if (menu.parentId === pid) {
        menuTree.children = this.buildMenuTree(menuList, menu.id);
        result.push(menuTree);
      }
    });
    console.log(result);
    return result;
  }
  
  

方法2

buildMenuTree (menuList: Menu[], pid: string): MenuTree[] {
    let result: MenuTree[] = [];
    for (var i = 0; i < menuList.length; i++) {
      if (menuList[i].parentId == pid) {
        var menuTree: MenuTree = new MenuTree();
        menuTree.id = menuList[i].id;
        menuTree.name = menuList[i].name;
        menuTree.code = menuList[i].code;
        menuTree.route = menuList[i].route;
  
解释一下列ts语句的语法,纯文本输出.<!-- sy1\src\layout\components\Sidebar\SidebarItem.vue --> <template> <div> <!-- <div v-if=" !item.meta || !item.meta.hidden " :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]" > --> <div v-if="!item.meta || !item.meta.hidden" :class="['menu-wrapper', 'full-mode', { 'first-level': isFirstLevel }]" > <template v-if="theOnlyOneChild && !theOnlyOneChild.children"> <sidebar-item-link v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)" > <el-menu-item :index="resolvePath(theOnlyOneChild.path)" :class="{ 'submenu-title-noDropdown': isFirstLevel }" > <!-- <i v-if="theOnlyOneChild.meta.title==='工作台'" class="iconfont icon img-icon-sel" /> --> <!-- <svg-icon v-if="theOnlyOneChild.meta.title==='工作台'" name="dashboard" width="20" height="20"></svg-icon> --> <i v-if="theOnlyOneChild.meta.icon" class="iconfont" :class="theOnlyOneChild.meta.icon" /> <span v-if="theOnlyOneChild.meta.title" slot="title">{{ theOnlyOneChild.meta.title }}</span> </el-menu-item> </sidebar-item-link> </template> <el-submenu v-else :index="resolvePath(item.path)" popper-append-to-body> <template slot="title"> <i v-if="item.meta && item.meta.icon" class="iconfont" :class="item.meta.icon" /> <span v-if="item.meta && item.meta.title" slot="title">{{ item.meta.title }}</span> </template> <template v-if="item.children"> <sidebar-item v-for="child in item.children" :key="child.path" :item="child" :is-collapse="isCollapse" :is-first-level="false" :base-path="resolvePath(child.path)" class="nest-menu" /> </template> </el-submenu> </div> </div> </template> <script lang="ts"> import path from 'path' import { Component, Prop, Vue } from 'vue-property-decorator' import { UserModule } from '@/store/modules/user' import { Route, RouteConfig } from 'vue-router' import { isExternal } from '@/utils/validate' import SidebarItemLink from './SidebarItemLink.vue' @Component({ name: 'SidebarItem', components: { SidebarItemLink, }, }) export default class extends Vue { @Prop({ required: true }) private item!: RouteConfig @Prop({ default: false }) private isCollapse!: boolean @Prop({ default: true }) private isFirstLevel!: boolean @Prop({ default: '' }) private basePath!: string get showingChildNumber() { if (this.item.children) { const showingChildren = this.item.children.filter((item) => { if (item.meta && item.meta.hidden) { return false } return true }) return showingChildren.length } return 0 } get roles() { return UserModule.roles } get theOnlyOneChild() { if (this.showingChildNumber > 0) { return null } if (this.item.children) { for (let child of this.item.children) { if (!child.meta || !child.meta.hidden) { return child } } } // If there is no children, return itself with path removed, // because this.basePath already conatins item's path information return { ...this.item, path: '' } } private resolvePath(routePath: string) { if (isExternal(routePath)) { return routePath } if (isExternal(this.basePath)) { return this.basePath } return path.resolve(this.basePath, routePath) } } </script>
最新发布
10-23
一套目前来说最好的nestjs实战教程,提供QQ长期问答服务. 本人从 08 年到 18 年一直从事于 PHP 的开发。从 18 年开始转向 Typescript+React+Nestjs 的技术栈。目前来说 React 应该是一个非常好用的前端框架,生态非常完善,并且十分灵活简单。Nestjs 则是 Node.js 中唯一且无敌存在的后端 web 框架。因为我个人从事这套技术栈开发已经 4 年多,所以颇有心得,做了这套 React18 视频教程和 Nestjs 实战视频教程。现在视频教程也是刚刚开始做了一部分,还在持续更新。使用 TS 全栈开发可以基本涵盖各种平台的方方面面,比如开发桌面应用的 Electron, 开发小程序的 Taro, 开发 Spa 中后台的 React,开发 SSR 网站的 next.js,开发移动应用的 React Native, 开发 CLI 的 Yargs, 以及开发后端的 Nestjs。基本学会一套,全面够用,再加上 Monorepo 组织结构,一个仓库所有平台都可以搞定。 包含以下知识点 - 掌握Nestjs框架的依赖注入,模块,提供者,生命周期等概念- 掌握DTO数据验证,响应序列化,异常过滤器等常用功能- 学会编写一些常用的class-validator验证约束- 熟练掌握Typeorm以及Nestjs与Typeorm结合开发- 学会整合Swagger输出Open API文档- 掌握TS装饰器以及反射元数据的定义和使用- 编写一些数据库相关的数据验证约束(比如树形表的同级别某字段唯一验证等)- 学会通过继承并魔改Nestjs源码编写自定义的全局验证器- 可以编写自定义的配置系统以及核心功能包- 学会自定义的代码组织方式(比如教程中我把默认的Nestjs应用改成Util+PluginModule模式)- 掌握编写一些常用的Util仓库(比如数据库,Redis,Restful)- 利用Yargs结合魔改后的框架可以编写一些自定义CLI命令(比如数据迁移,数据填充等)- 掌握如何利用阿里云/腾讯云推送邮件和短信- 掌握使用消息列队(MQ)的方式异步推送邮件和短信- 掌握守卫原理以及编写一些用户验证的守卫- 编写一个完善的用户系统(JWT认证,短信/邮件登录,短信/邮件注册,找回密码,绑定手机和邮箱等)- 熟练地通过编写装饰器去实现一些常用的功能- 通过SSE,WebSockets实现用户的上线,下线以及消息实时推送,消息广播等- 学会使用云存储来上传文件- 学会大文件断点雪川- 实现RBAC的权限系统- 理解请求范围概念以及性能方便的考量- 自己构建配置系统,实现配置验证以及通过YAML或数据库来进行动态配置- 通过适用Vscode进行Debug以及编写Jest测试来提升开发效率与程序的可用性- 学会使用Node来编写自定义的CLI命令- 利用NestCURD进行快速开发- 学会Graphql替代Restful写API- 使用Mongodb替代关系型数据库- 掌握一些常用的打包工具,比如通过ncc打包成单文件,通过pack打包成二进制等- 学会一些常用的部署方式,比如通过nginx+pm2反向代理部署,devops自动化CI,CD等- 学会使用pnpm workspaces来使用monreopo组织代码
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值