JavaEE學習日誌(一百零五): ssm練習之訂單模塊實現，分頁查詢，分頁助手PageHelper

訂單模塊

查詢所有訂單

前端

<c:forEach items="${orderList}" var="order">
<tr>
	<td><input name="ids" type="checkbox"></td>
	<td>${order.id}</td>

	<td>${order.orderNum}</td>
	<td>
		<fmt:formatDate value="${order.orderTime}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
	</td>
	<td>${order.peopleCount}</td>
	<%--
		支付寶	0
		微信	1
		其他	2
	--%>
	<td>${order.payType==0?"支付寶":order.payType==1?"微信":"其他"}</td>
	<td>${order.orderStatus==0?"未支付":"已支付"}</td>
	<td>
		${order.product.productName}
	</td>


	<td class="text-center">
		<button type="button" class="btn bg-olive btn-xs"
			onclick='location.href="${pageContext.request.contextPath}/pages/order-show.jsp"'>訂單</button>
		<button type="button" class="btn bg-olive btn-xs"
			onclick='location.href="${pageContext.request.contextPath}/pages/order-show.jsp"'>查看</button>
	</td>
</tr>
</c:forEach>

OrderController

@Controller
@RequestMapping("/order")
public class OrderController {
    @Autowired
    OrderService orderService;

    /**
     * 查詢所有訂單
     * @return
     */
    @RequestMapping("/findAll")
    public ModelAndView findAll(){
        //查詢所有訂單
        List<Order> orderList = orderService.findAll();
        //modelandview
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("orderList",orderList);
        modelAndView.setViewName("order-list");
        return modelAndView;
    }
}

OrderService

@Service
public class OrderServiceImpl implements OrderService {
    @Autowired
    OrderDao orderDao;
    @Override
    public List<Order> findAll() {
        return orderDao.findAll();
    }
}

OrderDao

/**
     * 查詢全部訂單，需要映射product
     * @return
     */
    @Select("select * from orders")
    @Results({
            @Result(property = "product",column = "productId",javaType = Product.class,
            one = @One(select = "com.itheima.dao.ProductDao.findById"))
    })
    List<Order> findAll();

添加訂單的數據回顯

前端

<select class="form-control select2" style="width: 100%"
	name="product.id">
	<%--
		value：給程序員使用
		文本：給客戶看
	--%>
	<c:forEach items="${productList}" var="p">
		<option value="${p.id}" >${p.productName}</option>
	</c:forEach>
	
</select>

OrderController

/**
     * 添加訂單的數據回顯
     * @return
     */
    @RequestMapping("/addUI")
    public ModelAndView addUI(){
        //查詢所有產品數據
        List<Product> productList = productService.findAll();
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("productList",productList);
        modelAndView.setViewName("order-add");
        return modelAndView;
    }

添加訂單

前端

<form action="${pageContext.request.contextPath}/order/save" method="post">

OrderController

@RequestMapping("/save")
    public String save(Order order){
        orderService.save(order);
        return "redirect:/order/findAll";
    }

OrderService

@Override
    public void save(Order order) {
        orderDao.save(order);
    }

OrderDao

/**
     * 添加訂單
     * @param order
     */
    @Insert("insert into orders values(order_seq.nextval,#{orderNum},#{orderTime},#{peopleCount},#{orderDesc},#{payType},#{orderStatus},#{product.id})")
    void save(Order order);

分頁查詢

手動實現分頁查詢

PageBean

package com.itheima.domain;

import java.util.List;

/**
 * 分頁查詢的PageBean對象
 * 需要的參數
 * 總頁數 totalPage
 * 總條數 totalCount
 * 分頁條數 pageSize
 * 當前頁 currentPage
 * 當前頁數據 List<E>
 *
 */
public class PageBean<E> {
    private Integer totalPage;
    private Long totalCount;
    private Integer pageSize;
    private Integer currentPage;
    private List<E> list;

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public Long getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(Long totalCount) {
        this.totalCount = totalCount;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public List<E> getList() {
        return list;
    }

    public void setList(List<E> list) {
        this.list = list;
    }
}

ProductController

/**
     * 查詢全部產品
     * @return
     */
    @RequestMapping("/findAll")
    public ModelAndView findAll(
            @RequestParam(value = "currentPage", required = false, defaultValue = "1") Integer currentPage,
            @RequestParam(value = "pageSize", required = false, defaultValue = "5") Integer pageSize){
        PageBean<Product> pageBean = productService.findByPage(currentPage,pageSize);
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("pageBean",pageBean);
        modelAndView.setViewName("product-list");
        return modelAndView;
    }

ProductService

/**
     * 分頁查詢
     * @param currentPage
     * @param pageSize
     * @return
     */
    @Override
    public PageBean<Product> findByPage(Integer currentPage, Integer pageSize) {
        PageBean<Product> pageBean = new PageBean<>();
        //設置參數
        pageBean.setCurrentPage(currentPage);
        pageBean.setPageSize(pageSize);
        //設置總條數
        Long totalCount = productDao.findTotalCount();
        pageBean.setTotalCount(totalCount);
        //設置總頁數
        pageBean.setTotalPage((int)Math.ceil(totalCount*1.0/pageSize));
        //設置每頁數據
        Integer startIndex = (currentPage-1)*pageSize+1;
        Integer endIndex = currentPage*pageSize;
        List<Product> productList = productDao.findByPage(startIndex,endIndex);
        pageBean.setList(productList);
        return pageBean;
    }

ProductDao

 /**
     * 獲取產品的總條數
     * @return
     */
    @Select("select count(1) from product")
    Long findTotalCount();

    /**
     * 查詢每頁的數據
     * @param startIndex
     * @param endIndex
     * @return
     */
    @Select("select t.* from(select p.*,rownum rm from product p) t where rm between #{param1} and #{param2} ")
    List<Product> findByPage(Integer startIndex, Integer endIndex);

前端

數據顯示

<tbody>
<c:forEach items="${pageBean.list}" var="product">
	<tr>
		<td><input name="ids" type="checkbox" value="${product.id}"></td>
		<td>${product.id}</td>

		<td>${product.productNum}</td>
		<td>${product.productName}</td>
		<td>${product.cityName}</td>
		<td>
			<fmt:formatDate value="${product.departureTime}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
		</td>
		<td>${product.productPrice}</td>
		<td>${product.productDesc}</td>
		<td>${product.productStatus}</td>

		<td class="text-center">
			<button type="button" class="btn bg-olive btn-xs"
					onclick='delOne(${product.id})'>刪除</button>
			<button type="button" class="btn bg-olive btn-xs"
				onclick='location.href="all-order-manage-edit.html"'>訂單</button>
			<button type="button" class="btn bg-olive btn-xs"
				onclick='location.href="${pageContext.request.contextPath}/product/updateUI?id=${product.id}"'>修改</button>
		</td>
	</tr>
</c:forEach>



</tbody>

分頁導航條

<!-- .box-footer-->
<div class="box-footer">
	<div class="pull-left">
		<div class="form-group form-inline">
			總共${pageBean.totalPage}頁，共${pageBean.totalCount}條數據。 每頁
			<select id="pageSize" onchange="gotoPage(1)" class="form-control">
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="5" selected="selected">5</option>
				<option value="10">10</option>
			</select> 條
		</div>
	</div>

	<div class="box-tools pull-right">
		<ul class="pagination">
			<li><a href="javascript:gotoPage(1)" aria-label="Previous">首頁</a></li>
			<li><a href="javascript:gotoPage(${pageBean.currentPage-1})">上一頁</a></li>
			<c:forEach begin="1" end="${pageBean.totalPage}" var="i">
			<li><a href="javascript:gotoPage(${i})">${i}</a></li>
			</c:forEach>
			<li><a href="javascript:gotoPage(${pageBean.currentPage+1})">下一頁</a></li>
			<li><a href="javascript:gotoPage(${pageBean.totalPage})" aria-label="Next">尾頁</a></li>
		</ul>
	</div>

</div>
<!-- /.box-footer-->

js

$("#pageSize option[value=${pageBean.pageSize}]").prop("selected","selected");

function gotoPage(currentPage) {
	var pageSize = $("#pageSize").val();

	if (currentPage<1){
		return;
	}
	if (currentPage>${pageBean.totalPage}){
		return;
	}
	location.href = "${pageContext.request.contextPath}/product/findAll?currentPage="+currentPage+"&pageSize="+pageSize;
}

分頁助手PageHelper

PageHelper是國內非常優秀的一款開源的mybatis分頁插件，它支持基本主流與常用的數據庫，例如mysql、oracle、mariaDB、DB2、SQLite、Hsqldb等。

網址：https://pagehelper.github.io/

本項目在 github 的項目地址：https://github.com/pagehelper/Mybatis-PageHelper

本項目在 gitosc 的項目地址：http://git.oschina.net/free/Mybatis_PageHelper

引入依賴

 <!--分頁插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>

兩種配置方法

都在sqlSessionFactoryBean對象中進行配置

第一種：直接在application-dao.xml中進行配置，且需要指定數據庫

<!--sqlSessionFactoryBean對象-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
        <!--引入分頁插件  方法一-->
        <property name="plugins">
            <!--注入屬性-->
            <array>
                <!--引入插件類型-->
                <bean class="com.github.pagehelper.PageInterceptor">
                    <!--告訴分頁插件使用的是什麼數據庫-->
                    <property name="properties">
                        <props>
                            <!--helperDialect：分頁插件的方言-->
                            <prop key="helperDialect">oracle</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
        
    </bean>

第二種：創建SqlMapConfig.xml，然後再application-dao.xml中引用，不需要指定數據庫

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
</configuration>

<!--sqlSessionFactoryBean對象-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
       
        <!--引入分頁插件方法二-->
        <property name="configLocation" value="classpath:SqlMapConfig.xml"></property>
    </bean>

分頁助手的基本使用

1. 爲分頁助手初始化參數，會將參數放入當前線程中

PageHelper.startPage(currentPage,pageSize);

2. 查詢全部，並通過攔截器將參數傳遞給方法

List<Product> productList = productDao.findAll();

3. 創建PageInfo對象，相當於PageBean：需要通過構造傳入查詢的集合對象，也可以傳入當前頁面要顯示的頁碼數量

PageInfo<Product> pageInfo = new PageInfo<>(productList,5);

4. 可以獲取各種參數，詳情可以去PageInfo的pojo中查看

@Override
    public void testFindByPageHelper(Integer currentPage, Integer pageSize) {
        //爲分頁助手初始化參數
        PageHelper.startPage(currentPage,pageSize);
        //查詢全部
        List<Product> productList = productDao.findAll();
        //創建PageInfo對象，相當於PageBean：需要通過構造傳入查詢的集合對象
        //5：頁面最多顯示5個頁碼
        PageInfo<Product> pageInfo = new PageInfo<>(productList,5);
        System.out.println("當前頁:"+pageInfo.getPageNum());
        System.out.println("每頁條數:"+pageInfo.getPageSize());
        System.out.println("總條數:"+pageInfo.getTotal());
        System.out.println("總頁數:"+pageInfo.getPages());
        System.out.println("每頁數據:"+pageInfo.getList());
        System.out.println("上一頁頁碼:"+pageInfo.getPrePage());
        System.out.println("下一頁頁碼:"+pageInfo.getNextPage());
        System.out.println("是否第一頁:"+pageInfo.isIsFirstPage());
        System.out.println("是否最後一頁:"+pageInfo.isIsLastPage());
        System.out.println("頁面顯示的第一個頁碼:"+pageInfo.getNavigateFirstPage());
        System.out.println("頁面顯示的最後一個頁碼:"+pageInfo.getNavigateLastPage());
    }

項目中使用分頁助手

ProductDao

@Select("select * from product")
List<Product> findAll();

ProductService

@Override
    public PageInfo<Product> findByPageHelper(Integer currentPage, Integer pageSize) {
        //指定分頁參數
        PageHelper.startPage(currentPage,pageSize);
        //查詢全部
        List<Product> productList = productDao.findAll();
        //創建PageInfo對象
        PageInfo<Product> pageInfo = new PageInfo<>(productList,3);

        return pageInfo;
    }

ProductController

/**
     * 分頁助手查詢
     * @RequestParam請求參數綁定
     *      name：別名value，指定頁面參數的名稱
     *      required：是否必要參數
     *      defaultValue：默認值
     * @return
     */
    @RequestMapping("/findAll")
    public ModelAndView findAll(
            @RequestParam(value = "currentPage", required = false, defaultValue = "1") Integer currentPage,
            @RequestParam(value = "pageSize", required = false, defaultValue = "5") Integer pageSize){
        //準備數據：分頁數據
        PageInfo<Product> pageInfo = productService.findByPageHelper(currentPage, pageSize);
        //創建modelandview
        ModelAndView modelAndView = new ModelAndView();
        //添加數據
        modelAndView.addObject("pageInfo",pageInfo);
        //指定頁面
        modelAndView.setViewName("product-list");
        return modelAndView;

    }

前端

展示數據

<tbody>
	<%--
		循環標籤foreach
		items：要循環的集合對象
		var：循環中的每一個對象
	--%>
	<c:forEach items="${pageInfo.list}" var="product">
	<tr>
		<td><input name="ids" type="checkbox" value="${product.id}"></td>
		<td>${product.id}</td>

		<td>${product.productNum}</td>
		<td>${product.productName}</td>
		<td>${product.cityName}</td>
		<td>
			<%--日期格式化--%>
			<fmt:formatDate value="${product.departureTime}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
		</td>
		<td>${product.productPrice}</td>
		<td>${product.productStatus == 1?"開啓":"關閉"}</td>


		<td class="text-center">
			<button type="button" class="btn bg-olive btn-xs"
					onclick='delOne(${product.id})'>刪除</button>
			<button type="button" class="btn bg-olive btn-xs"
				onclick='location.href="all-order-manage-edit.html"'>訂單</button>
			<button type="button" class="btn bg-olive btn-xs"
				onclick='location.href="${pageContext.request.contextPath}/product/updateUI?id=${product.id}"'>修改</button>
		</td>
	</tr>
	</c:forEach>


</tbody>

分頁導航條

div class="box-footer">
	<div class="pull-left">
		<div class="form-group form-inline">
			總共${pageInfo.pages}頁，共${pageInfo.total}條數據。 每頁
			<select id="pageSize" onchange="gotoPage(1)" class="form-control">
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="5" selected="selected">5</option>
				<option value="10">10</option>

			</select> 條
		</div>
	</div>

	<div class="box-tools pull-right">
		<ul class="pagination">
			<%--在超鏈接中訪問js函數，必須加前綴：javascript--%>
			<li><a href="javascript:gotoPage(1)" aria-label="Previous">首頁</a></li>
			<li><a href="javascript:gotoPage(${pageInfo.prePage})">上一頁</a></li>

			<%--begin：從幾開始
				end：到哪結束
			--%>
			<c:forEach begin="${pageInfo.navigateFirstPage}" end="${pageInfo.navigateLastPage}" var="i">
				<li><a href="javascript:gotoPage(${i})">${i}</a></li>
			</c:forEach>
			<li><a href="javascript:gotoPage(${pageInfo.nextPage})">下一頁</a></li>
			<li><a href="javascript:gotoPage(${pageInfo.pages})" aria-label="Next">尾頁</a></li>
		</ul>
	</div>

</div>
<!-- /.box-footer-->

js

$("#pageSize option[value=${pageInfo.pageSize}]").prop("selected","selected");
		function gotoPage(currentPage) {
			//獲取每頁顯示的條數
			var pageSize = $("#pageSize").val();
			if(currentPage<1){
				return;
			}
			if(currentPage>${pageInfo.pages}){
				return;
			}
			location.href = "${pageContext.request.contextPath}/product/findAll?currentPage="+currentPage+"&pageSize="+pageSize;
		}