springboot + Vue前后端项目（第十五记）

去皮卡多  论坛元老 | 2024-6-14 19:55:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1007|帖子 1007|积分 3021

写在前面


  • 动态菜单设计
  • 动态路由设计
1.后端接口实现

1.1 用户表添加角色字段

  1. CREATE TABLE `sys_user` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  3.   `username` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名',
  4.   `password` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  5.   `nickname` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
  6.   `email` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',
  7.   `phone` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '电话',
  8.   `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',
  9.   `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  10.   `avatar_url` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT 'https://himg.bdimg.com/sys/portraitn/item/public.1.23bd3c8c.ANoeKxl_gef9fnrikdXOYA' COMMENT '头像',
  11.   `role` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
  12.   `deleted` tinyint(4) DEFAULT '0' COMMENT '逻辑删除0（未删除），1（删除）',
  13.   PRIMARY KEY (`id`) USING BTREE
  14. ) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC
复制代码
1.2 角色表增加唯一标识字段

  1. CREATE TABLE `sys_role` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  3.   `role_key` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '唯一标识',
  4.   `name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  5.   `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '描述',
  6.   `deleted` tinyint(1) DEFAULT '0' COMMENT '是否删除',
  7.   PRIMARY KEY (`id`) USING BTREE
  8. ) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC
复制代码
1.3 UserDTO

  1. @Data
  2. public class UserDTO {
  3.     private String username;
  4.     private String password;
  5.     private String nickname;
  6.     private String avatarUrl;
  7.     private String token;
  9.     private String role;
  10.     private List<Menu> menus;
  11. }
复制代码
1.4 UserServiceImpl

  1. package com.ppj.service.impl;
  3. import cn.hutool.core.bean.BeanUtil;
  4. import cn.hutool.core.util.StrUtil;
  5. import cn.hutool.log.Log;
  6. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  7. import com.ppj.constants.Constants;
  8. import com.ppj.entity.Menu;
  9. import com.ppj.entity.Role;
  10. import com.ppj.entity.RoleMenu;
  11. import com.ppj.entity.User;
  12. import com.ppj.entity.dto.UserDTO;
  13. import com.ppj.exception.ServiceException;
  14. import com.ppj.mapper.MenuMapper;
  15. import com.ppj.mapper.RoleMapper;
  16. import com.ppj.mapper.RoleMenuMapper;
  17. import com.ppj.mapper.UserMapper;
  18. import com.ppj.service.IUserService;
  19. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  20. import com.ppj.utils.TokenUtils;
  21. import org.springframework.beans.factory.annotation.Autowired;
  22. import org.springframework.stereotype.Service;
  24. import javax.sql.rowset.serial.SerialException;
  25. import java.util.ArrayList;
  26. import java.util.List;
  28. /**
  29. * <p>
  30. *  服务实现类
  31. * </p>
  32. *
  33. * @author ppj
  34. * @since 2024-04-20
  35. */
  36. @Service
  37. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
  39.     private static final Log LOG = Log.get();
  41.     @Autowired
  42.     private RoleMapper roleMapper;
  44.     @Autowired
  45.     private RoleMenuMapper roleMenuMapper;
  47.     @Autowired
  48.     private MenuServiceImpl menuService;
  50.     @Override
  51.     public UserDTO login(UserDTO userDTO) {
  52.         if(StrUtil.isBlank(userDTO.getUsername()) || StrUtil.isBlank(userDTO.getPassword())){
  53.             return null;
  54.         }
  55.         User user = getUserInfo(userDTO);
  56.         if(user != null){
  57.             String token = TokenUtils.genToken(user.getId().toString(), userDTO.getPassword());
  58.             userDTO.setToken(token);
  59.             // 把user相应的值传递给userDTO
  60.             BeanUtil.copyProperties(user,userDTO,true);
  61.             List<Menu> roleMenus = getRoleMenus(user.getRole());
  62.             userDTO.setMenus(roleMenus);
  63.             return userDTO;
  64.         }else{  // 数据库查不到
  65.             throw new ServiceException(Constants.CODE_600,"用户名或密码错误");
  66.         }
  67.     }
  69.     @Override
  70.     public Boolean register(UserDTO userDTO) {
  71.         if(StrUtil.isBlank(userDTO.getUsername()) || StrUtil.isBlank(userDTO.getPassword())){
  72.             return false;
  73.         }
  74.         User user = getUserInfo(userDTO);
  75.         if(user == null){
  76.             User newUser = new User();
  77.             // 值传递
  78.             BeanUtil.copyProperties(userDTO,newUser,true);
  79.             // 保存至数据库
  80.             save(newUser);
  81.         }else{
  82.             throw new ServiceException(Constants.CODE_600,"用户已存在");
  83.         }
  84.         return true;
  85.     }
  87.     public User getUserInfo(UserDTO userDTO){
  88.         QueryWrapper<User> queryWrapper = new QueryWrapper<>();
  89.         queryWrapper.eq("username",userDTO.getUsername())
  90.                 .eq("password",userDTO.getPassword());
  91.         User user;
  92.         try {
  93.             // 可能查到多条记录，后台报异常，写个异常类（主动捕获异常）
  94.             user = getOne(queryWrapper);
  95.         }catch (Exception e){  // 可能查出多个符合条件的记录
  96.             LOG.error(e);
  97.             throw new ServiceException(Constants.CODE_500,"系统错误");
  98.         }
  99.         return user;
  100.     }
  102.     /**
  103.      * 根据角色名称获取菜单列表
  104.      * @param roleName
  105.      * @return
  106.      */
  107.     public List<Menu> getRoleMenus(String roleName){
  108.         Integer roleId = roleMapper.getRoleIdByName(roleName);
  109.         List<Integer> menuIds = roleMenuMapper.getMenuIdsByRoleId(roleId);
  111.         // 查询系统中所有菜单,树结构
  112.         List<Menu> menus = menuService.findMenus("");
  113.         // new一个最后筛选完成之后的list
  114.         ArrayList<Menu> roleMenus = new ArrayList<>();
  115.         for (Menu menu : menus) {
  116.             if(menuIds.contains(menu.getId())){
  117.                 roleMenus.add(menu);
  118.             }
  119.             List<Menu> children = menu.getChildren();
  120.             // 移除children中不在menuIds集合中的元素
  121.             if (children != null) {
  122.                 children.removeIf(child -> !menuIds.contains(child.getId()));
  123.             }
  124.         }
  125.         return roleMenus;
  126.     }
  128. }
复制代码
1.5 MenuServiceImpl

将写在MenuController中的方法提取到service中（更符合现实中的开发）
如下图所示：controller不含业务代码

  1. package com.ppj.service.impl;
  3. import cn.hutool.core.util.StrUtil;
  4. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  5. import com.ppj.entity.Menu;
  6. import com.ppj.mapper.MenuMapper;
  7. import com.ppj.service.IMenuService;
  8. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  9. import org.springframework.stereotype.Service;
  11. import java.util.List;
  12. import java.util.stream.Collectors;
  14. /**
  15. * <p>
  16. *  服务实现类
  17. * </p>
  18. *
  19. * @author ppj
  20. * @since 2024-05-29
  21. */
  22. @Service
  23. public class MenuServiceImpl extends ServiceImpl<MenuMapper, Menu> implements IMenuService {
  25.     public List<Menu> findMenus(String name) {
  26.         QueryWrapper<Menu> queryWrapper = new QueryWrapper<>();
  27.         if(StrUtil.isNotBlank(name)){
  28.             queryWrapper.like("name",name);
  29.         }
  30.         List<Menu> list = list(queryWrapper);
  31.         //找出一级菜单
  32.         List<Menu> parentNodes = list.stream().filter(menu -> menu.getPid() == null).collect(Collectors.toList());
  33.         //找出一级菜单的子菜单
  34.         for (Menu menu : parentNodes) {
  35.             menu.setChildren(list.stream().filter(m -> menu.getId().equals(m.getPid())).collect(Collectors.toList()));
  36.         }
  37.         return parentNodes;
  38.     }
  40. }
复制代码
2. 前端实现

2.1 User.vue

主要是表格多添加role字段，添加框增加角色选择框
  1. <template>
  3.   <div>
  4.     <div style="margin: 10px 0">
  5.       <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input>
  6.       <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>
  7.       <el-button class="ml-5" type="primary" @click="getList">搜索</el-button>
  8.       <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  9.     </div>
  11.     <div style="margin: 10px 0">
  12.       <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
  13.       <el-button type="warning" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
  14.       <el-button type="danger" :disabled="multiple" @click="handleDelete">删除 <i class="el-icon-remove-outline"></i></el-button>
  16. <!--      <el-upload action="http://localhost:9000/user/import" :show-file-list="false" accept="xlsx" :on-success="handleImport" style="display: inline-block">-->
  17. <!--        <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>-->
  18. <!--      </el-upload>-->
  19.             <el-button type="success" @click="handleImport" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
  20.       <el-button type="warning" @click="handleExport" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
  21.     </div>
  23.     <el-table v-loading="loading" :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
  24.       <el-table-column type="selection" width="55"></el-table-column>
  25.       <el-table-column prop="id" label="序号" width="140"></el-table-column>
  26.       <el-table-column prop="username" label="用户名" width="140"></el-table-column>
  27.       <el-table-column prop="nickname" label="昵称" width="140"></el-table-column>
  28.       <el-table-column prop="role" label="角色" width="140">
  29.         <template v-slot="scope">
  30.           <el-tag>{{ scope.row.role}}</el-tag>
  31.         </template>
  32.       </el-table-column>
  33.       <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
  34.       <el-table-column prop="address" label="地址" width="140"></el-table-column>
  35.       <el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>
  36.       <el-table-column label="操作"  align="center">
  37.         <template v-slot="scope">
  38.           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
  39.           <el-button type="danger" @click="handleDelete(scope.row)">删除 <i class="el-icon-remove-outline"></i></el-button>
  40.         </template>
  41.       </el-table-column>
  42.     </el-table>
  43.     <div style="padding: 10px 0">
  44.       <el-pagination
  45.           class="page"
  46.           @size-change="handleSizeChange"
  47.           @current-change="handleCurrentChange"
  48.           :page-sizes="[5, 10]"
  49.           :page-size="pageSize"
  50.           layout="total, sizes, prev, pager, next, jumper"
  51.           :total="total">
  52.       </el-pagination>
  53.     </div>
  55.     <!--  用户信息       -->
  56.     <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" >
  57.       <el-form label-width="80px" size="small">
  58.         <el-form-item label="用户名">
  59.           <el-input v-model="form.username" autocomplete="off"></el-input>
  60.         </el-form-item>
  61.         <el-form-item label="昵称">
  62.           <el-input v-model="form.nickname" autocomplete="off"></el-input>
  63.         </el-form-item>
  64.         <el-form-item label="角色" >
  65.           <el-select v-model="form.role" placeholder="请选择" style="width: 100%">
  66.             <el-option
  67.                 v-for="item in roles"
  68.                 :key="item.name"
  69.                 :label="item.name"
  70.                 :value="item.roleKey">
  71.             </el-option>
  72.           </el-select>
  73.         </el-form-item>
  74.         <el-form-item label="邮箱">
  75.           <el-input v-model="form.email" autocomplete="off"></el-input>
  76.         </el-form-item>
  77.         <el-form-item label="电话">
  78.           <el-input v-model="form.phone" autocomplete="off"></el-input>
  79.         </el-form-item>
  80.         <el-form-item label="地址">
  81.           <el-input v-model="form.address" autocomplete="off"></el-input>
  82.         </el-form-item>
  83.       </el-form>
  84.       <div slot="footer" class="dialog-footer">
  85.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  86.         <el-button type="primary" @click="save">确 定</el-button>
  87.       </div>
  88.     </el-dialog>
  90.     <!-- 用户导入对话框 -->
  91.     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
  92.       <el-upload
  93.           ref="upload"
  94.           :limit="1"
  95.           accept=".xlsx, .xls"
  96.           :action="upload.url"
  97.           :disabled="upload.isUploading"
  98.           :on-progress="handleFileUploadProgress"
  99.           :on-success="handleFileSuccess"
  100.           :auto-upload="false"
  101.           drag
  102.       >
  103.         <i class="el-icon-upload"></i>
  104.         <div class="el-upload__text">
  105.           将文件拖到此处，或
  106.           <em>点击上传</em>
  107.         </div>
  108.         <div class="el-upload__tip" slot="tip">
  109.           <el-link type="info" style="font-size: 16px;color:green" @click="importTemplate">下载模板</el-link>
  110.         </div>
  111.         <div class="el-upload__tip" style="color: red" slot="tip">
  112.           提示：仅允许导入“xls”或“xlsx”格式文件！
  113.         </div>
  114.       </el-upload>
  115.       <div slot="footer" class="dialog-footer">
  116.         <el-button type="primary" @click="submitFileForm">确 定</el-button>
  117.         <el-button @click="upload.open = false">取 消</el-button>
  118.       </div>
  119.     </el-dialog>
  121.   </div>
  123. </template>
  125. <script>
  126. export default {
  127.   name: "User",
  128.   data(){
  129.     return {
  130.       tableData: [],
  131.       pageSize: 5,
  132.       total: 0,
  133.       pageNum: 1,
  134.       username: '',
  135.       address: '',
  136.       collapseBtnClass: 'el-icon-s-fold',
  137.       isCollapse: false,
  138.       sideWidth: 200,
  139.       logoTextShow: true,
  140.       headerBg: 'headerBg',
  141.       dialogFormVisible: false,
  142.       form: {},
  143.       // 遮罩层
  144.       loading: true,
  145.       // 选中数组
  146.       ids: [],
  147.       // 非单个禁用
  148.       single: true,
  149.       // 非多个禁用
  150.       multiple: true,
  151.       //用户导入参数
  152.       upload: {
  153.         //是否显示弹出层（用户导入）
  154.         open: false,
  155.         //弹出层标题（用户导入）
  156.         title: "",
  157.         //是否禁用上传
  158.         // isUploading: false,
  159.         //是否更新已经存在的用户数据
  160.         //updateSupport: 0,
  161.         //设置上传的请求头部
  162.         //headers: "",
  163.         //上传的地址
  164.         url: "http://localhost:9000/user/import",
  165.       },
  166.       roles: [],
  167.     }
  168.   },
  169.   created() {
  170.     this.getList();
  171.   },
  172.   methods: {
  173.     getList(){
  174.       this.loading = true;
  175.       this.request.get('/user/page',
  176.           {
  177.             params: {
  178.               pageNum: this.pageNum,
  179.               pageSize: this.pageSize,
  180.               username: this.username,
  181.               address: this.address
  182.             }
  183.           }
  184.       ).then(res => {
  185.         if(res.code === '200'){
  186.           this.tableData = res.data.records;
  187.           this.total = res.data.total;
  188.           this.loading = false;
  189.         }else{
  190.           this.$message.error(res.msg)
  191.         }
  193.       })
  195.       this.request.get('/role').then(res => {
  196.         if(res.code === '200'){
  197.           this.roles = res.data;
  198.         }else{
  199.           this.$message.error(res.msg)
  200.         }
  201.       })
  202.     },
  203.     handleSizeChange(val) {
  204.       this.pageSize = val;
  205.     },
  206.     handleCurrentChange(val) {
  207.       this.pageNum = val;
  208.       this.getList();
  209.     },
  210.     // 多选框选中数据
  211.     handleSelectionChange(selection) {
  212.       this.ids = selection.map(item => item.id);
  213.       this.single = selection.length != 1;
  214.       this.multiple = !selection.length;
  215.     },
  216.     // 重置按钮
  217.     resetQuery(){
  218.       this.username = undefined;
  219.       this.address = undefined;
  220.       this.getList();
  221.     },
  222.     // 新增
  223.     handleAdd(){
  224.       this.dialogFormVisible = true;
  225.       this.form = {};
  226.     },
  227.     save(){
  228.       this.request.post("/user",this.form).then(res => {
  229.         if(res.code === "200" || res.code === 200){
  230.           this.$message.success("操作成功")
  231.         }else {
  232.           this.$message.error("操作失败")
  233.         }
  234.         this.dialogFormVisible = false;
  235.         this.getList();
  236.       })
  237.     },
  238.     // 修改
  239.     handleUpdate(row){
  240.       // 表单置空
  241.       this.reset();
  242.       // 重新查询数据
  243.       const userId = row.id || this.ids;
  244.       this.request.get('/user/'+userId).then(response => {
  245.         this.form = response.data;
  246.         this.dialogFormVisible = true;
  247.       });
  248.     },
  249.     reset(){
  250.       this.form.username = undefined;
  251.       this.form.nickname = undefined;
  252.       this.form.email = undefined;
  253.       this.form.phone = undefined;
  254.       this.form.address = undefined;
  255.     },
  256.     // 删除
  257.     handleDelete(row){
  258.       let _this = this;
  259.       const userIds = row.id || this.ids;
  260.       this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项？', '删除用户', {
  261.         confirmButtonText: '确定',
  262.         cancelButtonText: '取消',
  263.         type: 'warning'
  264.       }).then(() => {
  265.         _this.request.delete("/user/"+userIds).then(res=>{
  266.           if(res.code === "200" || res.code === 200){
  267.             _this.$message.success("删除成功")
  268.           }else {
  269.             _this.$message.error("删除失败")
  270.           }
  271.           this.getList();
  272.         })
  273.       }).catch(() => {
  274.       });
  275.     },
  276.     // 导出
  277.     handleExport(){
  278.       window.open('http://localhost:9000/user/export');
  279.       this.$message.success("导出成功");
  280.     },
  281.     // handleImport(){
  282.     //   this.$message.success('导入成功')
  283.     //   this.getList()
  284.     // },
  285.     handleImport(){
  286.       this.upload.title = '用户导入'
  287.       this.upload.open = true
  288.     },
  289.     importTemplate(){
  290.       this.$message.success("正在下载模版");
  291.       window.open('http://localhost:9000/user/download')
  292.     },
  293.     //文件上传处理
  294.     handleFileUploadProgress(event,file,fileList){
  295.       //this.upload.isUploading = true;
  296.       this.loading = true;
  297.     },
  298.     //文件上传成功处理
  299.     handleFileSuccess(response,file,fileList){
  300.       this.loading = false;
  301.       this.upload.open = false;
  302.       // this.upload.isUploading = false;
  303.       this.$refs.upload.clearFiles();
  304.       this.$message.success("导入成功");
  305.       this.getList()
  306.     },
  307.     //提交上传文件
  308.     submitFileForm(){
  309.       this.$refs.upload.submit();
  310.     }
  311.   }
  312. }
  313. </script>
  315. <style scoped>
  317. </style>
复制代码
2.2 动态菜单设计

2.2.1 Login.vue

在登录乐成的时候将菜单存到欣赏器中
  1. <template>
  2.   <div class="wrapper">
  3.     <div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px">
  4.       <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>
  5.       <el-form :model="user" :rules="rules" ref="userForm">
  6.         <el-form-item prop="username">
  7.           <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
  8.         </el-form-item>
  9.         <el-form-item prop="password">
  10.           <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
  11.         </el-form-item>
  12.         <el-form-item style="margin: 10px 0; text-align: right">
  13.           <el-button type="primary" size="small"  autocomplete="off" @click="login">登录</el-button>
  14.           <el-button type="warning" size="small"  autocomplete="off" @click="$router.push('/register')">注册</el-button>
  15.         </el-form-item>
  16.       </el-form>
  17.     </div>
  18.   </div>
  19. </template>
  21. <script>
  22. export default {
  23.   name: "Login",
  24.   data() {
  25.     return {
  26.       user: {},
  27.       rules: {
  28.         username: [
  29.           { required: true, message: '请输入用户名', trigger: 'blur' },
  30.           { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  31.         ],
  32.         password: [
  33.           { required: true, message: '请输入密码', trigger: 'blur' },
  34.           { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  35.         ],
  36.       }
  37.     }
  38.   },
  39.   methods: {
  40.     login() {
  41.       this.$refs['userForm'].validate((valid) => {
  42.         if (valid) {  // 表单校验合法
  43.           this.request.post("/user/login", this.user).then(res => {
  44.             if(res.code === 200 || res.code === '200') {
  45.               localStorage.setItem('loginUser',JSON.stringify(res.data));
  46.               localStorage.setItem("menus",JSON.stringify(res.data.menus));
  47.               this.$router.push("/")
  48.               this.$message.success("登录成功")
  49.             } else {
  50.               this.$message.error(res.msg)
  51.             }
  52.           })
  53.         } else {
  54.           return false;
  55.         }
  56.       });
  57.     }
  58.   }
  59. }
  60. </script>
  62. <style>
  63. .wrapper {
  64.   height: 100vh;
  65.   background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB);
  66.   overflow: hidden;
  67. }
  68. </style>
复制代码
2.2.2 Aside.vue

侧边栏动态表现菜单
  1. <template>
  2.   <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
  3.            background-color="rgb(48, 65, 86)"
  4.            text-color="#fff"
  5.            active-text-color="#ffd04b"
  6.            :collapse-transition="false"
  7.            :collapse="isCollapse"
  8.            router
  9.   >
  10.     <div style="height: 60px; line-height: 60px; text-align: center">
  11.       <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
  12.       <b style="color: white" v-show="logoTextShow">后台管理系统</b>
  13.     </div>
  15.     <div v-for="item in menus" :key="item.id">
  16.       <!-- 一级菜单 -->
  17.       <div v-if="item.path">
  18.         <el-menu-item :index="item.path">
  19.           <template slot="title">
  20.             <i :class="item.icon"></i>
  21.             <span slot="title">{{ item.name }}</span>
  22.           </template>
  23.         </el-menu-item>
  24.       </div>
  25.       <!-- 二级菜单 -->
  26.       <div v-else>
  27.         <el-submenu :index="item.id+''">
  28.           <template slot="title">
  29.             <i :class="item.icon"></i>
  30.             <span slot="title">{{ item.name }}</span>
  31.           </template>
  32.           <div v-for="subItem in item.children" :key="subItem.id">
  33.             <el-menu-item :index="subItem.path">
  34.               <template slot="title">
  35.                 <i :class="subItem.icon"></i>
  36.                 <span slot="title">{{ subItem.name }}</span>
  37.               </template>
  38.             </el-menu-item>
  39.           </div>
  40.         </el-submenu>
  41.       </div>
  42.     </div>
  44.   </el-menu>
  45. </template>
  47. <script>
  48. export default {
  49.   name: "Aside",
  50.   props: {
  51.     isCollapse: Boolean,
  52.     logoTextShow: Boolean
  53.   },
  54.   data() {
  55.     return {
  56.       menus: localStorage.getItem('menus') ? JSON.parse(localStorage.getItem('menus')) : []
  57.     }
  58.   },
  60. }
  61. </script>
  63. <style scoped>
  65. </style>
复制代码
2.3 动态路由设计

为什么设置动态路由，这是由于没有其他页面权限的用户也是可以访问其他页面
如下图所示：
安其拉是平凡用户，只有主页的菜单权限（自己设置的角色所拥有的菜单）

2.3.1 菜单表新增字段page_path

对应每个页面组件名称
  1. CREATE TABLE `sys_menu` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  3.   `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  4.   `path` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '路径',
  5.   `page_path` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '页面路径',
  6.   `pid` int(11) DEFAULT NULL COMMENT '父级id',
  7.   `icon` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图标',
  8.   `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '描述',
  9.   `deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除',
  10.   PRIMARY KEY (`id`) USING BTREE
  11. ) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC
复制代码
2.3.2 路由设计

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import Manage from '../views/Manage.vue'
  4. import store from "@/store";
  6. Vue.use(VueRouter)
  7. //定义一个路由对象数组
  8. const routes = [
  9.   {
  10.     path: '/login',
  11.     name: '登录',
  12.     component: () => import('../views/Login.vue')
  13.   },
  14.   {
  15.     path: '/register',
  16.     name: '注册',
  17.     component: () => import('../views/Register.vue')
  18.   }
  20. ]
  22. //使用路由对象数组创建路由实例，供main.js引用
  23. const router = new VueRouter({
  24.   mode: 'history',
  25.   base: process.env.BASE_URL,
  26.   routes
  27. })
  29. // 注意：刷新页面会导致页面路由重置
  30. export const setRoutes = () => {
  31.   const storeMenus = localStorage.getItem("menus");
  32.   if (storeMenus) {
  34.     // 获取当前的路由对象名称数组
  35.     const currentRouteNames = router.getRoutes().map(v => v.name)
  36.     if (!currentRouteNames.includes('Manage')) {
  37.       // 拼装动态路由
  38.       const manageRoute = { path: '/', name: 'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
  39.           { path: 'person', name: '个人信息', component: () => import('../views/Person.vue')},
  40.           // { path: 'password', name: '修改密码', component: () => import('../views/Password.vue')}
  41.         ] }
  42.       const menus = JSON.parse(storeMenus)
  43.       menus.forEach(item => {
  44.         if (item.path) {  // 当且仅当path不为空的时候才去设置路由
  45.           let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'),meta: { title: item.name }}
  46.           manageRoute.children.push(itemMenu)
  47.         } else if(item.children.length) {
  48.           item.children.forEach(item => {
  49.             if (item.path) {
  50.               let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'),meta: { title: item.name }}
  51.               manageRoute.children.push(itemMenu)
  52.             }
  53.           })
  54.         }
  55.       })
  56.       // 动态添加到现在的路由对象中去
  57.       router.addRoute(manageRoute)
  58.     }
  60.   }
  61. }
  63. // 重置我就再set一次路由
  64. setRoutes()
  67. // 路由守卫
  68. // router.beforeEach((to, from, next) => {
  69. //   localStorage.setItem('currentPathName',to.name);   // 设置当前的路由名称，为了在Header组件中去使用
  70. //   store.commit('setPath')    // 触发store的数据更新
  71. //   next()   // 放行路由
  72. // })
  74. export default router
复制代码
2.3.3 登录界面Login.vue设置路由

改动登录页面在乐成登录时，设置路由
  1. // 导入
  2. import {setRoutes} from "@/router";
  4. // 当登录成功时，同时设置路由
  5. localStorage.setItem("user",JSON.stringify(res.data));  //存储用户信息到浏览器
  6. localStorage.setItem("menus",JSON.stringify(res.data.menus));  //存储菜单到浏览器
  7. setRoutes();
  8. this.$router.push("/");
  9. this.$message.success("登录成功");
复制代码
总结



  • 本篇主要讲解动态菜单和动态路由的设计与实现
写在最后

假如此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时复兴。
文章会一直更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

去皮卡多

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表