当前位置：首页 > news >正文

门户网站字体/seo外包公司兴田德润官方地址

news 文章来源：https://blog.csdn.net/m0_46590717/article/details/140768303 2025/3/23 20:30:09

门户网站字体,seo外包公司兴田德润官方地址,卖网站模板赚钱吗,西安做网站公司必达nodemysqllayuiejs实现左侧导航菜单动态显示实现思路效果图数据库技术栈代码实现main.html（前端首页页面）查询资源菜单方法 jsapp.js配置ejs模板 node入门到入土项目实战开始，前端篇项目适合node小白入门，因为我也是小白来学习no…

node+mysql+layui+ejs实现左侧导航菜单动态显示

- - 实现思路
  - 效果图
  - 数据库
  - 技术栈
  - 代码实现
  - - main.html（前端首页页面）
    - 查询资源菜单方法 js
    - app.js配置ejs模板

node入门到入土项目实战开始，前端篇项目适合node小白入门，因为我也是小白来学习node前端的，代码不是很简洁，优雅，各位读者多多包涵一下。

实现思路

账户表中编写一个字段，role_id（字段）用来存储该账户所拥有的相关角色权限，然后创建资源表用来存储相关项目的菜单资源，创建角色权限表用来存储相关的角色权限，创建角色权限资源中间表用来存储每个角色拥有哪些资源。
账户在登陆界面输入账户相关信息进行登录时查询该数据库中的相关账户是否存在如果存在且登录成功则将该账户的角色id值提取出来进行菜单资源查询，查询成功以后跳转到系统首页，如果该账户角色id为空或者该角色下没有任何资源菜单时跳转至账户授权提示页面。

效果图

在这里插入图片描述

数据库

这里用到四个表进行导航资源的动态显示，资源表（tb_resource),角色表（tb_role)
角色资源中间表（tb_rolr_resource),账户表（tb_account）
在这里插入图片描述

技术栈

node.js
layui
layui(消息插件notify)
mysql2
ejs
Express

代码实现

main.html（前端首页页面）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>暖意书栈-首页</title><!-- 设置系统图标 --><link rel="shortcut icon" href="../icon/main.ico" type="image/x-icon" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="../layui/css/layui.css" rel="stylesheet"><link href="../css/main.css" rel="stylesheet"></head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black"><i class="layui-icon layui-icon-read" style="color: #cff60cd3;font-size: 22px;"></i><strong style="font-family: 华文行楷;font-size: 25px; color: #a6b5afd3;">暖意书栈</strong> </div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">书籍借阅</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">座位预约</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">贴吧</a></li><li class="layui-nav-item"><a href="javascript:;">更多</a><dl class="layui-nav-child"><dd><a href="javascript:;">意见反馈</a></dd><dd><a href="javascript:;">违规处理</a></dd><dd><a href="javascript:;">联系我们</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="../image/admin.jpeg" class="layui-nav-img">我的</a><dl class="layui-nav-child"><dd><a href="javascript:;">我的资料</a></dd><dd><a href="javascript:;">我的借阅</a></dd><dd><a href="javascript:;">我的预约</a></dd><dd><a href="javascript:;">安全管理</a></dd><dd><a href="javascript:;">退出登录</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-notice"></i> 通知/公告</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree" lay-filter="test"><% Object.keys(navItems).forEach(parentId => { %><% if (parentId === "0") { %><% navItems[parentId].forEach(item => { %><li class="layui-nav-item"><a data-id="<%= item.re_id %>"><i class="layui-icon <%= item.re_icon %>"></i><span> <%= item.re_title %></span></a><% if (navItems[item.re_id] && navItems[item.re_id].length > 0) { %><dl class="layui-nav-child"><% navItems[item.re_id].forEach(subItem => { %><dd><a data-id="<%= subItem.re_id %>" data-url="<%= subItem.re_url %>"  href="javascript:void(0);"><i class="layui-icon <%= subItem.re_icon %>"></i> <%= subItem.re_title %></a></dd><% }) %></dl><% } %></li><% }) %><% } %><% }) %></ul></div></div><div class="layui-body layui-form"><div class="layui-tab marg0 layui-tab-brief" lay-filter="bodyTab" id="top_tabs_box" lay-allowclose="true"><ul class="layui-tab-title top_tab" id="top_tabs"><li class="layui-this" lay-allowclose="false"><i class="layui-icon layui-icon-home"></i><cite>首页</cite></li></ul><!-- 当前页面操作 --><ul class="layui-nav closeBox"><li class="layui-nav-item"><a href="javascript:;">页面操作</a><dl class="layui-nav-child"><dd><a href="javascript:;" class="refresh refreshThis"><i class="layui-icon layui-icon-refresh-3"></i> 刷新当前</a></dd><dd><a href="javascript:;" class="closePageOther"><i class="layui-icon layui-icon-clear"></i> 关闭其他</a></dd><dd><a href="javascript:;" class="closePageAll"><strong><i class="layui-icon layui-icon-close"></i></strong> 关闭全部</a></dd></dl></li></ul><div class="layui-tab-content clildFrame"><div class="layui-tab-item layui-show"><iframe src="/index"></iframe></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div>
<script src="../jquery/jquery-3.7.1.min.js"></script>
<script src="../layui/layui.js"></script>
<script src="../notify/notify.js"></script>
<script>
//JS 
layui.use(['element', 'layer', 'util','notify'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;var $ = layui.$;var notify = layui.notify;// 监听左侧导航的二级菜单点击事件$('.layui-nav .layui-nav-child').on('click', 'a[data-url]', function(e) {e.preventDefault(); // 阻止默认行为，避免页面跳转var $this = $(this),// 获取当前点击的a元素tabTitle = $this.text().trim(),// 获取当前点击的a元素的文本内容tabId = $this.data('id'),// 获取当前点击的a元素的data-id属性tabUrl = $this.data('url');// 获取当前点击的a元素的data-url属性// 检查是否已经有此tabvar hasTab = $('#top_tabs li').filter(function() {return $(this).find('cite').text() === tabTitle;// 使用filter方法筛选出匹配的元素});if (!hasTab.length) {// 如果没有，则添加新的tabelement.tabAdd('bodyTab', {// 调用element.tabAdd方法添加新的tabtitle: '<cite>' + tabTitle + '</cite>',// 设置tab的标题content: '<iframe src="' + tabUrl + '" frameborder="0" scrolling="auto"></iframe>',// 设置tab的内容id: tabId // 设置tab的id});}// 切换到该tabelement.tabChange('bodyTab', tabId);// 调用element.tabChange方法切换到该tab});//点击刷新当前$(".refresh").on("click",function(){  //if($(this).hasClass("refreshThis")){// 判断是否是点击刷新当前$(this).removeClass("refreshThis");// 移除refreshThis类// 获取当前页面的iframe元素，并调用其contentWindow属性的location属性的reload方法刷新页面$(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload(true);setTimeout(function(){$(".refresh").addClass("refreshThis");// 添加refreshThis类},2000)}else{notify.info({msg:'您点击的速度超过了服务器的响应速度，还是等两秒再刷新吧！',position:'vcenter',shadow:true, closable:false,duration:1500});}});// 当点击 ".closePageOther" 元素时触发此事件处理程序,关闭其他 就是把除了当前窗口意外的其他窗口关闭 首页除外$(".closePageOther").on("click", function () {// 获取当前激活的标签页（即被选中的标签页）var $currentTab = $("#top_tabs li.layui-this"),// 从当前激活的标签页中获取标题文本currentTitle = $currentTab.find("cite").text(),// 从 sessionStorage 中获取名为 "menu" 的数据，并将其解析为 JavaScript 对象// 如果 sessionStorage 中没有 "menu" 数据，则使用空数组menu = JSON.parse(window.sessionStorage.getItem("menu")) || [],// 计算非首页的标签页数量nonHomeTabsCount = $("#top_tabs li:not(.layui-this)").not("[cite='首页']").length;// 如果当前标签页是 "首页" 并且存在其他非首页标签页if (currentTitle === "首页" && nonHomeTabsCount > 0) {// 关闭所有其他非首页标签页，并清空 sessionStorage$("#top_tabs li[lay-id]").not(".layui-this").each(function() {// 获取当前标签页的 "lay-id" 属性值var layId = $(this).attr("lay-id");// 使用 "element.tabDelete" 方法删除当前标签页，并调用 "init" 方法刷新界面element.tabDelete("bodyTab", layId).init();});// 清除 sessionStorage 中的所有数据sessionStorage.clear();} else if (currentTitle !== "首页" && nonHomeTabsCount > 1) { // 如果当前不是首页并且存在其他非首页标签页// 关闭所有其他非当前标签页$("#top_tabs li[lay-id]").not(".layui-this").each(function() {// 获取当前标签页的 "lay-id" 属性值var layId = $(this).attr("lay-id");// 使用 "element.tabDelete" 方法删除当前标签页，并调用 "init" 方法刷新界面element.tabDelete("bodyTab", layId).init();});// 更新 sessionStorage 中的 "menu" 数组，只包含当前标签页的信息// 使用 Array.prototype.filter 方法过滤数组，只保留当前标签页的项menu = menu.filter(item => item.title === currentTitle);// 将更新后的 "menu" 数组保存回 sessionStoragesessionStorage.setItem("menu", JSON.stringify(menu));} else {// 如果只剩下首页和当前页面时，显示提示信息notify.info({msg: '没有可以关闭的窗口了哦！',position: 'vcenter', // 提示信息的位置设置为中心shadow: true, // 是否启用阴影效果closable: false, // 是否允许手动关闭提示信息duration: 1000 // 提示信息显示的持续时间（毫秒）});}// 调用 "tab.tabMove" 方法重新渲染顶部的标签页tab.tabMove();});//关闭全部窗口 只留下 首页$(".closePageAll").on("click",function(){if($("#top_tabs li").length > 1){$("#top_tabs li").each(function(){if($(this).attr("lay-id") != ''){element.tabDelete("bodyTab",$(this).attr("lay-id")).init();window.sessionStorage.removeItem("menu");menu = [];window.sessionStorage.removeItem("curmenu");}})}else{notify.info({msg:'没有可以关闭的窗口了!',position:'vcenter',shadow:true, closable:false,duration:1000});}//渲染顶部窗口tab.tabMove();})
});
</script>
</body>
</html>

查询资源菜单方法 js