我們在前端頁面上要訪問某個資源時, 直接點選, 頁面就會重新整理並展示給我們相應的資料資訊. 雖然是一個很簡單的操作, 可是頁面後端卻給我們做出了多層業務邏輯的操作. 下面我們來分析一下一個使用者在點選檢視 訂單管理 後, 後臺程式碼為實現該功能所執行的步驟:

1. 前端頁面點選 訂單管理 , 提交檢視所有訂單請求:

前端頁面的 訂單管理 請求程式碼如下:

2. 當用戶點選點選 訂單管理 後, 前端頁面按照上面的路徑傳送請求到後端控制層, 控制層程式碼如下:

3. 控制層自動識別請求路徑中的請求方法的路徑, 並自動執行該方法, 再呼叫業務層中的查詢所有的方法, 業務層介面實現類程式碼如下:

package com.cast.service.impl;

import com.cast.dao.IOrdersDao;
import com.cast.domain.Orders;
import com.cast.service.IOrdersService;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**
 * 訂單service業務層介面實現類
 */
@Service
@Transactional  //事務
public class OrdersServiceImpl implements IOrdersService {

    @Autowired
    private IOrdersDao ordersDao;

    @Override
    public List<Orders> findAll(Integer page, Integer size) throws Exception {
        //引數pageNum 是頁碼值   引數pageSize 代表是每頁顯示條數
        PageHelper.startPage(page, size);
        return ordersDao.findAll();
    }
    
}
 

為了將查詢的結果集進行分頁展示, 需要在此呼叫 PageHelper.startPage(當前頁碼, 每頁顯示條數) 方法.

4. 業務層介面實現類會呼叫持久層來執行對資料庫的操作, 持久層介面實現類程式碼如下:

package com.cast.dao;

import com.cast.domain.Orders;
import com.cast.domain.Product;
import org.apache.ibatis.annotations.One;
import org.apache.ibatis.annotations.Result;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * 訂單dao持久層介面
 * 定義方法
 */
public interface IOrdersDao {

    //查詢所有
    @Select("select * from orders")
    @Results({
            @Result(id=true,property = "id",column = "id"),
            @Result(property = "orderNum",column = "orderNum"),
            @Result(property = "orderTime",column = "orderTime"),
            @Result(property = "orderStatus",column = "orderStatus"),
            @Result(property = "peopleCount",column = "peopleCount"),
            @Result(property = "peopleCount",column = "peopleCount"),
            @Result(property = "payType",column = "payType"),
            @Result(property = "orderDesc",column = "orderDesc"),
            @Result(property = "product",column = "productId",javaType = Product.class,
            one = @One(select = "com.cast.dao.IProductDao.findById")),
    })
    public List<Orders> findAll() throws Exception;

}
 

持久層根據對應的 sql 語句以及相關配置對資料庫進行操作, 將結果存入 springmvc 容器中

5. 我們知道控制層是接收前端請求並響應結果到前端的, 於是我們再返回到以上第 2 步, 我們在控制層建立了 IOdersService 代理物件, 自動容器中獲取該物件, 然後通過該物件呼叫查詢所有的方法獲取到結果集 ordersList , 將結果集放入 pageInfo 中, 再通過 ModelAndView 將 pageInfo 和請求檢視頁面 order-page-list.jsp 一起響應到前端頁面:

6. 前端頁面獲取到後端伺服器的響應, 直接重新整理到響應中的新的檢視頁面 order-page-list.jsp , 並將其他響應值 pageInfo 一併攜帶過去, 在新的前臺檢視頁面中, 我們通過 el 表示式來獲取其他響應值

(需在頁面頭部宣告引用  <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>) 

在 order-page-list.jsp 頁面中通過 el 表示式獲取 pageInfo 中的 list 集合, 此 list 集合中存的即是查詢到的所有的 orders , 通過在前端頁面遍歷此集合, 即可獲取到每一個 orders , 獲取 orders 中的每一個屬性並分頁展示在前端頁面:

<tbody>
	<c:forEach items="${pageInfo.list}" var="orders">
		<tr>
			<td class="text-center"><input name="ids" type="checkbox"></td>
			<td class="text-center">${orders.id }</td>
			<td class="text-center">${orders.orderNum }</td>
			<td class="text-center">${orders.product.productName }</td>
			<td class="text-center">${orders.product.productPrice }</td>
			<td class="text-center">${orders.orderTimeStr }</td>
			<td class="text-center">${orders.orderStatusStr }</td>
			<td class="text-center">
			    <button type="button" class="btn bg-olive btn-xs">訂單</button>
			    <button type="button" class="btn bg-olive btn-xs" onclick="location.href='${pageContext.request.contextPath}/orders/findById.do?id=${orders.id}'">詳情</button>
			    <button type="button" class="btn bg-olive btn-xs">編輯</button>
			</td>
		</tr>
	</c:forEach>
</tbody>

7. 分頁條的展示:

<div class="box-tools pull-right">
    <ul class="pagination">
        <li>
            <a href="${pageContext.request.contextPath}/orders/findAll.do?page=1&size=${pageInfo.pageSize}" aria-label="Previous">首頁</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/orders/findAll.do?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}">上一頁</a>
        </li>
        <c:forEach begin="1" end="${pageInfo.pages}" var="pageNum">
	    <li>
                 <a href="${pageContext.request.contextPath}/orders/findAll.do?page=${pageNum}&size=${pageInfo.pageSize}">${pageNum}</a>
            </li>
	</c:forEach>
        <li>
            <a href="${pageContext.request.contextPath}/orders/findAll.do?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}">下一頁</a>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/orders/findAll.do?page=${pageInfo.pages}&size=${pageInfo.pageSize}" aria-label="Next">尾頁</a>
        </li>
    </ul>
</div>

8. 如果要手動定義每頁展示的條數, 可以編寫如下程式碼:

<div class="pull-left">
    <div class="form-group form-inline">
         總共 ${pageInfo.pages} 頁，共 ${pageInfo.total} 條資料。 每頁顯示
         <select class="form-control" id="changePageSize" onchange="changePageSize()">
              <option>5</option>
              <option>10</option>
              <option>15</option>
              <option>20</option>
         </select> 條
    </div>
</div>


function changePageSize() {
	//獲取下拉框的值
	var pageSize = $("#changePageSize").val();
	//向伺服器傳送請求，改變每頁顯示條數
	location.href = "${pageContext.request.contextPath}/orders/findAll.do?page=1&size=" + pageSize;
}