微信小程序--后端管理平台业务1

来源：互联网发布：激光雷达数据编辑：程序博客网时间：2024/05/18 09:55

管理平台的页面使用bootstrap框架。

目标：达到点击一个页面的三个选项卡，在该页面的div为content的组件中将选项卡的页面加载进来。

这里我采用的是jquery，使用ajax异步交互，向服务端发送请求拿到页面，然后在本页面加入进来。

参考：http://blog.csdn.net/chelen_jak/article/details/34434431

主页的内容:

<!DOCTYPE html><html><head><script src="webjars/jquery/3.1.1/jquery.min.js"></script><script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script><script>  function course(){  $.ajax( {        url: "course", //这里是静态页的地址        type: "GET", //静态页用get方法，否则服务器会抛出405错误        success: function(data){            //var result = $(data).find("另一个html页面的指定的一部分");            $("#content").html(data);        }});  }    function userb(){  $.ajax( {        url: "userb", //这里是静态页的地址        type: "GET", //静态页用get方法，否则服务器会抛出405错误        success: function(data){            //var result = $(data).find("另一个html页面的指定的一部分");            $("#content").html(data);        }});  }    function academy(){  $.ajax( {        url: "academy", //这里是静态页的地址        type: "GET", //静态页用get方法，否则服务器会抛出405错误        success: function(data){            //var result = $(data).find("另一个html页面的指定的一部分");            $("#content").html(data);        }});  }  </script><link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />  <meta charset="UTF-8"><title>Insert title here</title></head><body><div>上半部分文字---优课管理平台</div><div><ul><!-- <li ><a href="table-userb.html" data-toggle="tab" onclick="userb()"> 用户基本信息管理</a></li>data-toggle作用就是将href的效果取消，href效果使鼠标移动上去是小手掌，而不是罗马I --><li ><a href="#" data-toggle="tab" onclick="userb()"> 用户基本信息管理</a></li>   <li><a href="#" data-toggle="tab" onclick="course()">课程管理</a></li>   <li><a href="#" data-toggle="tab" onclick="academy()">学院管理</a></li><!-- <li>左边菜单栏--标题1</li><li>左边菜单栏--标题2</li><li>左边菜单栏--标题3</li> --></ul></div><div id = "content"> 中间内容部分</div><div>底部logo相关</div></body></html>

要加载的页面table-course.html内容

<!DOCTYPE html><html><head><script src="webjars/jquery/3.1.1/jquery.min.js"></script><script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script><script>  </script><link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />  <meta charset="UTF-8"><title>Insert title here</title></head><body>课程管理内容</body></html>

服务端Controller内容：

@Controllerpublic class BackCourseController {@GetMapping(value="/course")public String course() {return "table-course.html";}}

阅读全文

0 0