一.前端--左側(cè)導(dǎo)航欄，右側(cè)內(nèi)容
理想如下：
1.左右側(cè)的框架搭建
?以學(xué)生登錄系統(tǒng)為例，下方代碼能夠搭建基本的左側(cè)導(dǎo)航欄，右側(cè)內(nèi)容的框架?
- 導(dǎo)航欄中每一行用超鏈接表示，a 指向?qū)?yīng)的controller層方法，target="iframe_a"指向右側(cè)內(nèi)容，最終實(shí)現(xiàn)在iframe_a容器中顯示conroller層調(diào)用的方法顯示的界面
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" >
<title>首頁(yè)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%Boolean result2 = (Boolean) session.getAttribute("result_login");
if(result2){ %>
<script type="text/javascript">
$(function(){alert("登陸成功！");});
</script>
<%
session.setAttribute("result_login",null);}
%>
<style>
.father_box {
margin-top: 50px;
position: relative;
width: 100%;
height: 800px;
}
.content_one {
overflow: hidden;
padding-top: 3px;
width: 18%;
height: 800px;
background-color: orange;
}
.content_two {
position: relative;
left: 18%;
right: 12%;
top: -800px;
width: 82%;
height: 750px;
}
.nav-stacked {
width:96%;
margin: 0 auto;
text-align:center;
}
</style>
</head>
<body>
<%--通過(guò)學(xué)生登錄時(shí)的判斷獲取該學(xué)生的信息--%>
<%Students students = (Students) session.getAttribute("student_curr");%>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="badge-primary">TYUT公寓管理系統(tǒng)--你好，<%=students.getsName()%>同學(xué)，歡迎登陸!
<ul class="nav navbar-nav">
<!-- Dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >
個(gè)人中心
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#" >個(gè)人信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul></div>
</nav>
<div class="father_box">
<div class="content_one">
<ul class="nav nav-pills nav-stacked" >
<!--style="width:96%;margin: 0 auto; text-align:center" 行內(nèi)優(yōu)先級(jí)高可改變導(dǎo)航的寬高用%可以是頁(yè)面更協(xié)調(diào)-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">報(bào)修 <span class="caret"></span></a>
<ul class="dropdown-menu ">
<li><a href="${pageContext.request.contextPath}/Msg/PageFindMsg" target="iframe_a">報(bào)修記錄</a></li>
<li><a href="${pageContext.request.contextPath}/Msg/toInsertMsg?sId=<%=students.getsId()%>" target="iframe_a">申請(qǐng)報(bào)修</a></li>
</ul>
</li>
</ul>
</div>
<div class="content_two">
<!--右側(cè)內(nèi)容顯示的盒子-->
<iframe width="100%" height="100%" name="iframe_a" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
如下所示，點(diǎn)擊報(bào)修后?任意選擇，在右側(cè)跳轉(zhuǎn)對(duì)應(yīng)界面，以顯示報(bào)修記錄為例
- 分頁(yè)展示的controller層方法（僅僅是個(gè)例子），主要是看return的是“showMsg.jsp”
@RequestMapping("/PageFindMsg")
public String PageFindAllMsg(@RequestParam(value = "pn",defaultValue = "1") int pn, HttpSession session){
Page result = studentMsgService.showPageMsg(pn,3,session);
System.out.println(pn);
session.setAttribute("page",result);
System.out.println(result);
return "StudentMsg/showMsg";
}2.表格的前端顯示
接著看showMsg.jsp，復(fù)制粘貼就行，填上自己的內(nèi)容！最后分頁(yè)的部分可以在本文后半部分看；
<%@ page import="com.tyut.pojo.Page" %>
<%@ page import="com.tyut.pojo.Msg" %>
<%@ page import="java.util.List" %>
<%@ page import="com.tyut.pojo.Students" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>保修記錄</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%String result = (String) session.getAttribute("res_add");
if(result!=null){ %>
<script type="text/javascript">
$(function(){alert("<%=result%>");});
</script>
<%
session.setAttribute("res_add",null);}
%>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>保修信息列表</small>
</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 column">
<%Students students = (Students)session.getAttribute("student_curr");%>
<a class="btn btn-primary" href="${pageContext.request.contextPath}/Msg/toInsertMsg?sId=<%=students.getsId()%>">申請(qǐng)保修</a>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped" id="managers_table">
<thead>
<%--表頭--%>
<tr>
<th>發(fā)送者Id</th>
<th>發(fā)送者姓名</th>
<th>報(bào)修內(nèi)容</th>
<th>發(fā)送時(shí)間</th>
<th>狀態(tài)</th>
<th>樓管備注</th>
</tr>
</thead>
<%-- 表主體--%>
<tbody>
<%Page page1 = (Page)session.getAttribute("page");%>
<%List<Msg> msgs = page1.getRows_Msg(); %>
<%if(msgs.size() == 0){%>
<tr><div class="text-center">暫無(wú)信息</div></tr>
<%}%>
<%for(Msg msg:msgs){%>
<tr>
<td><%=msg.getsId()%></td>
<td><%=msg.getsName()%></td>
<td><%=msg.getMsg()%></td>
<td><%=msg.getTime()%></td>
<% if(msg.getStatus().equals("待處理")){%>
<td><p class="text-danger"><%=msg.getStatus()%></p></td>
<%}else{%>
<td> <p class="text-success"><%=msg.getStatus()%></p></td>
<%}%>
<td><%=msg.getManagerResp()%></td>
</tr>
<%}%>
</tbody>
</table>
<div class="curPage" align="center">
當(dāng)前頁(yè) <%=page1.getCur()%> 共 <%=page1.getEnd()%> 頁(yè),共 <%=page1.getTotal()%> 條數(shù)據(jù)
</div>
<a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getPrePage()%>">上一頁(yè)</a>
<a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getNextPage()%>">下一頁(yè)</a>
</div>
</div>
</div>
</div>
</body>
</html>該表格運(yùn)行樣式如下，是運(yùn)用了bootstrap的簡(jiǎn)易樣式；
3.新增、修改頁(yè)面--表單的前端顯示
以學(xué)生發(fā)送報(bào)修信息為例,點(diǎn)擊“申請(qǐng)報(bào)修”后，實(shí)際調(diào)用/Msg/toInsertMsg對(duì)應(yīng)的controller層方法，由他跳轉(zhuǎn)到填寫(xiě)表單的頁(yè)面sendMsg.jsp
@RequestMapping("/toInsertMsg")
public String toInsertMsg(int sId, HttpSession session){
return "StudentMsg/sendMsg";
}
sendMsg.jsp如下，這里關(guān)于學(xué)生的id、姓名和宿舍樓號(hào)等信息都是寫(xiě)死的，學(xué)生不用填
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="all" class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>修改職工信息</small>
</h1>
</div>
</div>
</div>
<%Students stu = (Students)session.getAttribute("student_curr");%>
<form
name="newManager" class="form-horizontal" role="form" action="${pageContext.request.contextPath}/Msg/insertMsg" method="post">
<table class="table table-hover">
<tr>
<th>發(fā)送者Id:</th>
<td>
<%=stu.getsId()%><input type="hidden" name="sId" value=<%=stu.getsId()%>>
</td>
</tr>
<tr>
<th>發(fā)送者姓名:</th>
<td><%=stu.getsName()%><input type="hidden" name="sName" value=<%=stu.getsName()%>></td>
</tr>
<tr>
<th>報(bào)修內(nèi)容:</th>
<td> <div class="row">
<div class="col-md-3" size="10">
<textarea class="form-control" rows="3" name="msg"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<th>聯(lián)系電話：</th>
<td><input class="form-control" type="text" name="sPhone" value=<%=stu.getsPhone()%>></td>>
</tr>
<input type="hidden" value="待處理" name="status" >
<input type="hidden" value="暫無(wú)" name="managerResp" >
<input type="hidden" value=<%=stu.getsNumber()%> name="sNumber" >
</table>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</div>
</body>
</html>表單提交的controller方法如下，新增過(guò)后還是要到分頁(yè)展示的controller方法；
@RequestMapping("/insertMsg")
public String InsertMsg(Msg message,HttpSession session){
int row = studentMsgService.InsertMsg(message);
if(row>0){
session.setAttribute("res_add","申請(qǐng)報(bào)修成功！");
}else {
session.setAttribute("res_add","報(bào)修失?。?);
}
return "redirect:/Msg/PageFindMsg";
}最終，運(yùn)行界面如下：
二、簡(jiǎn)單分頁(yè)的實(shí)現(xiàn)
1.導(dǎo)入依賴
在pom.xml中導(dǎo)入依賴
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.7</version>
</dependency>2.在mybatis-config.xml中配置
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<property name="reasonable" value="true"/>
</plugin>
</plugins>3.在pojo包中新建一個(gè)對(duì)象類--Page.java
public class Page {
private int start; // 首頁(yè)
private int end; // 尾頁(yè)
private int cur; // 當(dāng)前頁(yè)
private long total; // 總記錄數(shù)
private List<DormManagers> rows; // 記錄的集合（查詢出來(lái)的相應(yīng)頁(yè)的數(shù)據(jù)）
private PageInfo<DormManagers> pageInfo; //這里的DormManagers、Msg都是你要查對(duì)象的類型
private List<Msg> rows_Msg;
public PageInfo<Msg> getPageInfo_Msg() {
return pageInfo_Msg;
}
//getter、setter方法省略
}rows--用于存放分頁(yè)查出來(lái)的結(jié)果，在service層使用；
PageInfo--是我們使用分頁(yè)插件提供的一個(gè)類型的對(duì)象，能夠包含頁(yè)數(shù)信息、前一頁(yè)、后一頁(yè)等等；
4.在Service層
service層的接口要有分頁(yè)的方法、實(shí)現(xiàn)類也要有
接口如下，只需要關(guān)注第四個(gè)；
public interface StudentMsgService {
public List<Msg> FindMsgBySId(int sId);
public int InsertMsg(Msg message);
public Students FindStuBySId(int sId);
public Page showPageMsg(int page, int rows, HttpSession session);
public List<Msg> FindHistoryFixByStatus(Msg msg);
}實(shí)現(xiàn)類如下，這里我想要實(shí)現(xiàn)多條件查詢，在前端獲取到查詢信息封裝到一個(gè)Msg對(duì)象中，存到session中，名為msg_condition。
解釋參數(shù)：
page--當(dāng)前頁(yè)數(shù)
rows--每頁(yè)有多少行
最終得到的：
list--當(dāng)前第page頁(yè)的數(shù)據(jù)集合
pageInfos--可以理解為一些頁(yè)的配置信息
?有小伙伴可能有疑問(wèn)，這里為什么要傳一個(gè)session作為參數(shù)，而且session是怎么來(lái)的呢？
? ? ? ?首先，我們是學(xué)生端，只能查到登錄系統(tǒng)的學(xué)生的信息，所以session用來(lái)傳學(xué)生學(xué)號(hào)的，還有一個(gè)作用就是用來(lái)傳查詢參數(shù)（封裝在Msg中，剛好學(xué)生Id也在這個(gè)Msg對(duì)象中）；這個(gè)session是controller層調(diào)用service層的方法傳來(lái)的，個(gè)人理解為，整個(gè)項(xiàng)目用一個(gè)session對(duì)象，他有許多自己定義的變量。
public Page showPageMsg(int page, int rows, HttpSession session) {
PageHelper.startPage(page, rows);
Msg msg= (Msg)session.getAttribute("msg_condition");
List<Msg> list = studentMsgMapper.FindHistoryFix(msg);
System.out.println(msg.toString());
for(Msg msg1:list){
System.out.println(msg1.toString());
}
PageInfo<Msg> pageInfos=new PageInfo<>(list);
// 創(chuàng)建一個(gè)返回值對(duì)象,封裝結(jié)果
Page result = new Page();
result.setPageInfo_Msg(pageInfos);
// 封裝數(shù)據(jù)
result.setRows_Msg(list);
// 取記錄總條數(shù)
PageInfo<Msg> pageInfo = new PageInfo<>(list);
result.setTotal(pageInfo.getTotal());
// 取第一頁(yè)
result.setStart(pageInfo.getNavigateFirstPage());
// 取最后一頁(yè)
result.setEnd(pageInfo.getNavigateLastPage());
// 設(shè)置當(dāng)前頁(yè)
result.setCur(page);
return result;
}
那么我剛點(diǎn)進(jìn)去的分頁(yè)頁(yè)面如何顯示呢？
? ? ? ?前端不獲取也能顯示分頁(yè)信息，在學(xué)生登錄時(shí)就將登錄獲取到的學(xué)生id存進(jìn)一個(gè)Msg對(duì)象中，設(shè)置成session變量，名稱就為msg_condition，這樣，查看保修信息時(shí)也可以直接在showPageMsg獲取到id，其他屬性均為空。
@RequestMapping("/loginStudent")
public String StudentLogin(Students students,HttpSession session){
Students stu = studentMsgService.FindStuBySId(students.getsId());
if(students.getsPassword().equals(stu.getsPassword())){
Msg msg = new Msg();
msg.setsId(stu.getsId());
session.setAttribute("result_login",true);
session.setAttribute("student_curr",stu);
session.setAttribute("msg_condition",msg);
return "redirect:/Msg/toPageStudentFirst";
}else {
session.setAttribute("result_login",false);
return "redirect:/Msg/toStudentLogin";
}
}在剛開(kāi)始寫(xiě)時(shí)，可以把下面的第三行換成如下，?來(lái)檢測(cè)一下自己寫(xiě)的對(duì)不對(duì)，這樣就是查所有的屬于自己id的，沒(méi)有限制條件。
int sId = (int)session.getAttribute("sId");5.在Controller層
pn不傳參數(shù)，默認(rèn)為第1頁(yè)；
?將結(jié)果result（Page類型的）傳到前端去；
@RequestMapping("/PageFindMsg")
public String PageFindAllMsg(@RequestParam(value = "pn",defaultValue = "1") int pn, HttpSession session){
Page result = studentMsgService.showPageMsg(pn,3,session);
System.out.println(pn);
session.setAttribute("page",result);
System.out.println(result);
return "StudentMsg/showMsg";
}6.前端
之前已經(jīng)寫(xiě)過(guò)了，分頁(yè)主要用于表格的展示，主要看以下部分：
- 在前端通過(guò)page1.getRows_Msg用于獲取當(dāng)前頁(yè)數(shù)的展示信息，再進(jìn)行遍歷即可；
- 當(dāng)前頁(yè)數(shù)、結(jié)束頁(yè)數(shù)、總頁(yè)數(shù)都是我們之前定義的屬性，調(diào)用get方法即可；
- 上一頁(yè)、下一頁(yè)是我們使用的分頁(yè)插件提供的對(duì)象PageInfo的屬性，兩次調(diào)用get方法即可；
<tbody>
<%Page page1 = (Page)session.getAttribute("page");%>
<%List<Msg> msgs = page1.getRows_Msg(); %>
<%if(msgs.size() == 0){%>
<tr><div class="text-center">暫無(wú)信息</div></tr>
<%}%>
<%for(Msg msg:msgs){%>
<tr>
<td><%=msg.getsId()%></td>
<td><%=msg.getsName()%></td>
<td><%=msg.getMsg()%></td>
<td><%=msg.getTime()%></td>
<% if(msg.getStatus().equals("待處理")){%>
<td><p class="text-danger"><%=msg.getStatus()%></p></td>
<%}else{%>
<td> <p class="text-success"><%=msg.getStatus()%></p></td>
<%}%>
<td><%=msg.getManagerResp()%></td>
</tr>
<%}%>
</tbody>
</table>
<div class="curPage" align="center">
當(dāng)前頁(yè) <%=page1.getCur()%> 共 <%=page1.getEnd()%> 頁(yè),共 <%=page1.getTotal()%> 條數(shù)據(jù)
</div>
<a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getPrePage()%>">上一頁(yè)</a>
<a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getNextPage()%>">下一頁(yè)</a>能力有限，很多東西也沒(méi)搞明白，自己用笨辦法實(shí)現(xiàn)的，也還有很多問(wèn)題沒(méi)有解決，歡迎討論！
三、補(bǔ)充
1.對(duì)于分頁(yè)下方的頁(yè)碼錯(cuò)誤的問(wèn)題
在展示的前端頁(yè)面的“上一頁(yè)”、“下一頁(yè)”超鏈接前加入以下代碼，并修改超鏈接即可
<%int pn1=page1.getPageInfo_Msg().getPrePage();
int pn2 = page1.getPageInfo_Msg().getNextPage();
int pn3 = page1.getEnd();
if(pn1 ==0){pn1++;}
if(pn2 == 0){pn2=pn3;}%>
<a class="btn btn-primary" href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=pn1%>">上一頁(yè)</a>
<a class="btn btn-primary" href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=pn2%>">下一頁(yè)</a>
這樣就算點(diǎn)擊到第一頁(yè)再點(diǎn)擊“上一頁(yè)”，頁(yè)碼也不會(huì)出錯(cuò)了，“下一頁(yè)”同理；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-819610.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-819610.html
到了這里，關(guān)于關(guān)于BootStrap的前端簡(jiǎn)易樣式和簡(jiǎn)單分頁(yè)的實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
