关于BootStrap的前端简易样式和简单分页的实现

一.前端–左侧导航栏,右侧内容


理想如下:

关于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">申请报修

如下所示,点击报修后 任意选择,在右侧跳转对应界面,以显示报修记录为例

关于BootStrap的前端简易样式和简单分页的实现

  • 分页展示的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("");});
    
    




    
        
            
                

保修信息列表

">申请保修 <%List msgs = page1.getRows_Msg(); %> 暂无信息
发送者Id 发送者姓名 报修内容 发送时间 状态 楼管备注

当前页 共 页,共 条数据 ">上一页 ">下一页

该表格运行样式如下,是运用了bootstrap的简易样式;

关于BootStrap的前端简易样式和简单分页的实现

3.新增、修改页面–表单的前端显示


以学生发送报修信息为例,点击“申请报修”后,实际调用/Msg/toInsertMsg对应的controller层方法,由他跳转到填写表单的页面sendMsg.jsp

@RequestMapping("/toInsertMsg")
    public String toInsertMsg(int sId, HttpSession session){
       return "StudentMsg/sendMsg";

    }

sendMsg.jsp如下,这里关于学生的id、姓名和宿舍楼号等信息都是写死的,学生不用填



    Title
    
    
    
    



    
        
            
                

修改职工信息

> <input type="hidden" value= name="sNumber" >
发送者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";
    }

最终,运行界面如下:

关于BootStrap的前端简易样式和简单分页的实现

二、简单分页的实现


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.前端


之前已经写过了,分页主要用于表格的展示,主要看以下部分:

  1. 在前端通过page1.getRows_Msg用于获取当前页数的展示信息,再进行遍历即可;
  2. 当前页数、结束页数、总页数都是我们之前定义的属性,调用get方法即可;
  3. 上一页、下一页是我们使用的分页插件提供的对象PageInfo的属性,两次调用get方法即可;

                
                <%List msgs = page1.getRows_Msg(); %>
                
                暂无信息
                
                
                
                    
                    
                    
                    
                    
                    

当前页 共 页,共 条数据 ">上一页 ">下一页

能力有限,很多东西也没搞明白,自己用笨办法实现的,也还有很多问题没有解决,欢迎讨论!

三、补充

1.对于分页下方的页码错误的问题

在展示的前端页面的“上一页”、“下一页”超链接前加入以下代码,并修改超链接即可

  
            ">上一页   
            ">下一页

这样就算点击到第一页再点击“上一页”,页码也不会出错了,“下一页”同理;

关于BootStrap的前端简易样式和简单分页的实现

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