关于BootStrap的前端简易样式和简单分页的实现
一.前端–左侧导航栏,右侧内容
理想如下:

1.左右侧的框架搭建
以学生登录系统为例,下方代码能够搭建基本的左侧导航栏,右侧内容的框架
- 导航栏中每一行用超链接表示,a 指向对应的controller层方法,target=”iframe_a”指向右侧内容,最终实现在iframe_a容器中显示conroller层调用的方法显示的界面
首页
$(function(){alert("登陆成功!");});
.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;
}
-
报修
- 报修记录
- " target="iframe_a">申请报修
如下所示,点击报修后 任意选择,在右侧跳转对应界面,以显示报修记录为例

- 分页展示的controller层方法(仅仅是个例子),主要是看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,复制粘贴就行,填上自己的内容!最后分页的部分可以在本文后半部分看;
保修记录
$(function(){alert("");});
保修信息列表
">申请保修
| 发送者Id | 发送者姓名 | 报修内容 | 发送时间 | 状态 | 楼管备注 | |
|---|---|---|---|---|---|---|
该表格运行样式如下,是运用了bootstrap的简易样式;

3.新增、修改页面–表单的前端显示
以学生发送报修信息为例,点击“申请报修”后,实际调用/Msg/toInsertMsg对应的controller层方法,由他跳转到填写表单的页面sendMsg.jsp
@RequestMapping("/toInsertMsg")
public String toInsertMsg(int sId, HttpSession session){
return "StudentMsg/sendMsg";
}
sendMsg.jsp如下,这里关于学生的id、姓名和宿舍楼号等信息都是写死的,学生不用填
Title
修改职工信息
| 发送者Id: | <input type="hidden" name="sId" value=> |
|---|---|
| 发送者姓名: | <input type="hidden" name="sName" value=> |
| 报修内容: | |
| 联系电话: | <input type="text" name="sPhone" value=> | >
表单提交的controller方法如下,新增过后还是要到分页展示的controller方法;
@RequestMapping("/insertMsg")
public String InsertMsg(Msg message,HttpSession session){
int row = studentMsgService.InsertMsg(message);
if(row>0){
session.setAttribute("res_add","申请报修成功!");
}else {
session.setAttribute("res_add","报修失败!");
}
return "redirect:/Msg/PageFindMsg";
}
最终,运行界面如下:

二、简单分页的实现
1.导入依赖
在pom.xml中导入依赖
com.github.pagehelper
pagehelper-spring-boot-starter
1.4.7
2.在mybatis-config.xml中配置
3.在pojo包中新建一个对象类–Page.java
public class Page {
private int start; // 首页
private int end; // 尾页
private int cur; // 当前页
private long total; // 总记录数
private List rows; // 记录的集合(查询出来的相应页的数据)
private PageInfo pageInfo; //这里的DormManagers、Msg都是你要查对象的类型
private List rows_Msg;
public PageInfo getPageInfo_Msg() {
return pageInfo_Msg;
}
//getter、setter方法省略
}
rows–用于存放分页查出来的结果,在service层使用;
PageInfo–是我们使用分页插件提供的一个类型的对象,能够包含页数信息、前一页、后一页等等;
4.在Service层
service层的接口要有分页的方法、实现类也要有
接口如下,只需要关注第四个;
public interface StudentMsgService {
public List FindMsgBySId(int sId);
public int InsertMsg(Msg message);
public Students FindStuBySId(int sId);
public Page showPageMsg(int page, int rows, HttpSession session);
public List FindHistoryFixByStatus(Msg msg);
}
实现类如下,这里我想要实现多条件查询,在前端获取到查询信息封装到一个Msg对象中,存到session中,名为msg_condition。
解释参数:
page–当前页数
rows–每页有多少行
最终得到的:
list–当前第page页的数据集合
pageInfos–可以理解为一些页的配置信息
有小伙伴可能有疑问,这里为什么要传一个session作为参数,而且session是怎么来的呢?
首先,我们是学生端,只能查到登录系统的学生的信息,所以session用来传学生学号的,还有一个作用就是用来传查询参数(封装在Msg中,刚好学生Id也在这个Msg对象中);这个session是controller层调用service层的方法传来的,个人理解为,整个项目用一个session对象,他有许多自己定义的变量。
public Page showPageMsg(int page, int rows, HttpSession session) {
PageHelper.startPage(page, rows);
Msg msg= (Msg)session.getAttribute("msg_condition");
List list = studentMsgMapper.FindHistoryFix(msg);
System.out.println(msg.toString());
for(Msg msg1:list){
System.out.println(msg1.toString());
}
PageInfo pageInfos=new PageInfo(list);
// 创建一个返回值对象,封装结果
Page result = new Page();
result.setPageInfo_Msg(pageInfos);
// 封装数据
result.setRows_Msg(list);
// 取记录总条数
PageInfo pageInfo = new PageInfo(list);
result.setTotal(pageInfo.getTotal());
// 取第一页
result.setStart(pageInfo.getNavigateFirstPage());
// 取最后一页
result.setEnd(pageInfo.getNavigateLastPage());
// 设置当前页
result.setCur(page);
return result;
}
那么我刚点进去的分页页面如何显示呢?
前端不获取也能显示分页信息,在学生登录时就将登录获取到的学生id存进一个Msg对象中,设置成session变量,名称就为msg_condition,这样,查看保修信息时也可以直接在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";
}
}
在刚开始写时,可以把下面的第三行换成如下, 来检测一下自己写的对不对,这样就是查所有的属于自己id的,没有限制条件。
int sId = (int)session.getAttribute("sId");
5.在Controller层
pn不传参数,默认为第1页;
将结果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.前端
之前已经写过了,分页主要用于表格的展示,主要看以下部分:
- 在前端通过page1.getRows_Msg用于获取当前页数的展示信息,再进行遍历即可;
- 当前页数、结束页数、总页数都是我们之前定义的属性,调用get方法即可;
- 上一页、下一页是我们使用的分页插件提供的对象PageInfo的属性,两次调用get方法即可;
<%List msgs = page1.getRows_Msg(); %>
暂无信息
当前页 共 页,共 条数据
">上一页
">下一页
能力有限,很多东西也没搞明白,自己用笨办法实现的,也还有很多问题没有解决,欢迎讨论!
三、补充
1.对于分页下方的页码错误的问题
在展示的前端页面的“上一页”、“下一页”超链接前加入以下代码,并修改超链接即可
">上一页
">下一页
这样就算点击到第一页再点击“上一页”,页码也不会出错了,“下一页”同理;

本文来自网络,不代表协通编程立场,如若转载,请注明出处:https://net2asp.com/231d6c5685.html
