分頁查詢 ==? 同步:異步

總結一下最近學習項目中的一個模塊-- 分頁查詢。即如何將數據庫查到的結果顯示到頁面上? 後臺代碼又該如何操作?
同步查詢流程圖:
在這裏插入圖片描述準備工作: 創建一個 Page 對象用於參數傳遞。

package com.atguigu.atcrowdfunding.util;

import java.util.List;

public class Page {
	//當前頁
	private Integer pageno;
	//當前頁的數據
	private Integer pagesize;
	//總共多少頁 totalsize/pagesize
	private Integer totalno;
	private Integer totalsize;
	private List datails;
	
	// altr+shift + s 快速打開工具
	
	public Page(Integer pageno,Integer pagesize)
	{
		if(pageno<=0)
		{
			this.pageno =1;
		}else {
		this.pageno = pageno;
		}
		if(pageno<=0)
		{
			this.pagesize =1;
		}else {		
		this.pagesize = pagesize;
		}
	}

	public Integer getPageno() {
		return pageno;
	}

	public void setPageno(Integer pageno) {
		this.pageno = pageno;
	}

	public Integer getPagesize() {
		return pagesize;
	}

	public void setPagesize(Integer pagesize) {
		this.pagesize = pagesize;
	}

	public Integer getTotalno() {
		return totalno;
	}

	private void setTotalno(Integer totalno) {
		this.totalno = totalno;
	}

	public Integer getTotalsize() {
		return totalsize;
	}

	public void setTotalsize(Integer totalsize) {
		this.totalsize = totalsize;
		this.totalno = (totalsize%pagesize)==0?(totalsize/pagesize):(totalsize/pagesize+1);
	}

	public List getDatails() {
		return datails;
	}

	public void setDatails(List datails) {
		this.datails = datails;
	}
	//開始索引是啥?
	public Integer startIndex()
	{
		return (pageno-1)*pagesize;
	}
	
	
	
	
	
	
	
	
	
	
	

}

在 html頁面輸入攔截地址:
在這裏插入圖片描述在表現層進行抵制攔截:

	@RequestMapping("/index")
		public String querySizes( Integer pageno , Integer pagesize, Map map) 
		{
			//利用UserService 代理對象進行查詢
		    Page p = (Page) us.queryPage2(pageno,pagesize);
		    //將對象放入 request 域中
		    map.put("page", p);
		    //重定向
			return "/user/inidex";
		}

在 UserService 業務層接口實現代碼:

	public Page queryPage2(@RequestParam(value="pageno",required=false,defaultValue="1")Integer pageno,
			@RequestParam(value="pageno",required=false,defaultValue="10")Integer pagesize) {
		
		Page p = new Page(pageno,pagesize);
		Integer index = p.startIndex();
		//查詢總人數
		Integer count = userMapper.queryCount2();
		p.setPagesize(count);
		// 查詢到的信息
		List<User>details = userMapper.queryListDetails(pageno,pagesize);
		p.setDatails(details);
		//返回查詢到數據對象
		return p;
	}

數據庫 UserMapper 代碼(利用到了 mybatis 框架):

   <select id="queryCount2" resultType="int">
      select count(*) from t_user 
   </select>
  <select id="queryListDetails" resultMap="BaseResultMap">
      select * from t_user 
      <where>
         limit #{pageno},#{pagesize} 
      </where>
   </select>

數據被查到了,並且也放入了 request 域中,那渲染頁面的時候咋讓數據顯示出來呢?
在這裏插入圖片描述

因爲在表現層把 page(p)對象放入了 request域中。

<ul class="pagination">
						    <c:if test="${page.pageno==1}">
						       	<li class="disabled"><a href="#">上一頁</a></li>
						    </c:if>
						    <c:if test="${page.pageno!=1}">
						        <li><a href="#" onclick="pageChange(${page.pageno-1})">上一頁</a></li>
						    </c:if>
							<!-- 
								<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li> -->
								<!-- 如果是 100 頁咋辦呢? -->
							<c:forEach begin="1" end="${page.tatalno}" var="num" >
							  <li  
							     <c:if test="${page.pageno==num}">
							        class="active"
							     </c:if>
							  >
							  <a href="#" onclick="pageChange($num)">${num}</a></li>
							</c:forEach>
								
						    <c:if test="${page.pageno==page.totalno}">
						       	<li class="disabled"><a href="#">下一頁</a></li>
						    </c:if>
						    <c:if test="${page.pageno!=page.totalno}">
						        <li><a href="#" onclick="pageChange(${page.pageno+1})">下一頁</a></li>
						    </c:if>
							 </ul>

上一頁,下一頁按鈕所觸發的函數:
在這裏插入圖片描述
最終結果:
在這裏插入圖片描述同步請求的效率太低了,用戶體驗不好,你查詢一個數據等半天,你受得了?
接下來 異步請求 閃亮登場。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章