如何进行js后台框架搭建（树形菜单，面包屑，全屏功能，刷新功能，监听页面刷新功能）

框架功能是后台高亮不可缺少的功能，基本上所有的后台都需要框架功能，下面是我制作好的一个效果图

下面是我的框架里面功能的具体讲解，还有完整的代码示例

1.声明的变量

// 声明一个用于判断个人信息显示变量
let myes = 0;
// 声明一个用于切换树形菜单状态的变量
let picture = 2;
// 声明一个用于判断信息显示变量
let info = 0;// 声明一个树形菜单转换后的数据
let treearr = [];
// 声明一个面包屑的数据
let breadcrumbarr = [];
// 声明一个请求的数据
let res;

2.树形菜单功能

先通过接口请求获取数据，我这里用的是json，所以你们想写成接口请求的可以自己改一下

function requests() {$(document).ready(function() {//获取数据 $.ajax({//获取数据链接url: 'js/ifrom.json',//获取什么类型的数据dataType: 'json',//成功响应success: function(data) {//让data等于响应回来的数据// 先在面包屑数据push首页的数据breadcrumbarr.push(data[0]);// 使用变量获取数据方便在下面使用res = data;//让数组等于转换完的数据treearr = tree_menu(data, 0, []);//获取数组show_tree(treearr);// 创建一个新的p元素的jQuery对象var $newParagraph = $("<div class='block'></p>");// 获取目标div元素（假设它的id是myDiv）var $targetDiv = $('.treemenu');// 将新的p元素添加到div元素的末尾$targetDiv.append($newParagraph);// 如果存储的这个数据的值为1执行下面的操作if (localStorage.getItem('lock') == 1) {// 请求这个函数request();};// 如果存储的这个参数不是undefined执行下面的操作if (localStorage.getItem('i') != undefined) {// 声明存储获取最后显示页面的数据let paneldata = JSON.parse(localStorage.getItem('paneldata'));// 获取存储最后的显示页面的下标let i = localStorage.getItem('i');// 把之前存储的面包屑数据获取过了，重新赋值给面包屑的数组breadcrumbarr = JSON.parse(localStorage.getItem('breadcrumbarr'));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);};},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error('请求失败:', status, error);// 可以在这里处理请求失败的情况，例如显示错误信息给用户}});});
}

这个函数是在请求接口这个函数里面调用的，通过这个函数把接口返回的数据转换成多维的数组结构，如果一开始接口返回的解锁多维的数据，就不需要使用这个函数

//转换数据
function tree_menu(data, pid, treearr) {//遍历数据for (let i = 0; i < data.length; i++) {//判断data下标的pid是否等于pidif (data[i].pid == pid) {//用dtat下标的子节点，继续调用函数data[i].children = tree_menu(data, data[i].id, []);//把获取到的放入到数组里面treearr.push(data[i]);}}//返回arrreturn treearr;
}

然后通过转换好的数据结构把数据渲染到树形菜单这个div里面，这个渲染函数也是在接口请求函数里面调用的，但是它在上面这个函数的下面，因为要先执行数据转换才能，转换好的数据才能让渲染使用，渲染出来的才是有子级的内容

//渲染
function show_tree(arrs) {//声明一个字符串先写一个大盒子包起来let str = `<div class="tree_wrap">`;// 获取存储的点击的页面名字let name = localStorage.getItem('name');//遍历数组for (let i = 0; i < arrs.length; i++) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length > 0) {//拼接它本身，拼接子级，通过递归继续判断它的子级str += `<div class="icon icons"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div><img class="ico" src="./img/xia.png" alt="" /></div><div style="display: none;" class="show tree_wrap">`;str += show_tree(arrs[i].children);str += `</div>`;} else {if (arrs[i].pid == 0) {//拼接它本身 str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;} else {str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div class="child"><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;}}} else {//拼接它本身str +=`<div class="icon"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;}}//拼接结束标签str += `</div>`;//渲染到页面上$('.treemenu').html(str);//显示首页的高亮$('.icon').eq(0).addClass('icon-click');//高亮点击事件$(document).ready(function() {$('.icon').on('click', function() {// 移除所有菜单项的 icon-click 类$('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$(this).addClass('icon-click');});});//返回字符串return str;
}

下面是点击父级显示子级的函数

//点击父级显示子级
$(document).on('click', '.icons', function() {//获取子级框架let children = $(this).next();//获取图片，过渡1s$(this).find('.ico').css('transition', 'all 0.5s');//判断是否显示if (children.css('display') == 'block') {//滑出children.hide(500);//图片初始化$(this).find('.ico').css('transform', 'rotate(0deg)');} else {//滑入children.show(500);//图片旋转180$(this).find('.ico').css('transform', 'rotate(180deg)');}
});

3.面包屑渲染

面包屑渲染是先通过树形菜单的点击事件获取的

下面是树形菜单的点击事件

//点击渲染面包屑
function panel(paneldata, i) {// 移除所有菜单项的 icon-click 类$('.icon').removeClass('icon-click');//高亮点击事件if (paneldata.id == 4) {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(3).addClass('icon-click');} else if (paneldata.id == 6) {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(5).addClass('icon-click');} else {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');}// 存储一下菜单的名字方便下面使用sessionStorage.setItem('title', paneldata.title)// 如果面包屑数组了吗不存在这个id执行里面的操作if (JSON.stringify(breadcrumbarr).indexOf(JSON.stringify(paneldata.id)) == -1) {// 存储过来的数据放入到面包屑的数组里面breadcrumbarr.push(paneldata);}// 获取存储的页面链接sessionStorage.setItem('redirect', paneldata.path);// 在标题页面显示当前所在页面的名字$('#font').html(paneldata.title);// iframe框架的链接改成树形菜单点击的页面链接$('#iframe').attr('src', `./${paneldata.path}.html`);// 存储一下点击的整条数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('paneldata', JSON.stringify(paneldata));// 存储一下点击的数据下标，方便在刷新和锁屏解锁之后使用localStorage.setItem('i', i);// 存储一下面包屑的所有数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('breadcrumbarr', JSON.stringify(breadcrumbarr));// 调用渲染面包屑函数apple(breadcrumbarr);
}

通过点击树形菜单把点击的树形菜单的这一条数据获取过来，先判断面包屑数组里面是否有这条数据，如果没有这条数据，把这条数据添加到面包屑的数组里面，通过调用面包屑渲染函数，把面包屑渲染出来

//面包屑渲染
function apple(data) {// 获取存储的数据的名字let name = sessionStorage.getItem('title');//获取存储的链接let redirect = sessionStorage.getItem('redirect');// 声明一个字符串let str = ``;// 循环面包屑的数据for (let i = 0; i < data.length; i++) {// 如果data的id不等于1执行下面的操作if (data[i].id != 1) {// 字符串拼接面包屑的数据str +=`<div class="pagees" onclick="usb(${JSON.stringify(data[i]).replace(/\"/g,"'")})" style="background-color:${data[i].title==name?'#ecf5ff':''}; color:${data[i].title==name?'#5ca9ff':''}; "><div >${breadcrumbarr[i].title}</div><img onclick="clears(${JSON.stringify(data[i]).replace(/\"/g,"'")})" src="./img/ba60394b-1e8c-449d-a439-33b2b9038aff.png" alt="" />		</div>`// iframe框架的链接改成树形菜单点击的页面链接$('iframe').attr('src', `./${redirect}.html`);// 改变面包屑的高亮$('.pages').css({'color': 'black','border-bottom': "none",'background-color': 'white'});}}// 如果信息框显示就让调用函数隐藏if (info == 1) {// 调用信息隐藏的函数information();}// 如果个人信息显示调用个人信息函数隐藏if (myes == 1) {// 调用个人信息函数my();}// 判断如果存储的名字等于树形菜单数据的下标0的名字下,或者面包屑数组的长度等于0，执行下面的代码if (name == treearr[0].title || breadcrumbarr.length == 0) {// 循环请求接口获取的数据for (let i = 0; i < res.length; i++) {// 如果标签的下标等于存储的名字执行下面的代码if ($('.icon').eq(i).text() == name) {// 移除所有菜单项的 icon-click 类 $('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');// iframe框架的链接改成树形菜单点击的页面链接$('iframe').attr('src', `./${breadcrumbarr[i].path}.html`);}}// 在标题页面显示当前所在页面的名字 $('#font').html(name);// 改变面包屑的高亮$('.pages').css({'color': ' #5ca9ff', // 设置文本颜色'background-color': '#ecf5ff', // 设置背景颜色});}// 把字符串拼接的数据渲染到面包屑的div里document.getElementsByClassName('navigation')[0].innerHTML = str;
}

面包屑点击事件，点击面包屑让点击的面包屑显示高亮，显示对应的树形菜单显示高亮

//点击面包屑显示高亮
function usb(data) {// 存储点击面包屑的名字localStorage.setItem('name', data.title);// 循环获取一开始请求数据的参数for (let i = 0; i < res.length; i++) {//如果一开始存储数据的数组下标i的id==点击数据的id执行下面的操作if (res[i].id == data.id) {// 在标题页面显示当前所在页面的名字 $('#font').html(data.title);// 存储一下点击的整条数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('paneldata', JSON.stringify(res[i]));// 存储一下点击的数据下标，方便在刷新和锁屏解锁之后使用localStorage.setItem('i', i);// iframe框架的链接改成面包屑点击的页面链接$('iframe').attr('src', `./${res[i].path}.html`);}}// 判断如果信息显示让他隐藏if (info == 1) {// 调用信息显示或者隐藏函数information();}// 如果个人信息显示让他隐藏if (myes == 1) {// 调用个人信息显示或者隐藏函数my();}// 循环获取一开始请求数据的参数for (let i = 0; i < res.length; i++) {// 如果icon的下标内容等于点击面包屑内容的名字执行下面的操作if ($('.icon').eq(i).text() == data.title) {// 移除所有菜单项的 icon-click 类 $('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');}}// 循环面包屑的数组for (let i = 0; i < breadcrumbarr.length; i++) {// 判断面包屑数组的id==点击面包屑数据的id，执行下面的操作if (breadcrumbarr[i].id == data.id) {// 清除面包屑高亮样式$('.pages').css({'color': 'black','border-bottom': "none",'background-color': 'white'});// 清除行内样式$('.pagees').removeAttr('style');// 清除css的类名$('.pagees').removeClass('crumbs');// 给点击的面包屑数据绑上css的高亮域名$('.pagees').eq(i - 1).addClass('crumbs');}}// 存储面包屑的数组localStorage.setItem('breadcrumbarr', JSON.stringify(breadcrumbarr));
}

点击删除按钮删除面包屑事件，先要阻止事件的冒泡，在循环面包屑的数据，判断点击的是哪一条数据，使用splice方法删除点击的数据，显示面包屑最后一个高亮，显示树形菜单跟面包屑数组最后一条数据一样的显示高亮

//点击删除面包屑按钮
function clears(data) {// 阻止事件冒泡event.stopPropagation();// 循环面包屑数组for (let i = 0; i < breadcrumbarr.length; i++) {// 如果面包屑的id等于删除事件的id，执行下面的操作if (breadcrumbarr[i].id == data.id) {// 使用splice方法删除数据breadcrumbarr.splice(i, 1);// 存储breadcrumbarr数组的最后一个数据的名字sessionStorage.setItem('title', breadcrumbarr[breadcrumbarr.length - 1].title);// 存储breadcrumbarr数组的最后一个数据的链接sessionStorage.setItem('redirect', breadcrumbarr[breadcrumbarr.length - 1].path);}}// 调用面包屑渲染函数，页面上也清除这个数据apple(breadcrumbarr);// 声明一个获取面包屑数组的最后一个数据的名字let titleToFind = breadcrumbarr[breadcrumbarr.length - 1].title;// 清除树形菜单所有的高亮类名$('.icon').removeClass('icon-click');// 遍历所有使用。icon类名的元素$('.icon').each(function() {// 判断内容是否==数组的最后一个数据的名字if ($(this).text() === titleToFind) {// 为当前的菜单项添加 icon-click 类$(this).addClass('icon-click');}});// 修改导航栏文字if (breadcrumbarr.length > 0) {$('#font').html(breadcrumbarr[breadcrumbarr.length - 1].title);} else {$('#font').html(breadcrumbarr[0].title);}
}

首页的点击事件

// 首页点击事件
function sy() {// 清除树形菜单首页的高量$('.icon').removeClass('icon-click');// 给首页的树形菜单显示高亮$('.icon').eq(0).addClass('icon-click');// 清除面包屑的高亮$('.pagees').removeAttr('style');$('.pagees').removeClass('crumbs');// 设置首页面包屑高亮$('.pages').css({'color': ' #5ca9ff', // 设置文本颜色'background-color': '#ecf5ff', // 设置背景颜色});// 渲染标题$('#font').html(treearr[0].title);// 把iframe的src路径改成首页路径$('iframe').attr('src', `./home.html`);
}

4.全屏功能

在当今数字化的网页浏览体验中，全屏功能已经成为许多网站和应用提升用户沉浸感与交互性的重要手段。今天，让我们深入探讨一个简单而实用的用于实现全屏切换的 JavaScript 函数 ——toggleFullScreen，剖析其背后的逻辑与应用场景。

下面是全屏的代码实例

//放大功能
function toggleFullScreen() {if (!document.fullscreenElement) {// 进入全屏document.documentElement.requestFullscreen();} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();}}
}// 绑定一个按钮点击事件来触发全屏功能
document.getElementById('blowup').addEventListener('click', toggleFullScreen);

这个函数是用来实现网页在全屏与非全屏状态之间的转换。首先通过document.fullscreenElement判断当前页面是否处于全屏的状态。如果属性为null，代表页面为处于全屏的状态，那就调用进入全屏的方法，请求将整个页面切换到全屏的模式，通过html文档的根元素<html>,通过它来发起全屏请求可以使整个页面进入全屏展示。

而当document.fullscreenElement不为null时，说明页面已经处于全屏的状态，判断document.exitFullscreen();这个方法是否存在，如果存在，就调用该方法来实现退出全屏的操作，使页面恢复到正常的非全屏显示状态

5.框架刷新功能

在网页开发与用户交互体验的领域中，页面刷新功能是一项常见但又颇具深度的技术点。今天，我们将聚焦于一个特定的用于刷新页面且不使用缓存的 JavaScript 函数 ——refreshPage，剖析其工作原理、应用场景以及在优化网页体验方面的意义。

让我们先来研究一下刷新功能代码

//刷新页面
// 不使用缓存刷新页面
function refreshPage() {// 刷新iframe的链接$('iframe').attr('src', $('iframe').attr('src'));// 不刷新整个页面event.preventDefault();event.stopPropagation();
}

 这个函数首先，针对页面的iframe元素进行了处理。通过jqurey选择器选中了所有的iframe元素，然后利用jqurey里面的attr方法改变它的路径。这一操作看似简单，实则巧妙地实现了对 iframe 内容的刷新。由于重新设置了相同的源链接，浏览器会重新向服务器请求该 iframe 页面的资源，而不是直接使用缓存中的内容，从而达到了刷新 iframe 且不依赖缓存的目的。

其次，函数中使用了 event.preventDefault();  和 event.stopPropagation(); 这两个方法。这两个方法通常用于处理事件流，在这里它们的作用是阻止默认的页面刷新行为以及阻止事件的冒泡传播。这一步骤非常关键，因为如果没有这两个操作，函数的执行可能会导致整个页面的常规刷新，而不是仅仅刷新 iframe 内容，这就违背了函数设计的初衷，即实现无缓存的局部页面（iframe）刷新。

6.监听页面刷新功能

在现代网页开发的复杂世界中，有效地处理页面刷新事件对于提供流畅且数据一致的用户体验至关重要。今天，我们将深入探讨一段用于监听页面刷新事件并根据情况执行特定操作的 JavaScript 代码，揭示其背后的原理、应用场景以及对网页性能和用户体验的影响。

以下是我们要深入研究的刷新代码片段：

// 监听页面刷新事件
window.addEventListener('load', function(event) {// 如果点击刷新按钮执行下面if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {// 调用树形菜单接口请求的数据requests()} else {}
});

首先，window.addEventListener('load',callback) 这行代码用于在页面加载完成后添加一个事件监听器。load事件在整个页面（包括所有依赖资源，如样式表、脚本、图像等）都已加载完成时触发。这确保了我们在处理页面刷新相关逻辑时，页面已经处于一个相对稳定且完整的状态，避免了因资源未加载完全而导致的错误或不一致性。

在事件监听器的回调函数内部，通过performance.navigation.type 属性来判断页面导航的类型。performance.navigation 对象提供了有关页面导航的信息，其中 type 属性可以取不同的值来表示页面是如何被导航到当前状态的。当 performance.navigation.type === performance.navigation.TYPE_RELOAD时，这意味着页面是通过点击浏览器的刷新按钮（或者在 JavaScript 中使用 location.reload()方法）进行重新加载的。在这种情况下，代码会执行 requests()函数，这个函数可能是用于向服务器请求树形菜单接口的数据，以确保在页面刷新后，树形菜单能够显示最新的数据内容，与服务器端的数据保持同步。

7.下面是完整的代码示例

// 框架js// 获取提示弹出窗
let tooltip = $(".Tooltip")[0]; // 获取提示信息的 DOM 元素
// 获取本地存储登录的数据
let tokens = localStorage.getItem("data");// 判断数据如果为null返回登录页
function disconnected() {tokens = localStorage.getItem("data");if (tokens == null) {// 弹出窗提示tooltip.innerHTML = `您已掉线，两秒将返回登录页面`; // 设置提示信息// 显示弹出窗tooltip.style = "display:block";// 定时器跳转到登录页setTimeout(function() {console.log(1);// 清除临时存储的数据sessionStorage.clear();// 清除本地存储的数据localStorage.clear();// 跳转到登录页window.location.replace("login.html");}, 2000);}
}// 每五秒执行定时器
setInterval(function() {//判断数据是否丢失，如果丢失，弹出窗提示跳转到登录页disconnected();// 请求首页接口判断，token是否失效showdata();
}, 1000);
// 数据转换
let personal = JSON.parse(tokens);
// 获取存储登录页数据里面的id
let uid = personal.data.id;
// 获取登录页数据的token
let token = personal.data.token;
// 获取本地存储的接口
let dns = localStorage.getItem('dns');
// 请求首页接口
function showdata() {$.ajax({type: "post",url: dns + "/spigall/Statis",data: {},headers: {token: token,id: uid},success: function(data) {// 判断token是否过期if (data.code == 0) {// 弹出窗显示tooltip.style = "display:block";// 弹出窗渲染tooltip.innerHTML = `您已掉线，两秒将返回登录页面`; // 设置提示信息、// 定时器跳转到登录页setTimeout(function() {// 清除临时存储的数据sessionStorage.clear();// 清除本地存储的数据localStorage.clear();// 跳转到登录页window.location.replace("login.html");}, 2000);}},error: function(e) { // 请求失败的回调函数console.error("请求失败", e);}})
}
// 如果获取的存储为1跳转到锁屏页面
if (localStorage.getItem('locks') == 1) {window.location.replace('lock.html');
}
// 声明一个用于判断个人信息显示变量
let myes = 0;
// 声明一个用于切换树形菜单状态的变量
let picture = 2;
// 声明一个用于判断信息显示变量
let info = 0;// 声明一个树形菜单转换后的数据
let treearr = [];
// 声明一个面包屑的数据
let breadcrumbarr = [];
// 声明一个请求的数据
let res;
// 调用树形菜单接口请求的数据
requests();function requests() {$(document).ready(function() {//获取数据 $.ajax({//获取数据链接url: 'js/ifrom.json',//获取什么类型的数据dataType: 'json',//成功响应success: function(data) {//让data等于响应回来的数据// 先在面包屑数据push首页的数据breadcrumbarr.push(data[0]);// 使用变量获取数据方便在下面使用res = data;//让数组等于转换完的数据treearr = tree_menu(data, 0, []);//获取数组show_tree(treearr);// 创建一个新的p元素的jQuery对象var $newParagraph = $("<div class='block'></p>");// 获取目标div元素（假设它的id是myDiv）var $targetDiv = $('.treemenu');// 将新的p元素添加到div元素的末尾$targetDiv.append($newParagraph);// 如果存储的这个数据的值为1执行下面的操作if (localStorage.getItem('lock') == 1) {// 请求这个函数request();};// 如果存储的这个参数不是undefined执行下面的操作if (localStorage.getItem('i') != undefined) {// 声明存储获取最后显示页面的数据let paneldata = JSON.parse(localStorage.getItem('paneldata'));// 获取存储最后的显示页面的下标let i = localStorage.getItem('i');// 把之前存储的面包屑数据获取过了，重新赋值给面包屑的数组breadcrumbarr = JSON.parse(localStorage.getItem('breadcrumbarr'));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);};},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error('请求失败:', status, error);// 可以在这里处理请求失败的情况，例如显示错误信息给用户}});});
}
// 解开锁屏这个页面的事件
function request() {// 如果存储的面包屑数据不是undefined执行下面的操作if (localStorage.getItem('breadcrumbarr') != undefined) {// 设置个人信息的显示方式为0 myes = 0;// 设置信息的显示方式为0 info = 0;// 声明存储获取最后显示页面的数据 let paneldata = JSON.parse(localStorage.getItem('paneldata'));// 获取存储最后的显示页面的下标let i = localStorage.getItem('i');// 把之前存储的面包屑数据获取过来，重新赋值给面包屑的数组breadcrumbarr = JSON.parse(localStorage.getItem('breadcrumbarr'));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);// 删除存储的这个值localStorage.removeItem('lock');}
}
//转换数据
function tree_menu(data, pid, treearr) {//遍历数据for (let i = 0; i < data.length; i++) {//判断data下标的pid是否等于pidif (data[i].pid == pid) {//用dtat下标的子节点，继续调用函数data[i].children = tree_menu(data, data[i].id, []);//把获取到的放入到数组里面treearr.push(data[i]);}}//返回arrreturn treearr;
}
//渲染
function show_tree(arrs) {//声明一个字符串先写一个大盒子包起来let str = `<div class="tree_wrap">`;// 获取存储的点击的页面名字let name = localStorage.getItem('name');//遍历数组for (let i = 0; i < arrs.length; i++) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length > 0) {//拼接它本身，拼接子级，通过递归继续判断它的子级str += `<div class="icon icons"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div><img class="ico" src="./img/xia.png" alt="" /></div><div style="display: none;" class="show tree_wrap">`;str += show_tree(arrs[i].children);str += `</div>`;} else {if (arrs[i].pid == 0) {//拼接它本身 str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;} else {str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div class="child"><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;}}} else {//拼接它本身str +=`<div class="icon"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;}}//拼接结束标签str += `</div>`;//渲染到页面上$('.treemenu').html(str);//显示首页的高亮$('.icon').eq(0).addClass('icon-click');//高亮点击事件$(document).ready(function() {$('.icon').on('click', function() {// 移除所有菜单项的 icon-click 类$('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$(this).addClass('icon-click');});});//返回字符串return str;
}//下拉框的点击事件
$(document).on('click', '.icons', function() {//获取子级框架let children = $(this).next();//获取图片，过渡1s$(this).find('.ico').css('transition', 'all 0.5s');//判断是否显示if (children.css('display') == 'block') {//滑出children.hide(500);//图片初始化$(this).find('.ico').css('transform', 'rotate(0deg)');} else {//滑入children.show(500);//图片旋转180$(this).find('.ico').css('transform', 'rotate(180deg)');}
});//点击渲染面包屑
function panel(paneldata, i) {// 移除所有菜单项的 icon-click 类$('.icon').removeClass('icon-click');//高亮点击事件if (paneldata.id == 4) {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(3).addClass('icon-click');} else if (paneldata.id == 6) {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(5).addClass('icon-click');} else {// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');}// 存储一下菜单的名字方便下面使用sessionStorage.setItem('title', paneldata.title)// 如果面包屑数组了吗不存在这个id执行里面的操作if (JSON.stringify(breadcrumbarr).indexOf(JSON.stringify(paneldata.id)) == -1) {// 存储过来的数据放入到面包屑的数组里面breadcrumbarr.push(paneldata);}// 获取存储的页面链接sessionStorage.setItem('redirect', paneldata.path);// 在标题页面显示当前所在页面的名字$('#font').html(paneldata.title);// iframe框架的链接改成树形菜单点击的页面链接$('#iframe').attr('src', `./${paneldata.path}.html`);// 存储一下点击的整条数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('paneldata', JSON.stringify(paneldata));// 存储一下点击的数据下标，方便在刷新和锁屏解锁之后使用localStorage.setItem('i', i);// 存储一下面包屑的所有数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('breadcrumbarr', JSON.stringify(breadcrumbarr));// 调用渲染面包屑函数apple(breadcrumbarr);
}//面包屑渲染
function apple(data) {// 获取存储的数据的名字let name = sessionStorage.getItem('title');//获取存储的链接let redirect = sessionStorage.getItem('redirect');// 声明一个字符串let str = ``;// 循环面包屑的数据for (let i = 0; i < data.length; i++) {// 如果data的id不等于1执行下面的操作if (data[i].id != 1) {// 字符串拼接面包屑的数据str +=`<div class="pagees" onclick="usb(${JSON.stringify(data[i]).replace(/\"/g,"'")})" style="background-color:${data[i].title==name?'#ecf5ff':''}; color:${data[i].title==name?'#5ca9ff':''}; "><div >${breadcrumbarr[i].title}</div><img onclick="clears(${JSON.stringify(data[i]).replace(/\"/g,"'")})" src="./img/ba60394b-1e8c-449d-a439-33b2b9038aff.png" alt="" />		</div>`// iframe框架的链接改成树形菜单点击的页面链接$('iframe').attr('src', `./${redirect}.html`);// 改变面包屑的高亮$('.pages').css({'color': 'black','border-bottom': "none",'background-color': 'white'});}}// 如果信息框显示就让调用函数隐藏if (info == 1) {// 调用信息隐藏的函数information();}// 如果个人信息显示调用个人信息函数隐藏if (myes == 1) {// 调用个人信息函数my();}// 判断如果存储的名字等于树形菜单数据的下标0的名字下,或者面包屑数组的长度等于0，执行下面的代码if (name == treearr[0].title || breadcrumbarr.length == 0) {// 循环请求接口获取的数据for (let i = 0; i < res.length; i++) {// 如果标签的下标等于存储的名字执行下面的代码if ($('.icon').eq(i).text() == name) {// 移除所有菜单项的 icon-click 类 $('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');// iframe框架的链接改成树形菜单点击的页面链接$('iframe').attr('src', `./${breadcrumbarr[i].path}.html`);}}// 在标题页面显示当前所在页面的名字 $('#font').html(name);// 改变面包屑的高亮$('.pages').css({'color': ' #5ca9ff', // 设置文本颜色'background-color': '#ecf5ff', // 设置背景颜色});}// 把字符串拼接的数据渲染到面包屑的div里document.getElementsByClassName('navigation')[0].innerHTML = str;
}//点击面包屑显示高亮
function usb(data) {// 存储点击面包屑的名字localStorage.setItem('name', data.title);// 循环获取一开始请求数据的参数for (let i = 0; i < res.length; i++) {//如果一开始存储数据的数组下标i的id==点击数据的id执行下面的操作if (res[i].id == data.id) {// 在标题页面显示当前所在页面的名字 $('#font').html(data.title);// 存储一下点击的整条数据，方便在刷新和锁屏解锁之后使用localStorage.setItem('paneldata', JSON.stringify(res[i]));// 存储一下点击的数据下标，方便在刷新和锁屏解锁之后使用localStorage.setItem('i', i);// iframe框架的链接改成面包屑点击的页面链接$('iframe').attr('src', `./${res[i].path}.html`);}}// 判断如果信息显示让他隐藏if (info == 1) {// 调用信息显示或者隐藏函数information();}// 如果个人信息显示让他隐藏if (myes == 1) {// 调用个人信息显示或者隐藏函数my();}// 循环获取一开始请求数据的参数for (let i = 0; i < res.length; i++) {// 如果icon的下标内容等于点击面包屑内容的名字执行下面的操作if ($('.icon').eq(i).text() == data.title) {// 移除所有菜单项的 icon-click 类 $('.icon').removeClass('icon-click');// 为当前点击的菜单项添加 icon-click 类$('.icon').eq(i).addClass('icon-click');}}// 循环面包屑的数组for (let i = 0; i < breadcrumbarr.length; i++) {// 判断面包屑数组的id==点击面包屑数据的id，执行下面的操作if (breadcrumbarr[i].id == data.id) {// 清除面包屑高亮样式$('.pages').css({'color': 'black','border-bottom': "none",'background-color': 'white'});// 清除行内样式$('.pagees').removeAttr('style');// 清除css的类名$('.pagees').removeClass('crumbs');// 给点击的面包屑数据绑上css的高亮域名$('.pagees').eq(i - 1).addClass('crumbs');}}// 存储面包屑的数组localStorage.setItem('breadcrumbarr', JSON.stringify(breadcrumbarr));
}//点击删除面包屑按钮
function clears(data) {// 阻止事件冒泡event.stopPropagation();// 循环面包屑数组for (let i = 0; i < breadcrumbarr.length; i++) {// 如果面包屑的id等于删除事件的id，执行下面的操作if (breadcrumbarr[i].id == data.id) {// 使用splice方法删除数据breadcrumbarr.splice(i, 1);// 存储breadcrumbarr数组的最后一个数据的名字sessionStorage.setItem('title', breadcrumbarr[breadcrumbarr.length - 1].title);// 存储breadcrumbarr数组的最后一个数据的链接sessionStorage.setItem('redirect', breadcrumbarr[breadcrumbarr.length - 1].path);}}// 调用面包屑渲染函数，页面上也清除这个数据apple(breadcrumbarr);// 声明一个获取面包屑数组的最后一个数据的名字let titleToFind = breadcrumbarr[breadcrumbarr.length - 1].title;// 清除树形菜单所有的高亮类名$('.icon').removeClass('icon-click');// 遍历所有使用。icon类名的元素$('.icon').each(function() {// 判断内容是否==数组的最后一个数据的名字if ($(this).text() === titleToFind) {// 为当前的菜单项添加 icon-click 类$(this).addClass('icon-click');}});// 修改导航栏文字if (breadcrumbarr.length > 0) {$('#font').html(breadcrumbarr[breadcrumbarr.length - 1].title);} else {$('#font').html(breadcrumbarr[0].title);}
}
// 首页点击事件
function sy() {// 清除树形菜单首页的高量$('.icon').removeClass('icon-click');// 给首页的树形菜单显示高亮$('.icon').eq(0).addClass('icon-click');// 清除面包屑的高亮$('.pagees').removeAttr('style');$('.pagees').removeClass('crumbs');// 设置首页面包屑高亮$('.pages').css({'color': ' #5ca9ff', // 设置文本颜色'background-color': '#ecf5ff', // 设置背景颜色});// 渲染标题$('#font').html(treearr[0].title);// 把iframe的src路径改成首页路径$('iframe').attr('src', `./home.html`);
}//放大功能
function toggleFullScreen() {if (!document.fullscreenElement) {// 进入全屏document.documentElement.requestFullscreen();} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();}}
}// 绑定一个按钮点击事件来触发全屏功能
document.getElementById('blowup').addEventListener('click', toggleFullScreen);//刷新页面
// 不使用缓存刷新页面
function refreshPage() {// 刷新iframe的链接$('iframe').attr('src', $('iframe').attr('src'));// 不刷新整个页面event.preventDefault();event.stopPropagation();
}// 退出登录函数
function quit() {// 清除所有的本地存储localStorage.clear();// 清除所有的临时存储sessionStorage.clear();// 返回登录页window.location.replace("login.html");
}
// 获取存储的个人信息
let data = JSON.parse(localStorage.getItem('data'));
//树形菜单只显示图表的函数 
function tree_hover(arrs) {//声明一个字符串先写一个大盒子包起来let str = `<div class="tree_wrap">`;// 使用变量获取存储的数据名字let name = localStorage.getItem('name');//遍历数组for (let i = 0; i < arrs.length; i++) {//判断它的子级长度大于0if (arrs[i].children) {// 如果数据有子级执行下面的操作if (arrs[i].children.length > 0) {//拼接它本身，拼接子级，通过递归继续判断它的子级str += `<div class="icon icons">${arrs[i].title}<img class="ico" src="./img/jiantou.png" alt="" /></div><div style="display: none;" class="show">`;str += tree_hover(arrs[i].children);str += `</div>`;} else {if (arrs[i].pid == 0) {//拼接它本身 str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")})" ><img class="treemenulefts" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div>`;} else {str +=`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")})" >${arrs[i].title}</div>`;}}} else {//拼接它本身str +=`<div class="icon"><img class="treemenulefts" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div>`;}}//拼接结束标签str += `</div>`;//渲染到页面上$('.treeicon').html(str);//返回字符串return str;
}function tree() {// 点击管理图片切换只显示图片状态if (picture === 1) {// 显示第一个框架$('.background').css('display', 'block');// 隐藏第二个框架$('.backgrounds').css('display', 'none');// 调整左边的或者宽度$('.framework').css('width', '87.5%');show_tree(treearr);// 改变它的状态picture = 2;} else {//隐藏第一个框架$('.background').css('display', 'none');// 显示第二个框架$('.backgrounds').css('display', 'block');// 调整左边的或者宽度$('.framework').css('width', '96%');// 声明一个数组let arrs = [];// 让数组调用树形菜单的数组arrs = treearr;// 字符串拼接let str = `<div class="tree_wraps">`;let name = localStorage.getItem('name');// 循环拼接数据for (let i = 0; i < arrs.length; i++) {if (arrs[i].children && arrs[i].children.length > 0) {str += `<div class="icones icos icons"><div ><img class="treemenulefts" title="${arrs[i].title}" src="${arrs[i].icon}" alt="" /></div><div class=" icon-text" >`;str += show_treeto(arrs[i].children);str += `</div></div>`;} else {str += `<div class="icones " onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")})"><img class="treemenulefts"  title="${arrs[i].title}" src="${arrs[i].icon}" alt="" /><div class="icon-text">${arrs[i].title}</div></div>`;}}str += `</div>`;// 渲染到这个div里面$('.treemenus').html(str);// 改变它的状态picture = 1;}
};//渲染
function show_treeto(arrs) {//声明一个字符串先写一个大盒子包起来let str = `<div class="tree_wraps">`;let name = localStorage.getItem('name');//遍历数组for (let i = 0; i < arrs.length; i++) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length > 0) {//拼接它本身，拼接子级，通过递归继续判断它的子级str += `<div class=" icons"><img class="treemenulefts" src="./img/${arrs[i].icon}.png" alt="" />${arrs[i].title}<img class="ico" src="./img/jiantou.png" alt="" /></div><div style="display: none;" class="show">`;str += show_treeto(arrs[i].children);str += `</div>`;} else {if (arrs[i].pid == 0) {//拼接它本身 str +=`<div onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")})" ><img  src="./img/${arrs[i].icon}.png" alt="" />${arrs[i].title}</div>`;} else {str +=`<div class="icos" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")})" >${arrs[i].title}</div>`;}}}}//拼接结束标签str += `</div>`;//渲染到页面上$('.treemenu').html(str);//返回字符串return str;
}// 点击锁屏函数
function lock() {// 存储一个数据为1localStorage.setItem('locks', 1);// 创建一个新的状态对象newState，它包含了两个属性// pageTitle属性用于表示页面标题，这里设置为"lock.html"// pageContent属性用于描述页面的内容，这里设置了相关的描述字符串var newState = {pageTitle: "lock.html",pageContent: "这是新的页面内容相关描述"};// 使用history.replaceState方法来更新浏览器历史记录中的当前状态// 第一个参数newState就是上面定义的新状态对象，它包含了页面相关的一些状态信息// 第二个参数"新页面标题"是一个可选的标题参数，用于在某些浏览器的历史记录中展示相关标题（不过实际支持情况因浏览器而异）// 第三个参数"lock.html"指定了与该历史记录状态关联的URL路径，当用户点击浏览器的前进/后退按钮时可能会用到这个路径信息history.replaceState(newState, "新页面标题", "lock.html");// 使用location.reload方法来重新加载当前页面，这会导致页面重新从服务器获取资源（如果是无缓存情况）// 或者从缓存中重新加载页面内容（如果有可用缓存），常用于需要更新页面显示状态的场景location.reload();
}// 	请求个人接口
individual();
function individual() {$.ajax({url: dns + 'spigall/amend',method: 'POST',dataType: 'json',headers: {token: personal.data.token,id: personal.data.id},data: {id: personal.data.id},success: function(data) {// 渲染个人信息$("#myico").attr("src", `${dns}${data.data.img}`);$("#myicos").attr("src", `${dns}${data.data.img}`);$("#myicoss").attr("src", `${dns}${data.data.img}`);$("#myicoes").attr("src", `${dns}${data.data.img}`);$("#myname").html(data.data.name);$("#mynames").html(data.data.name);$("#my").html(data.data.name);$("#sex").html(data.data.sex == 1 ? "男" : "女");$("#sexs").html(data.data.sex == 1 ? "男" : "女");$("#tel").html(data.data.tel);$("#tels").html(data.data.tel);$("#account").html(data.data.tel);$("#accounts").html(data.data.tel);$("#pass").html(data.data.password);$("#passes").html(data.data.password);},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error('请求失败:', status, error);// 可以在这里处理请求失败的情况，例如显示错误信息给用户}});
}
// 消息
function information() {// 如果参数为0显示信息，隐藏个人信息if (info == 0) {$(".information-box").show();$('.my-information-box').hide();$('#info').css({"color": "white","background-color": "rgb(97, 161, 201)"});$('#infos').css({"color": "","background-color": ""});info = 1;myes = 0;// 如果参数为1隐藏信息} else if (info == 1) {$(".information-box").hide();$('#info').css({"color": "","background-color": ""});info = 0;}
}// 我的信息function my() {// 如果参数为0显示个人信息，隐藏信息if (myes == 0) {$(".information-box").hide();$('.my-information-box').show();$('#infos').css({"color": "white","background-color": "rgb(97, 161, 201)"});$('#info').css({"color": "","background-color": ""});myes = 1;info = 0;// 如果参数为1隐藏个人信息} else if (myes == 1) {$('#infos').css({"color": "","background-color": ""});$('#infos').css({"color": "","background-color": ""});$('.my-information-box').hide();myes = 0;}
}// 个人页面的点击事件
function mys() {// iframe框架的链接改成我的的页面链接$('#iframe').attr('src', `./my.html`);
}
// 用点击其他地方关闭信息和个人信息弹出窗
function hides() {$('.my-information-box').hide();$(".information-box").hide();$('#infos').css({"color": "","background-color": ""});$('#info').css({"color": "","background-color": ""});myes = 0;info = 0;
}// 监听页面刷新事件
window.addEventListener('load', function(event) {// 如果点击刷新按钮执行下面if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {// 调用树形菜单接口请求的数据requests()} else {}
});