基於SSM實現分頁查詢和顯示功能
- 1.簡述
- 2.詳情
- 3.原因
- 4.解決思路
- 4.1 創建一個分頁類文件，並定義分頁類
- 4.2 創建mapper.xml文件，並提供SQL語句（dao層）
- 4.3 創建Mapper類文件，並定義Mapper接口（dao層）
- 4.4 創建Service類文件，並定義Service接口（Service層）
- 4.5 創建ServiceImpl實現類文件，並定義ServiceImpl實現類（Service層）
- 4.6 創建Controller類文件，並定義Controller類（Controller層）
- 4.7 創建jsp文件
- 5.具體解決辦法
- 5.1 代碼
- 5.1.1 創建Page類文件並定義Page**
- 5.1.2 創建CategoryMappermapper.xml文件，並寫出SQL語句
- 5.1.3 創建CategoryMapper類文件，並定義CategoryMapper接口
- 5.1.4 創建CategoryService類文件，並定義CategoryService類
- 5.1.5 創建CategoryServiceImpl實現類文件，並定義CategoryServiceImpl實現類。
- 5.1.6 創建CategoryController類文件
- 5.1.7 創建Jsp文件，顯示後臺傳過來的內容。
- 5.2 結果
- 6.情況：已解決
略讀可以只看加粗字體
1.簡述
基於SSM實現分頁查詢和顯示功能。
2.詳情
後端從數據庫獲取數據並且實現分頁查詢功能，前端顯示出分頁後的數據。
改進：實現分頁功能之後，再重構項目，使開發更簡易，所以採用pageHelper分頁插件。
3.原因
無
4.解決思路
前提：已有Category的相關文件
4.1 創建一個分頁類文件，並定義分頁類
專門爲分頁提供必要信息
4.2 創建mapper.xml文件，並提供SQL語句（dao層）
創建Mapper.xml，以提供帶分頁的查詢語句和獲取總數的sql語句
4.3 創建Mapper類文件，並定義Mapper接口（dao層）
創建Mapper文件，提供一個支持分頁的查詢方法list(Page page)和獲取總數的方法total
4.4 創建Service類文件，並定義Service接口（Service層）
創建Service類文件，提供一個支持分頁的查詢方法list(Page page)和獲取總數的方法total的接口
4.5 創建ServiceImpl實現類文件，並定義ServiceImpl實現類（Service層）
創建ServiceImpl實現類文件，提供實現Service接口的類（具體實現Service方法）
4.6 創建Controller類文件，並定義Controller類（Controller層）
創建Controller類文件，
4.7 創建jsp文件
創建jsp文件，用於顯示分頁內容
5.具體解決辦法
以下代碼模塊和解決思路模塊一一對應
5.1 代碼
5.1.1 創建Page類文件並定義Page**
屬性：
start 當前位置
count 每頁顯示的數據數量
total 數據總個數
方法：
getTotalPage 獲取總頁數
getLast 計算出最後一頁的首條數據的位置
isHasPreviouse 判斷是否有前一頁
isHasNext 判斷是否有後一頁
public class Page {
private int start; //當前位置：是指從第幾頁開始取數據。
private int count; //每頁顯示的數據數量
private int total; //數據總個數
private static final int defaultCount = 5; //默認每頁顯示5條數據
//getter和setter方法自動生成
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public String getParam() {
return param;
}
public void setParam(String param) {
this.param = param;
}
//當類實例化一個對象時會自動調用這個空參構造方法
public Page (){
count = defaultCount;
}
//構造方法重載
public Page(int start, int count) {
this();//調用空參的構造方法
this.start = start;
this.count = count;
}
//判斷是否有前一頁。
public boolean isHasPreviouse(){
//如果當前位置的數據的數值是0，說明沒有前一頁。
if(start==0)
return false;
return true;
}
//判斷是否有後一頁。
public boolean isHasNext(){
//如果當前位置的首條數據的數值=尾頁的首條數據的數值，說明是同一頁，所以沒有後一頁了。
if(start==getLast())
return false;
return true;
}
//獲取總頁數。根據每頁顯示的數量count以及總共有多少條數據total，計算出總頁數。
public int getTotalPage(){
int totalPage;
// 假設總數是50，是能夠被5整除的，那麼就有10頁。舉例：50/5=10···0，20/5=4···0
if (0 == total % count)
totalPage = total /count;
// 假設總數是51，不能夠被5整除的，那麼就有11頁。舉例：51/5=10···1
else
totalPage = total / count + 1;
//如果總頁數爲0，默認總頁數爲一頁。即4/5=0···4；3/5=0···3；
if(0==totalPage)
totalPage = 1;
return totalPage;
}
//獲取尾頁的首條數據位置的數值。如第二頁的首條數據的位置的數值是5（由第0條數據開始取，每頁5條數據）
public int getLast(){
int last;
// 假設總數是50，是能夠被5整除的，那麼推算出最後一頁的開始位置的數據的數值就是45
if (0 == total % count)
last = total - count;
// 假設總數是51，不能夠被5整除的，那麼推算出最後一頁的開始的數據的數值就是50
else
last = total - total % count;
last = last<0?0:last;
return last;
}
@Override
public String toString() {
return "Page [start=" + start + ", count=" + count + ", total=" + total + ", getStart()=" + getStart()
+ ", getCount()=" + getCount() + ", isHasPreviouse()=" + isHasPreviouse() + ", isHasNext()="
+ isHasNext() + ", getTotalPage()=" + getTotalPage() + ", getLast()=" + getLast() + "]";
}
}
5.1.2 創建CategoryMappermapper.xml文件，並寫出SQL語句
<mapper namespace="com.how2java.tmall.mapper.CategoryMapper">
<select id="list" resultType="Category">
//分頁查詢的語句
select * from category order by id desc
//limit後第一個參數start，是起始查詢位置（不包含），第二個參數是每頁的數據條數。
//舉例：第3條數據（包含）到第8條數據（包含）共6條，那麼start=2，count=8-2=6。
<if test="start!=null and count!=null">
limit #{start},#{count}
</if>
</select>
//查詢數據庫表裏面的總數據量
<select id="total" resultType="int">
select count(*) from category
</select>
</mapper>
5.1.3 創建CategoryMapper類文件，並定義CategoryMapper接口
創建CategoryMapper類文件，提供一個支持分頁的查詢方法list(Page page)和獲取總數的方法total
public interface CategoryMapper {
//傳入Page類的變量參數，包含了start,count
public List<Category> list(Page page);
public int total();
}
5.1.4 創建CategoryService類文件，並定義CategoryService類
創建CategoryService類文件，提供一個支持分頁的查詢方法list(Page page)和獲取總數的方法total，
對應以上Mapper接口中的方法。
public interface CategoryService{
int total();
List<Category> list(Page page);
}
5.1.5 創建CategoryServiceImpl實現類文件，並定義CategoryServiceImpl實現類。
創建CategoryServiceImpl文件並定義實現類，提供具體實現的方法。使用了註解方法獲取CategoryMapper類,然後調用類中的方法。
@Service
public class CategoryServiceImpl implements CategoryService {
@Autowired
CategoryMapper categoryMapper;
@Override
public List<Category> list(Page page) {
return categoryMapper.list(page);
}
@Override
public int total() {
return categoryMapper.total();
}
}
5.1.6 創建CategoryController類文件
-
爲方法list增加參數Page用於獲取瀏覽器傳遞過來的分頁信息
-
categoryService.list(page); 獲取當前頁的分類集合
-
通過categoryService.total(); 獲取分類總數
-
通過page.setTotal(total); 爲分頁對象設置總數
-
把分類集合放在"cs"中
-
把分頁對象放在 "page“ 中
-
跳轉到listCategory.jsp頁面
@Controller @RequestMapping("") public class CategoryController { @Autowired CategoryService categoryService; @RequestMapping("admin_category_list") public String list(Model model,Page page){ List<Category> cs= categoryService.list(page); int total = categoryService.total(); page.setTotal(total); model.addAttribute("cs", cs); model.addAttribute("page", page); return "admin/listCategory"; } }
5.1.7 創建Jsp文件，顯示後臺傳過來的內容。
使用EL標籤獲取後臺傳過來的數據，顯示再網頁中。由兩部分組成，第一部分是顯示的內容，第二部分是分頁導航欄。
關鍵代碼如下：
part1：
//顯示分類ID和分類名
<c:forEach items="${cs}" var="c">
<tr>
<td>${c.cat_id}</td>
<td>${c.cat_name}</td>
</tr>
</c:forEach>
part2:
（1）通過 JavaScrip 代碼來完成禁用功能
<script>
$(function () {
$("ul.pagination li.disabled a").click(function () {
return false;
});
});
</script>
（2）前端使用Bootstrap框架來製作分頁效果的圖標
1）當沒有上一頁的時候，對應超鏈處於不可點擊狀態。hasPreviouse會導致isHasPreviouse()方法被調用
2）初次訪問/admin_category_list這個路徑時，調用list(Model model,Page page)方法,SpringMVC在調用處理方法之前會創建一個隱含的模型對象，這個list方法的model就會賦值得到隱含的模型對象
3）start會被自動封裝到page裏的
4）點擊超過分頁的超鏈接返回false阻止事件的發生
//首頁超鏈：
<li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
<a href="?start=0" aria-label="Previous" >
//隱藏要彈出的內容
<span aria-hidden="true">«</span>
</a>
</li>
//上一頁超鏈：
<li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
<a href="?start=${page.start-page.count}" aria-label="Previous" >
<span aria-hidden="true">‹</span>
</a>
</li>
//下一頁超鏈：
<li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
<a href="?start=${page.start+page.count}${page.param}" aria-label="Next">
<span aria-hidden="true">›</span>
</a>
</li>
//尾頁超鏈：
<li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
<a href="?start=${page.last}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
1）當前頁面會高亮。current 是樣式，在 style.css 文件裏。
2）status.index從0開始遍歷
3）status.count從1開始遍歷
4）從 0 循環到 page.totalPage - 1 ，varStatus 相當於是循環變量
//表示當前頁面：
<c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
<li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
<a href="?start=${status.index*page.count}"
<c:if test="${status.index*page.count==page.start}">class="current"</c:if>
> ${status.count}</a>
</li>
</c:forEach>
補充：
1）要求：顯示當前頁碼的前兩個和後兩個就可，例如當前頁碼爲3的時候，就顯示 1 2 3(當前頁) 4 5 的頁碼
2）<c:if test="${status.countpage.count-page.start<=30 && status.countpage.count-page.start>=-10}">
3）10 <= 當前頁*每一頁顯示的數目 - 當前頁開始的數據編號 <= 30
5.2 結果
如圖所示
6.情況：已解決
參考原文http://how2j.cn/k/tmall_ssm/tmall_ssm-1517/1517.html#nowhere
參考原文https://www.bbsmax.com/A/nAJvbRyYJr/