【前端开发bootstrap框架 pagehelper分页】bootstrap和pagehelper分页插件的学习使用bootstrap模板 pagehelper的配置

it2026-01-31 2

前端开发

bootstrap框架bootstrap的使用步骤（bootstrap模板）配置、使用、测试使用bootstrap复制bootstrap的内容（css/js/fonts等）到项目的webapp文件夹在页面引入使用项目访问路径 ${path}设置spring-mvc的静态资源拦截规则使用 pagehelper分页不使用插件时pagehelper分页插件介绍pagehelper分页配置pom.xml 依赖配置配置方式1：SqlMapConfig.xml中配置配置方式2：applicationContext.xml中配置 TestPageHelper原理在拦截器**PageInterceptor**报错 DepartmentV3Controllertemplate.jsp效果图

bootstrap框架

bootstrap是什么？ Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架

bootstrap的使用步骤（bootstrap模板）配置、使用、测试

使用bootstrap

（1）复制bootstrap的内容到webapp文件夹（2）在页面引入（3）使用项目访问路径 ${path} （4）设置spring-mvc的静态资源拦截规则（5）测试

复制bootstrap的内容（css/js/fonts等）到项目的webapp文件夹

在页面引入

1.3个meta标签必须放在最前面，任何其他内容都必须跟随其后 2.jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <%pageContext.setAttribute("path",request.getContextPath());%> <%--上述拿到项目地址--%> <link href="${path}/css/bootstrap.min.css" rel="stylesheet">  <script src="${path}/js/jquery-1.11.0.min.js"></script>  <script src="${path}/js/bootstrap.min.js"></script> <title>Title</title> </head>

使用项目访问路径 ${path}

<%pageContext.setAttribute("path",request.getContextPath());%>

设置spring-mvc的静态资源拦截规则

<mvc:resources location="/css/" mapping="/css/**" /> <mvc:resources location="/images/" mapping="/images/**" /> <mvc:resources location="/js/" mapping="/js/**" /> <mvc:resources location="/fonts/" mapping="/fonts/**" />

使用

然后在bootstrap的官网上搬运css样式 https://v3.bootcss.com/css/

pagehelper分页

不使用插件时

创建pageBean 四个参数总条数总页数每页条数当前第几页一个集合(四个整数的数据)

总条数(total): select count(*) from company 每页条数(pagesize):自己定总页数: total%pagesize==0?total/pagesize:total/pagesize+1 当前几页(currentpage) 集合list:start ,pagesize start:(currentpage-1)*pagesize limit start ,pagesize 分页 select * from company where limit start ,pagesize(当前页的数据是在数据库中start行开始,到start+pagesize行结束)

pagehelper分页插件介绍

pagehelper是什么？针对Mybatis提供分页插件，将分页查询简化

pagehelper分页配置

（1）依赖配置 pagehelper （2）配置插件plugin 》1 ： mybatis核心配置文件，在application中引入 mybatis核心配置文件》2 ：直接在application中配置

pom.xml 依赖配置

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.0.0</version> </dependency>

配置方式1：SqlMapConfig.xml中配置

<plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <property name="reasonable" value="true"/> </plugin> </plugins>

注意还需要在applicationContext.xml中添加在session工厂中加入

也就是

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/>  <property name="typeAliasesPackage" value="com.wzx.domain"/> <property name="configLocation" value="classpath:SqlMapConfig.xml"/> </bean>

配置方式2：applicationContext.xml中配置

在session工厂中加入

<property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties">    <value> reasonable=true helperDialect=mysql </value> </property> </bean> </array> </property>

也就是

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/>  <property name="typeAliasesPackage" value="com.wzx.domain"/>   <property name="plugins"> <array> <bean class="com.github.pagehelper.PageInterceptor"> <property name="properties">    <value> reasonable=true helperDialect=mysql </value> </property> </bean> </array> </property> </bean>

TestPageHelper

@RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration("classpath:applicationContext.xml") public class TestPageHelper { @Autowired private IDepartmentService departmentService; private static final Logger l = LoggerFactory.getLogger(TestPageHelper.class); @Test public void test01(){ //你需要第几页数据，每页数据多条 //调用分页插件只要两行代码 PageHelper.startPage(1,10);//参1：当前页参2 每页记录数 List<Department> list = departmentService.findAllDepartments(); //把查询的到数据放入PageInfo中 PageInfo<Department> pageInfo = new PageInfo<>(list); l.info("test01 pageInfo="+pageInfo); } }

原理在拦截器PageInterceptor

由于拦截器PageInterceptor会拦截sql语句,所以只要写一个全查语句,拦截器会自动拼接limit分页

select count(*) from department select * from department limit 0, 20 ;//第一页 select * from department limit 20, 20 ;//第二页 select * from department;//由拦截器 PageInterceptor生成以上sql

先调用PageHelper.start(1,10)再调用全查，才能自动分页

报错

sql查询语句不能加";"分号

<select id="findAllDepartment" resultType="department"> select * from department </select>

DepartmentV3Controller

@RequestMapping(path="/template",method = RequestMethod.GET) public String listUIV3(Model model,Integer currPage,Integer pageSize){ //你需要第几页数据，每页数据多条 System.out.println("当前页:"+currPage+"每页数据的个数:"+pageSize); //给定分页参数 if(currPage==null) { currPage=1; } if(pageSize==null) { pageSize=6; } PageHelper.startPage(currPage,pageSize); //先给定分页参数,在全查,这样拦截器PageInterceptor才会拦截到全查结果,并对其分页 List<Department> list= iDepartmentDao.findAllDepartment(); PageInfo<Department> pageInfo = new PageInfo<>(list); model.addAttribute("pi",pageInfo); return "template"; }

template.jsp

》》导入c标签使用里面的foreach与if标签 <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %> 》》循环列表的行

<%-- Created by IntelliJ IDEA. User: 25863 Date: 2020/10/22 Time: 10:31 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <% pageContext.setAttribute("path",request.getContextPath());%> <%--上述拿到项目地址--%> <link href="${path}/css/bootstrap.min.css" rel="stylesheet">  <script src="${path}/js/jquery-1.11.0.min.js"></script>  <script src="${path}/js/bootstrap.min.js"></script> <title>Title</title> </head> <body> ${pi} <div class="container" >  <div class="row">  <div class="col-md-4" >  <h1>部门列表</h1> </div> </div> <div class="row"> <%-- <div class="col-md-8" ></div>--%> <div class="col-md-4 col-md-offset-8" > <button class="btn btn-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增</button> </div> </div> <div class="row"> <div class="col-md-12" > <table class="table table-hover"> <tr > <th >部门编号</th> <th ></th> <th >部门名称</th> <th >操作</th> </tr> <c:forEach items="${pi.list}" var="dept">  <tr> <td>${dept.did}</td> <td></td> <td>${dept.dname}</td> <td> <button class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> <button class="btn btn-info"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改 </button> </td> </tr> </c:forEach> </table> </div> </div> <div class="row"> <div class="col-md-6" >当前共有${pi.total}条记录，共${pi.pages}页</div> <div class="col-md-6" > <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">首页</span> </a> </li> <c:if test="${pi.hasPreviousPage}"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">上一页</span> </a> </li> </c:if> <%-- <li class="active"><a href="#">1</a></li>--%> <c:forEach items="${pi.navigatepageNums}" var="num"> <c:if test="${num == pi.pageNum}"> <li class="active"><a href="#">${num}</a></li> </c:if> <c:if test="${num != pi.pageNum}"> <li><a href="#">${num}</a></li> </c:if> </c:forEach> <c:if test="${pi.hasNextPage}"> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">下一页</span> </a> </li> </c:if> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">末页</span> </a> </li> </ul> </nav> </div> </div> </div> </body> </html>

效果图

最新回复(0)

【前端开发bootstrap框架 pagehelper分页 】bootstrap和pagehelper分页插件的学习使用bootstrap模板 pagehelper的配置