前台菜单从数据库动态获取

一、简单阐述一下

偶是一个小白，刚从事工作，很多技术都是抓瞎，感觉....咳咳。步入正题，前段时间经理给布置了一个小活，说是让从数据库把菜单信息获取出来，我一想这不是很简单嘛，在前台页面把数据写上去就行了。过了一会我同事提醒我说，经理的意思是让你从数据库获取出来以后拼接出来显示在菜单的位置....然后就剩下一脸懵逼的我，开始上网找例子，看了个例子之后终于明白了。菜单信息在一张表里面放着，里面有父菜单、子菜单、图标等等这些字段，下面展示出我的鼠标焦点放到父菜单上面显示子菜单信息。

上面为要展示出来的样式，下面给上代码示例：

前台页面html(页面使用的是bootstrap的框架):

这里我只截取了菜单的前台代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>导航菜单/title>

<!--
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}"/>

</head>
<body>

<div class="nav-main">
    <div class="nav-box">
        <div class="nav">
            
            <ul class="nav-ul" id="pmenuid">
                <li><a href="main" class="home"><span><i class="icon-home"></i> 首页</span></a></li>
            </ul>
            
        </div>
        <div class="nav-slide" id="menuid">
            <div class="nav-slide-o"></div>
        </div>
    </div>
</div>



<script type="text/javascript" src="/js/jquery-2.1.1.min.js}"></script>

</body>
</html>

以上是我截取的一部分代码，page-menu里面有我引用的样式，有兴趣的可以在

这个文档里面看一下样式布局。

下面展示menu.js文件(记得要调用自己写的js文件):

点击打开链接这个文档里面看一下样式布局。

下面展示menu.js文件(记得要调用自己写的js文件):

$.ajax({
        cache: true,
        type: "POST",
        url: BaseUrl + '/api/getMenuInfo, //调用自己本地写的接口，如果穿参数了,在getMenuInfo?+参数
        dataType: "json",    //传入的数据类型是：json
        success: function (data) { //这的data是接口查出来返回的数据
            var html = "";

//定义一个空数据，从数据库动态获取的话，一个数组是没有办法取出子菜单信息的，用两个数组进行遍历
var array = [];

var ul = "";

//我的菜单最顶层数据库给的是null，这里用null进行判断，若父菜单等于null的时候，则这个父菜单的子菜单就是一级目录，就是这里的子菜单已经是最顶级的了，变成了父菜单

for (var i = 0; i < data.length; i++) {
if (data[i].menupid == null) {

//定义一个menuPid，将子菜单的值赋值给menuPid，这里menuPid是真正的父菜单

var menuPid = data[i].menuid;

//这里的html不是页面，单纯的定义一个字段，里面遍历了拼接的li标签，这里面写的就是拼接的过程
html += '<li><a href="#" class="parentMenu" id="' + data[i].menuid + '"><span><i class="' + data[i].icon + '"></i>' + data[i].menuname + '</span></a></li>';

//因为要显示出前面跳出来图片的样式，所以在这便利了子菜单的<div></div>标签

ul += '<div class="nav-slide-o"><ul id="pid' + data[i].menuid + '"></ul></div>';

//将父菜单赋值给这个空数组array，这个array现在里面的值全部都是父菜单信息
                    array.push(menuPid);
                }
            }

//因为我前台定义的是ul的id，所以把遍历出来的父菜单信息塞给前台的ul标签，到时候就需要写前台里面的li了，直接

是上面拼接出来的一个<li></li>,这里就是从数据库动态取出来的父菜单信息
$("#pmenuid").append(html);

   //这是将遍历出来的子菜单信息塞到前台页面的div中
            $("#menuInfo").append(ul);
            var url = "";

//子菜单跟父菜单是一一对应的关系所以这里将通过父菜单取出子菜单，并且将子菜单放入到父菜单的节点下
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < array.length; j++) {    //array.length是父菜单的长度
                    if (data[i].menupid == array[j]) {

   //url是我拼接出来的子菜单信息，并且将子菜单放入到父菜单的节点下
                        url += $("#pid" + array[j] + "").append(
                            '<li><a class="childMenu" onclick="changeCont("' + data[i].menuUrl + '")"><span>' + data[i].menuname + '</span></a></li>'
                        );
                    }
                }
            }
        }
    });

当时，拼接成功了以后，但是就是样式没出来，打断点跟了好长时间代码都没找到原因，最后是把引用的js文件调换了一个顺序，先加载菜单信息，然后在加载菜单的样式，有一个先后顺序(如果以后遇到了类似的这种问题，可以尝试着这样解决一下),

为了方便，上面的代码我没有加样式，就是单纯的把代码复制过来，动态获取字符串大致就是这么一个思路！希望给别人有所帮助。

前台菜单从数据库动态获取

一、简单阐述一下

猜你喜欢