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

一.前端--左侧导航栏，右侧内容

理想如下：

1.左右侧的框架搭建

以学生登录系统为例，下方代码能够搭建基本的左侧导航栏，右侧内容的框架

导航栏中每一行用超链接表示，a 指向对应的controller层方法，target="iframe_a"指向右侧内容，最终实现在iframe_a容器中显示conroller层调用的方法显示的界面

<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" >
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <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>
<%--通过学生登录时的判断获取该学生的信息--%>
<%Students students = (Students) session.getAttribute("student_curr");%>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="badge-primary">TYUT公寓管理系统--你好，<%=students.getsName()%>同学，欢迎登陆!
    <ul class="nav navbar-nav">
        <!-- Dropdown -->
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
                个人中心
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#" >个人信息</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" 行内优先级高可改变导航的宽高用%可以是页面更协调-->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">报修 <span class="caret"></span></a>
                <ul class="dropdown-menu ">
                    <li><a href="${pageContext.request.contextPath}/Msg/PageFindMsg" target="iframe_a">报修记录</a></li>
                    <li><a href="${pageContext.request.contextPath}/Msg/toInsertMsg?sId=<%=students.getsId()%>" target="iframe_a">申请报修</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="content_two">
        <!--右侧内容显示的盒子-->
        <iframe  width="100%" height="100%" name="iframe_a" frameborder="0" scrolling="no"></iframe>
    </div>
</div>
</body>
</html>

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

分页展示的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，复制粘贴就行，填上自己的内容！最后分页的部分可以在本文后半部分看；

<%@ 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" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <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()%>">申请保修</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>发送者Id</th>
                    <th>发送者姓名</th>
                    <th>报修内容</th>
                    <th>发送时间</th>
                    <th>状态</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">暂无信息</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">
                当前页&nbsp; <%=page1.getCur()%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;共&nbsp; <%=page1.getEnd()%>&nbsp;页,共&nbsp; <%=page1.getTotal()%>&nbsp;条数据
            </div>
            <a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getPrePage()%>">上一页</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
            <a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getNextPage()%>">下一页</a>
        </div>
    </div>
</div>
</div>
</body>
</html>

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

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

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

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

    }

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

<%@ 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" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <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>发送者Id:</th>
            <td>
                <%=stu.getsId()%><input type="hidden" name="sId" value=<%=stu.getsId()%>>
            </td>
        </tr>

        <tr>
            <th>发送者姓名:</th>
            <td><%=stu.getsName()%><input type="hidden" name="sName" value=<%=stu.getsName()%>></td>
        </tr>
        <tr>
            <th>报修内容:</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>联系电话：</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="暂无" name="managerResp" >
    <input type="hidden" value=<%=stu.getsNumber()%> name="sNumber" >
    </table>
    <input  type="submit" value="提交"/>
    <input  type="reset" value="重置"/>
</form>
</div>
</body>
</html>

表单提交的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中导入依赖

 <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包中新建一个对象类--Page.java

public class Page {

    private int start;    // 首页
    private int end;    // 尾页
    private int cur;    // 当前页
    private long total;    // 总记录数
    private List<DormManagers> rows;    // 记录的集合（查询出来的相应页的数据）
    private PageInfo<DormManagers> pageInfo;  //这里的DormManagers、Msg都是你要查对象的类型
    private List<Msg> rows_Msg;     
    public PageInfo<Msg> getPageInfo_Msg() {
        return pageInfo_Msg;
    }
//getter、setter方法省略
}

rows--用于存放分页查出来的结果，在service层使用；

PageInfo--是我们使用分页插件提供的一个类型的对象，能够包含页数信息、前一页、后一页等等；

4.在Service层

service层的接口要有分页的方法、实现类也要有

接口如下，只需要关注第四个；

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);
}

实现类如下，这里我想要实现多条件查询，在前端获取到查询信息封装到一个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<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);
        // 创建一个返回值对象,封装结果
        Page result = new Page();
        result.setPageInfo_Msg(pageInfos);
        // 封装数据
        result.setRows_Msg(list);
        // 取记录总条数
        PageInfo<Msg> 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方法即可；

<tbody>
                <%Page page1 = (Page)session.getAttribute("page");%>
                <%List<Msg> msgs = page1.getRows_Msg(); %>
                <%if(msgs.size() == 0){%>
                <tr><div class="text-center">暂无信息</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">
                当前页&nbsp; <%=page1.getCur()%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;共&nbsp; <%=page1.getEnd()%>&nbsp;页,共&nbsp; <%=page1.getTotal()%>&nbsp;条数据
            </div>
            <a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getPrePage()%>">上一页</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
            <a href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=page1.getPageInfo_Msg().getNextPage()%>">下一页</a>

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

三、补充

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

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

  <%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%>">上一页</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/Msg/PageFindMsg?pn=<%=pn2%>">下一页</a>

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

标签：前端 bootstrap html

本文转载自: https://blog.csdn.net/weixin_63751113/article/details/135560360
版权归原作者 是好寂馍耶 所有，如有侵权，请联系我们删除。