springboot + layui + vue 实现多级菜单

菜单表

drop database if exists `test`;

create database `test`;

use `test`;

drop table if exists t_menu;
create table t_menu(
    `id` int NOT NULL AUTO_INCREMENT comment '菜单ID',
    `name` varchar(20),
    `url` varchar(200),
    `icon` varchar(100),
    `parent_id` int comment '父菜单ID',

    `create_by` int not null,
    `create_time` datetime not null,

    `update_by` int not null,
    `update_time` datetime not null,
    `status` int,
    `sort` int,
    PRIMARY KEY (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_bin COMMENT = '菜单表';

-- 插入菜单记录
INSERT INTO t_menu (`name`, `url`, `icon`, `parent_id`, `create_by` , `create_time`, `update_by`, `update_time`, `status`, `sort`)
VALUES
('设置', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('app用户', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('web用户', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('角色管理', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('控制台', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('主页管理', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('主页一', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1),
('主页二', NULL, NULL, NULL, 1 , now(), 1, now(), -1, 1);

mvn命令创建工程

# Java应用：
mvn archetype:generate -DinteractiveMode=false -DgroupId=com.example -DartifactId=demo -Dversion=1.0.0-SNAPSHOT -DarchetypeArtifactId=maven-archetype-quickstart

# Web Project：
mvn archetype:generate -DinteractiveMode=false -DgroupId=com.example -DartifactId=demo -Dversion=1.0.0-SNAPSHOT -DarchetypeArtifactId=maven-archetype-webapp

pom.xml


    4.0.0
    com.example
    demo
    jar
    1.0.0-SNAPSHOT

    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.1.RELEASE
        
    

    
        UTF-8
        UTF-8
        1.8
        1.3.2
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            ${mybatis.version}

实体类 Menu.java

public class Menu {

  private String id;
  private String name;
  private String url;
  private String icon;

  private String parent_id;
  private String parent_name;

  private String status;
  private String sort;

  private long create_by;
  private long update_by;

  private String create_time;
  private String update_time;

  private List childMenus;

}

Controller 层

@Controller
@RequestMapping("/menu")
public class MenuController {

  @Autowired
  private UserService userService;

  
  @ResponseBody
  @RequestMapping(value = "/list",method = RequestMethod.GET)
  public ResponseEntity list(String username, String password) {

    // 获取一级菜单
    List rootMenus = userService.queryAllMenus();
    // for调用递归，循环获取所有子菜单
    for (Menu menu : rootMenus) {
      menu.setChildMenus(getChildMenus(menu.getId(), rootMenus));
    }
    //存储所有菜单，将数据回传至 layui 前端
    map.put("menus", menuList);

    return ResponseEntity.success(map.size(),map);
  }

  
  private List getChildMenus(String id, List parentMenus) {
    // 子菜单
    List childMenus = new ArrayList<>();
    for (Menu item : parentMenus) {
      if (StringUtils.isNotBlank(item.getParentId())) {
        if (item.getParentId().equals(id)) {
          childMenus.add(item);
        }
      }
    }

    for (Menu item : childMenus) {
      //数据库动态存储菜单的url,此时判断url为空的，则是节点菜单（存在子菜单）
      if (StringUtils.isBlank(item.getUrl())) {
        // 递归调用
        item.setChildMenus(getChildMenus(item.getId(), parentMenus));
      }
    }
    if (childMenus.size() == 0) {
      return null;
    }
    return childMenus;
  }
}

service 层

public interface UserService {
  //获取所有菜单
  List queryAllMenus();
}

service 实现层

@Service("userService")
public class UserServiceImpl implements UserService {

  @Autowired
  private UserMapper userMapper;

  @Override
  public List queryAllMenus() {
    return userMapper.queryAllMenus();
  }
}

dao 层

public interface UserMapper {
  List queryAllMenus();
}

mybatis

前端使用 layui.js、vue.js，html + js 如下：


  
    
      
        
        {{ menu.menu_name }}
      
      
        
          
            {{ child.menu_name }}

参考

springboot + layui + vue 实现多级菜单

Java相关栏目本月热门文章