SpringBoot+LayUI動態展示側邊導航欄

採用springboot+mybatis+layui搭建一個動態的側邊導航欄

1.動態展示導航欄的數據如下圖

json數據

思想：前端使用layui的標籤屬性獲取到數據，用js進行拼接，展示到頁面

2.主要頁面代碼

NavigationController.java

package layui.demo.controller;

import layui.demo.service.NavigationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Map;

@Controller
@RequestMapping("/navigation")
public class NavigationController {

    @Autowired
    NavigationService navigationService;

    @GetMapping("/findMenu")
    @ResponseBody
    public Map<String,Object> findMenu(){
        Map<String, Object> data = navigationService.findMenu();
        return data;
    }

}

NavigationService.java

package layui.demo.service;

import java.util.Map;

public interface NavigationService {
    public Map<String,Object> findMenu();
}

NavigationServiceImpl.java

package layui.demo.service.impl;

import layui.demo.dao.NavigationMapper;
import layui.demo.pojo.Navigation;
import layui.demo.service.NavigationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service
public class NavigationServiceImpl implements NavigationService {

    @Autowired
    NavigationMapper navigationMapper;

    public Map<String,Object> findMenu(){
        Map<String,Object> data = new HashMap<>();
        //按照pid獲取到根目錄進行存儲對應的子目錄
        List<Navigation> navId = navigationMapper.getNavigationByPid();
        for(Navigation nav : navId){
            List<Navigation> navigationListByPId = navigationMapper.getnavigationListByPId(nav.getId());
            nav.setChildrens(navigationListByPId);
        }
        data.put("menu",navId);
        return data;

    }

}

NavigationMapper.java

package layui.demo.dao;

import layui.demo.pojo.Navigation;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface NavigationMapper {
    List<Navigation> getnavigationListByPId(@Param("pid") Integer pid);
    List<Navigation> getNavigationByPid();
}

Navigation.java

package layui.demo.pojo;

import java.util.List;

public class Navigation {
    private Integer id;

    private String name;

    private Integer pid;

    private String pname;

    private String descpt;

    private String url;

    private String createTime;

    private String updateTime;

    private Integer delFlag;

    List<Navigation> childrens;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getPid() {
        return pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public String getDescpt() {
        return descpt;
    }

    public void setDescpt(String descpt) {
        this.descpt = descpt;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getCreateTime() {
        return createTime;
    }

    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }

    public String getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(String updateTime) {
        this.updateTime = updateTime;
    }

    public Integer getDelFlag() {
        return delFlag;
    }

    public void setDelFlag(Integer delFlag) {
        this.delFlag = delFlag;
    }

    public List<Navigation> getChildrens() {
        return childrens;
    }

    public void setChildrens(List<Navigation> childrens) {
        this.childrens = childrens;
    }
}

Navigation.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="layui.demo.dao.NavigationMapper">
    <resultMap id="BaseResultMap" type="layui.demo.pojo.Navigation">
        <!--
          WARNING - @mbg.generated
        -->
        <id column="id" jdbcType="INTEGER" property="id" />
        <result column="name" jdbcType="VARCHAR" property="name" />
        <result column="pid" jdbcType="INTEGER" property="pid" />
        <result column="descpt" jdbcType="VARCHAR" property="descpt" />
        <result column="url" jdbcType="VARCHAR" property="url" />
        <result column="create_time" jdbcType="VARCHAR" property="createTime" />
        <result column="update_time" jdbcType="VARCHAR" property="updateTime" />
        <result column="del_flag" jdbcType="INTEGER" property="delFlag" />
    </resultMap>


    <select id="getnavigationListByPId" resultType="layui.demo.pojo.Navigation">
        SELECT id,name,pid,url FROM base_admin_permission  WHERE pid = #{pid}
    </select>

    <select id="getNavigationByPid" resultType="layui.demo.pojo.Navigation">
        SELECT * FROM base_admin_permission WHERE pid = 0;
    </select>



</mapper>

home.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--head部分-->
<head th:include="layout :: htmlhead" th:with="title='海韻後臺管理'">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--頭-->
    <div th:replace="fragments/head :: header"></div>

    <!--主體區域-->
    <div class="layui-body">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs9">
                    &nbsp;
                    <h1 style="padding-top:50px;line-height:2.0;"><shiro:principal property="sysUserName"></shiro:principal>歡迎登錄
                        <span style="font-weight: bold;font-size:28px;">後臺管理系統</span></a></h1>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>

head.js

/**
 * 菜單
 * */
$(function(){
    layui.use('element', function(){
        var element = layui.element;
        // 左側導航區域（可配合layui已有的垂直導航）
        $.get("/navigation/findMenu",function(data){
            if(data!=null){
                getMenus(data.menu);
                element.render('nav');
            }else{
                layer.alert("權限不足，請聯繫管理員",function () {
                    //退出
                    window.location.href="/logout";
                });
            }
        });
    });
})
var getMenus=function(data){
    //回顯選中
    var ul=$("<ul class='layui-nav layui-nav-tree' lay-filter='test'></ul>");
    for(var i=0;i < data.length;i++){
        var node=data[i];
        var li=$("<li class='layui-nav-item' flag='"+node.id+"'></li>");
        var a=$("<a class='' href='javascript:;'>"+node.name+"</a>");
        li.append(a);
        //獲取子節點
        var childArry = node.childrens;
        if(childArry.length>0){
            a.append("<span class='layui-nav-more'></span>");
            var dl=$("<dl class='layui-nav-child'></dl>");
            for (var y in childArry) {
                var dd=$("<dd><a href='"+childArry[y].url+"'>"+childArry[y].name+"</a></dd>");
                //判斷選中狀態
                if(pathUri.indexOf(childArry[y].url)>0){
                    li.addClass("layui-nav-itemed");
                    dd.addClass("layui-this")
                }
                dl.append(dd);
            }
            li.append(dl);
        }
        ul.append(li);
    }
    $(".layui-side-scroll").append(ul);
}
//根據菜單主鍵id獲取下級菜單
//id：菜單主鍵id
//arry：菜單數組信息
function getParentArry(id, arry) {
    var newArry = new Array();
    for (var x in arry) {
        if (arry[x].pId == id)
            newArry.push(arry[x]);
    }
    return newArry;
}



function updateUsePwd(){
    layer.open({
        type:1,
        title: "修改密碼",
        fixed:false,
        resize :false,
        shadeClose: true,
        area: ['450px'],
        content:$('#pwdDiv')
    });
}

頁面

完整代碼看githudhttps://github.com/lphx/layui_demo

有用的可以給我一顆星