前端开发
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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<%pageContext.setAttribute("path",request.getContextPath());%>
<%--上述 拿到项目地址--%>
<link href="${path}/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${path}/js/jquery-1.11.0.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${path}/js/bootstrap.min.js"></script>
<title>Title</title>
</head>
使用项目访问路径 ${path}
<%pageContext.setAttribute("path",request.getContextPath());%>
设置spring-mvc的静态资源拦截规则
<!--过滤静态资源 .js .css png-->
<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分页
pagehelper分页插件介绍
pagehelper是什么？
针对Mybatis提供分页插件，将分页查询简化
pagehelper分页配置
（1）依赖配置 pagehelper
（2）配置插件plugin
》1 ： mybatis核心配置文件，在application中引入 mybatis核心配置文件
》2 ： 直接在application中配置
pom.xml 依赖配置
<!--引入pageHelper分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
配置方式1：SqlMapConfig.xml中配置
<!--
参数合理化
如果当前currPage < 1 则按currPage = 1查询
如果当前currPage > totalPage 则按currPage = totalPage 查询
-->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<property name="reasonable" value="true"/>
</plugin>
</plugins>
注意还需要在applicationContext.xml中添加
在session工厂中加入
<property name="configLocation" value="classpath:SqlMapConfig.xml"/>
也就是
<!-- session工厂-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!-- com.wzx.domain.Person person-->
<property name="typeAliasesPackage" value="com.wzx.domain"/>
<property name="configLocation" value="classpath:SqlMapConfig.xml"/>
</bean>
配置方式2：applicationContext.xml中配置
在session工厂中加入
<!-- PageHelper配置 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<!--使用下面的方式配置参数，一行配置一个 -->
<!-- pageNum<=0 时会查询第一页 -->
<!-- 指定数据库方言 -->
<value>
reasonable=true
helperDialect=mysql
</value>
</property>
</bean>
</array>
</property>
也就是
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<!-- com.wzx.domain.Person person-->
<property name="typeAliasesPackage" value="com.wzx.domain"/>
<!-- <property name="configLocation" value="classpath:SqlMapConfig.xml"/>-->
<!-- PageHelper配置 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<!--使用下面的方式配置参数，一行配置一个 -->
<!-- pageNum<=0 时会查询第一页 -->
<!-- 指定数据库方言 -->
<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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<% pageContext.setAttribute("path",request.getContextPath());%>
<%--上述 拿到项目地址--%>
<link href="${path}/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${path}/js/jquery-1.11.0.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${path}/js/bootstrap.min.js"></script>
<title>Title</title>
</head>
<body>
${
pi}
<div class="container" >
<!-- container 表示容器，所有内容放进这个容器-->
<div class="row">
<!-- row表示 一行的宽度-->
<div class="col-md-4" >
<!--col-md-4 表示使用一行的4/12宽度 -->
<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>
效果图
