后台模板管理系统___左侧菜单数据的异步加载

 对于搞Java的我来说,前端JS我是有点愚冻,今天在我的博客地盘我就悄悄发布一篇没有技术含量的文章,这次怎么说我也是完完整整的把公司后台管理系统的菜单异步加载独自搞出来了,对自己也是一个小小的提升,话不多说开始写步骤。

  同志们都知道,后台系统嘛无非就是一套模板样式,分为头文件,左侧菜单和主体内容,在多了就加个页脚文件。但是为了提升系统的性能,很多公司都习惯将系统的目录数据放在缓存,然后通过异步请求的方式单独加载出来,我们公司也不例外。

  首先系统欢迎页面中包含左侧菜单jsp文件,代码如下:

1 <!-- 左侧菜单栏开始  -->
2 <%@ include file="/modules/nav.jsp"%>

其次左侧菜单jsp文件中通常会加载一个js文件,因为系统的目录数据一般是通过js文件中的js代码发送请求,来将获取到的数据拼接到页面指定位置上去的,代码如下:

1 <%@ page contentType="text/html;charset=utf-8" %>
2 <%@ include file="/commons/taglibs.jsp"%>
3 <script>
4 var contextPath="${pageContext['request'].contextPath}";
5 </script>
6     <ul id="leftnav" class="leftnav">
7         
8     </ul>
9 <script src="${zxz}/js/nav.js?version=1.0"></script>

 最后,就是幕后黑手出场,饶了小半圈儿就是js文件加载目录数据的,不多解释,今儿心情好,代码原样粘贴:

 1 $(function(){
 2     //获取左侧菜单
 3     var url = contextPath + '/ajax/listMenu.json';          //末尾的.json代表后台返回的数据是json格式的数据,但是也可以用dataType属性来定义
 4     var nav_html = '';
 5     var header_html = '';
 6     $.ajax({
 7         cache: false,
 8         type: "post",
 9         url: url,
10         //dataType:"json",  //返回的数据类型[也可以在上面请求的地址后面直接加上".json"]
11         error: function() {
12             massage_info_fail("系统异常");
13         },
14         success: function(data) {
15             console.log(data);
16             $.each(data,function(idx,item){
17                 nav_html += "<li class='manage'><label><i class='iconfont'>"+item.menuIcon+"</i>"+item.menuName+"</label><ul id='"+item.id+"'>";
18                 if(item.children!=null && item.children!=""){
19                 $.each(item.children,function(idx2,itemchildren){
20                     nav_html += "<li id="+itemchildren.mid+"><a href='"+contextPath+itemchildren.menuURL+"'>"+itemchildren.menuName+"</a></li>"
21                  });
22                 }
23                 nav_html += "</ul>";
24             });
25             $("#leftnav").html(nav_html);
26             //根据右侧菜单标识改变左侧导航菜单的展开与选中[根据页面的隐藏传递的mid属性展开左侧菜单栏中的对应菜单项]
27             if($(".main input[name='mid']").size()>0){
28                 var mid = $(".main input[name='mid']").val();
29                 if(mid != '' || mid.length > 0){
30                     $("#"+mid+"").addClass("curr");
31                     $("#"+mid+"").parents("li").addClass("curr");
32                 }
33             }
34         }
35         
36     });
37 });

上面那段加红的js代码就是将后台返回来的数据,原样拼接到指定位置处的,记住,它是按照静态文件中的代码原样拼接的,我也是拼接了好几回,建议大家根据浏览器开发者工具,打开原生的静态文件对比拼接速度更快,还不容易出错。

  好了,写到这儿,我也不多说什么了,主要就是记录下这次的编码过程。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

174.Spring Boot WebSocket:群聊-昵称

【视频&交流平台】 àSpring Boot视频 http://study.163.com/course/introduction.htm?courseId=1...

32850
来自专栏菩提树下的杨过

利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,...

27870
来自专栏linux驱动个人学习

高通调试 SPI 屏的 bug

40520
来自专栏DT乱“码”

myeclipse去除jsp校验错误

选择你的工程右击菜单 >> 点击MyEclipse菜单项的Exclude From Validation,如果你的工程里还 有其它需要它检验其合法性建议可以针对...

27050
来自专栏企鹅号快讯

Vue2的单元测试与调试技术

测试是一个非常美妙的世界,一旦进入根本停不下来~在Java中,我们可以使用JUnit做单元测试,但在前端开发中,想做单元测试并不是一件特别容易的事情,但如果你采...

239100
来自专栏杨建荣的学习笔记

深入理解Oracle中的DBCA

但凡是学习 过Oracle的同学,DBCA都是一个必备工具,有了这个工具,创建数据库成为可能。而DBCA本身有图形和静默两种方式。静默方式看起来高大上,可以轻松...

38490
来自专栏向治洪

React native开发中常见的错误

react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: jav...

34360
来自专栏伪君子的梦呓

安装和配置 Eclipse

之前安装了 Java 并且配置好了 Java 的环境变量,现在来搞一下开发环境,下面就是下载安装和配置 Eclipse 的教程。

59810
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——自动更新、卸载篇

一、前言                               B/S模式的特点之一,客户端版本升级相对简单、快捷,适合产品的快速迭代。而ActiveX组...

20280
来自专栏MoeLove

利器系列-终端分屏利器 tmux

首先,我们先来了解下终端分屏是什么。顾名思义,终端分屏就是把一个终端屏幕拆解为多个窗口,并且可以进行切换。

21720

扫码关注云+社区

领取腾讯云代金券