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

最新推荐文章于 2024-06-24 01:54:50 发布

妖冶迷人醉

最新推荐文章于 2024-06-24 01:54:50 发布

阅读量7.9k

点赞数 5

分类专栏： web小技巧

本文链接：https://blog.csdn.net/love_xuanxuan/article/details/79088740

版权

本文介绍了作者如何从数据库动态获取菜单信息并将其在前端页面上显示。通过使用Bootstrap框架，作者展示了部分HTML代码和JavaScript代码片段，说明了菜单信息的获取和拼接过程，并提到了样式加载的顺序问题，对于遇到类似问题的开发者具有参考价值。

摘要由CSDN通过智能技术生成

一、简单阐述一下

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

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

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

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

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

     <!-- 设置文档编码 -->  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <!-- 这个是引入bootstrap,按照自己本地路径修改就可以