Layui实现左侧点击菜单，右侧显示内容

Layui实现左侧点击菜单，右侧显示内容

功能简介：

layui实现点击左侧的菜单，在右侧显示内容。
其实并不是非要layui前端框架，这个左侧点击，右边显示内容的原理是iframe完成的，其它框架都可以实现。

附上完整demo：https://github.com/BraisedPanda/StudentSystem2.5
demo里面static下的sql文件夹里有完整的数据库表和测试数据
登录界面登录名：zhangsan 密码：123

1、核心代码

1.1 左侧菜单核心代码：也就三个普通的超链接，赋予了data-src属性，后面是对应的action地址

      <dd class="main_left"><a  data-src="/tostudentlist"  target="_top" >学生列表</a></dd>
 

  
       <dd class="main_left"><a data-src="/toclasslist" target="_top">班级列表</a></dd>


   
       <dd class="main_left"><a data-src="/userlist2" target="_top">用户列表</a></dd>

1.2 同页面中，添加iframe标签，来展示要显示的内容：

<div class="main_right">
    <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="aa">
    </iframe>
</div>

1.3 最后绑定js事件，获取超链接中的src值，传给后台，后台传过来数据进行展示。

 $(function(){	
 		//获取src值
        $(".main_left a").on("click",function(){
            var address =$(this).attr("data-src");
            $("iframe").attr("src",address);
        });
		//一下代码是根据窗口高度在设置iframe的高度
        var frame = $("#aa");
	
        var frameheight = $(window).height();
        console.log(frameheight);
        frame.css("height",frameheight);


    });

2、后端代码

这里以tostudentlist这个controller为例子

    @RequestMapping("tostudentlist")
    public String tostudentlist(){
        return "student/allstudent";
    }

3、前端页面

4、效果演示

左侧点击，右边显示内容了。
以前我一直不会弄，就用了个笨方法，用thymeleaf提取出公共部分（提取了左侧菜单和头部）,然后每个页面都复制粘贴一份QAQ，这样假装骗过自己(捂脸)…

前面的demo内容预览

预览

登录界面

学生列表

班级列表

添加学生

我的考试成绩

各班级考试成绩

所有角色一览

各角色对应的权限

新建权限角色（可定制可观看的菜单和对应的操作按钮）

授予某个用户权限

附上我参考的连接：使用网页嵌套iframe标签，点击左侧导航栏，在右侧动态显示页面的信息