从数据库动态加载菜单栏
来源:互联网 发布:手机淘宝怎么备注留言 编辑:程序博客网 时间:2024/05/29 15:57
从数据库动态加载菜单栏
最近组内有个技术学习项目—用Python写一个Web站点,我领取的任务是将站点菜单可配置,从数据库中读取数据,然后动态构建。
基本的思路是这样:把需要显示的菜单数据存储在数据库,页面加载的时候,JS从后台读取数据,在前端构建Dome并正确显示。
第一步:设计数据库
1.1.数据库字段设计
ID:菜单节点记录唯一识别字段,设为主键
Name:菜单节点的名称
ShowName:菜单节点在前端显示的名称
IshasSon:是否有子节点,为了处理菜单层级不确定的问题
ParentId:父节点的ID
NodeUrl:菜单节点对应的跳转URL
IsNewBlank:是否在新窗口打开,内/外站点打开的方式不同
CreatTime:菜单记录的创建时间
menu数据库设计图:
1.2 数据库读取:
创建py文件dbMenu,导入数据库连接方法(具体方法可参见我的另一篇博客Python连接MySql数据库),获取数据库连接句柄后查询数据库,获取所有的数据库记录。代码如下:
from config import Configfrom app.db.dbBase import DBConnectimport pymysql.cursorsclass DBMenu: @staticmethod def get_nodes(): conn = DBConnect().db_connect(Config().DATABASE_MAIN) cursor = conn.cursor(pymysql.cursors.DictCursor) cursor.execute("select * from menu") menus = cursor.fetchall() cursor.close() conn.close() return menus @staticmethod def get_sonnodes(node_id): conn = DBConnect().db_connect(Config().DATABASE_MAIN) cursor = conn.cursor(pymysql.cursors.DictCursor) cursor.execute("select * from menu where `parent_id` = %s", node_id) sonmenus = cursor.fetchall() cursor.close() conn.close() return sonmenusget_nodes()是一个获取所有菜单节点的方法,用来构建根菜单;get_sonnodes()是一个根据当前节点ID获取其子节点菜单的方法,用来构建子菜单
第二步:读取数据库菜单记录,动态构建菜单
2.1 Controler 层实现获取数据方法:
创建py文件cMenu,实现获取数据方法,封装数据源,代码如下:
from app.db.dbMenu import DBMenuclass CMenu: @staticmethod def get_menu(): menus = DBMenu.get_nodes() return menus @staticmethod def get_sonmenu(node_id): sonmenu = DBMenu.get_sonnodes(node_id) return sonmenu
2.2 View层把数据传递给Html模版文件:
创建py文件menu,把封装好的数据传递给模版文件,代码如下:
# This Python file uses the following encoding: utf-8from flask import requestfrom app.controler.cMenu import CMenufrom flask import Blueprintfrom flask import jsonifycommonBp = Blueprint('common', __name__, url_prefix='/common')@commonBp.route('/getSonMenu', methods=['GET'])def get_sonmenu(): parentid = request.args.get('parentId') node = CMenu.get_sonmenu(int(parentid)) return jsonify(node)@commonBp.route('/getmenu')def base(): menus_node = CMenu.get_menu() size = len(menus_node) return jsonify(menus_node=menus_node, size=size)
2.3 Html模版文件前端构建页面内容:
创建base.html文件,构建前端Html,代码如下:
<nav id="Hui-nav" class="nav navbar-nav"> <ul class="cl" id="ulmenu"> </ul></nav>
2.4 JS动态加载菜单:
创建my.js,JS脚本动态加载菜单,代码如下:
$(document).ready(function () { function getRootmenu() { $.ajax({ type: "get", dataType: "json", url: "/common/getmenu", success: function (data) { var m = ""; if (data.size > 0) { for (j = 0; j < data.size; j++) { if (data.menus_node[j].parent_id == -1) { if (data.menus_node[j].ishas_son == 1) { m = m + "<li roletype='2' id='" + data.menus_node[j].node_id + "' class='dropDown dropDown_hover'>" + "<a class='dropDown_A' href='" + data.menus_node[j].node_url + "'>" + data.menus_node[j].node_showname + "<i class='Hui-iconfont' >" + '' + "</i></a></li>"; } else { m = m + "<li roletype='2' id='" + data.menus_node[j].node_id + "' class='dropDown dropDown_hover'>" + "<a class='dropDown_A' href='" + data.menus_node[j].node_url + "'>" + data.menus_node[j].node_showname + "</a></li>"; } } } } $('#ulmenu').html(m); $("#ulmenu li").bind('mouseover', function (e) { getSonMenu(this, e) }); } }); } getRootmenu(); function getSonMenu(event) { var parentId = $(event).attr("id"); var roletype = $(event).attr("roletype"); if (roletype == "2") $(event).addClass("hover open"); if (roletype == "1") $(event).addClass("open"); if ($(event).find("li").length > 0 || roletype == "0") return; $.ajax({ type: "get", dataType: "json", url: "/common/getSonMenu?parentId=" + parentId, success: function (result) { var parentId = $(event).attr("id"); $('#' + parentId).html($('#' + parentId + ' >a')) // $('#'+parentId).html(""); var a = "<ul class='dropDown-menu menu radius box-shadow'>"; var b = "</ul>"; var c = ""; $.each(result, function (i) { if(result[i].isnewblank == 1 && result[i].ishas_son == 1) { c = c + "<li roletype='" + result[i].ishas_son + "' id=" + result[i].node_id + "><a href='" + result[i].node_url + "' target='_blank'>" + result[i].node_showname + "<i class='arrow Hui-iconfont'></i></a></li>"; } if(result[i].isnewblank == 1 && result[i].ishas_son == 0){ c = c + "<li roletype='" + result[i].ishas_son + "' id=" + result[i].node_id + "><a href='" + result[i].node_url + "' target='_blank'>" + result[i].node_showname + "</a></li>"; } if(result[i].isnewblank == 0 && result[i].ishas_son == 1){ c = c + "<li roletype='" + result[i].ishas_son + "' id=" + result[i].node_id + "><a href='" + result[i].node_url + "'>" + result[i].node_showname + "<i class='arrow Hui-iconfont'></i></a></li>"; } if(result[i].isnewblank == 0 && result[i].ishas_son == 0){ c = c + "<li roletype='" + result[i].ishas_son + "' id=" + result[i].node_id + "><a href='" + result[i].node_url + "'>" + result[i].node_showname + "</a></li>"; } }); $('#' + parentId).append(a + c + b); $("#ulmenu li").unbind('mouseover'); $("#ulmenu li").bind('mouseover', function (e) { getSonMenu(this, e) }); }, error: function (result) { alert(result.responseText); } }); }});记得要在Html文件中引用一下Js
<script type="text/javascript" src="/static/js/my.js"></script>
第三步:运行项目,打开浏览器看下效果:
Done!
0 0
- 从数据库动态加载菜单栏
- 从数据库读出数据动态生成菜单栏
- Flex HBox从数据库动态加载背景图片
- Easyui tree 从数据库中动态加载数据
- AJAX autocomplete 动态补全从数据库加载数据
- 前端框架 zTree 从数据库中动态加载树形菜单
- Easyui tree 从数据库中动态加载数据(2)
- 从数据库获取数据动态加载给echarts饼图
- 动态菜单栏
- C# WinForm利用sideBar动态加载菜单栏,并创建菜单栏事件
- 从Assets加载数据库
- Ajax动态加载数据库
- 求Struts中html:select从Sql Server数据库动态加载数据
- 前端框架 (一)zTree 从数据库中动态加载树形菜单
- 关于在struts2中利用jquery中如何动态从数据库中加载图片并显示
- IE8下播放音频,使用embed标签从数据库动态加载src
- 前端框架 (一)zTree 从数据库中动态加载树形菜单
- 菜单栏图片加载
- OJ习题acm求数列的和
- CF_671B Robin Hood(二分)
- HDU 1008
- Web框架梳理:第二章:Hibernate入门、Hibernate关系映射和查询、hibernate注解开发
- linux查看防火墙状态及开启关闭命令
- 从数据库动态加载菜单栏
- 带翻页标志的横向滑动GridView
- PAT(basic level) 1039 到底买不买(20)
- Longest Substring Without Repeating Characters
- jq基础笔记
- 【C/C++】报错问题积累
- linux技术进阶蓝图纲要
- 关于重构的一点体会
- RT-Thread 基于STM32F1xx HAL 库的学习笔记(2)---加入pin功能支持