• Java后端 學習路線 筆記匯總表【黑馬程序員】

JavaWeb黑馬旅游網-學習筆記01【準備工作】

JavaWeb黑馬旅游網-學習筆記02【注冊功能】

JavaWeb黑馬旅游網-學習筆記03【登陸和退出功能】

JavaWeb黑馬旅游網-學習筆記04【BaseServlet抽取】

JavaWeb黑馬旅游網-學習筆記05【分類數據展示功能】

JavaWeb黑馬旅游網-學習筆記06【旅游線路分頁展示分頁展示】

JavaWeb黑馬旅游網-學習筆記07【旅游線路查詢】

JavaWeb黑馬旅游網-學習筆記08【旅游線路詳情】

JavaWeb黑馬旅游網-學習筆記09【旅游線路收藏】

JavaWeb黑馬旅游網-學習筆記10【項目代碼】

目錄

31-旅游線路分頁展示_類別id傳遞

32-旅游線路分頁展示_分頁數據展示_分析

PageBean.java //?服務器端代碼編寫

33-旅游線路分頁展示_分頁數據展示_代碼實現_Servlet

RouteServlet.java?//?服務器端代碼編寫

34-旅游線路分頁展示_分頁數據展示_代碼實現_Dao

RouteDao.java

RouteDaoImpl.java

35-旅游線路分頁展示_分頁數據展示_代碼實現_Service

RouteService.java

RouteServiceImpl.java

36-旅游線路分頁展示_分頁數據展示_前臺代碼_頁碼展示

37-旅游線路分頁展示_分頁數據展示_前臺代碼_數據展示

38-旅游線路分頁展示_分頁數據展示_前臺代碼_異步加載數據

39-旅游線路分頁展示_分頁數據展示_前臺代碼_頁碼處理

window跳轉到頁面頂部

route_list.html //?客戶端代碼編寫

---

31-旅游線路分頁展示_類別id傳遞

點擊了不同的分類后，將來看到的旅游線路不一樣的。通過分析數據庫表結構，發現，旅游線路表和分類表是一個多對一的關系。

?

查詢不同分類的旅游線路sql：Select * from tab_route where cid = ?;

Redis中查詢score（cid）

頁面傳遞cid

header.html傳遞cid

獲取cid

$(function?()?{
???var?search?=?location.search;
???//alert(search);/id=5
????//?切割字符串，拿到第二個值
????var?cid?=?search.split("=")[1];
});

32-旅游線路分頁展示_分頁數據展示_分析

分頁展示旅游線路數據。

分析：

PageBean.java //?服務器端代碼編寫

創建PageBean對象

package cn.itcast.travel.domain;import java.util.List;/*** 分頁對象*/ public class PageBean<T> {private int totalCount;//總記錄數private int totalPage;//總頁數private int currentPage;//當前頁碼private int pageSize;//每頁顯示的條數private List<T> list;//每頁顯示的數據集合public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;} }

33-旅游線路分頁展示_分頁數據展示_代碼實現_Servlet

RouteServlet.java?//?服務器端代碼編寫

package cn.itcast.travel.web.servlet;import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService; import cn.itcast.travel.service.impl.RouteServiceImpl;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;@WebServlet("/route/*") public class RouteServlet extends BaseServlet {private RouteService routeService = new RouteServiceImpl();/*** 分頁查詢** @param request* @param response* @throws ServletException* @throws IOException*/public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接受參數String currentPageStr = request.getParameter("currentPage");String pageSizeStr = request.getParameter("pageSize");String cidStr = request.getParameter("cid");int cid = 0;//類別id//2.處理參數if (cidStr != null && cidStr.length() > 0) {cid = Integer.parseInt(cidStr);}int currentPage = 0;//當前頁碼，如果不傳遞，則默認為第一頁if (currentPageStr != null && currentPageStr.length() > 0) {currentPage = Integer.parseInt(currentPageStr);} else {currentPage = 1;}int pageSize = 0;//每頁顯示條數，如果不傳遞，默認每頁顯示5條記錄if (pageSizeStr != null && pageSizeStr.length() > 0) {pageSize = Integer.parseInt(pageSizeStr);} else {pageSize = 5;}//3. 調用service查詢PageBean對象PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);//4. 將pageBean對象序列化為json，返回writeValue(pb, response);} }

34-旅游線路分頁展示_分頁數據展示_代碼實現_Dao

RouteDao.java

package cn.itcast.travel.dao;import cn.itcast.travel.domain.Route;import java.util.List;public interface RouteDao {/*** 根據cid查詢總記錄數*/public int findTotalCount(int cid);/*** 根據cid、start、pageSize查詢當前頁的數據集合*/public List<Route> findByPage(int cid, int start, int pageSize); }

RouteDaoImpl.java

package cn.itcast.travel.dao.impl;import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.domain.Route; import cn.itcast.travel.util.JDBCUtils; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int findTotalCount(int cid) {String sql = "select count(*) from tab_route where cid = ?";return template.queryForObject(sql, Integer.class, cid);}@Overridepublic List<Route> findByPage(int cid, int start, int pageSize) {String sql = "select * from tab_route where cid = ? limit ? , ?";return template.query(sql, new BeanPropertyRowMapper<Route>(Route.class), cid, start, pageSize);} }

35-旅游線路分頁展示_分頁數據展示_代碼實現_Service

RouteService.java

package cn.itcast.travel.service;import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route;/*** 線路Service*/ public interface RouteService {/*** 根據類別進行分頁查詢** @param cid* @param currentPage* @param pageSize* @return*/public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize); }

RouteServiceImpl.java

package cn.itcast.travel.service.impl;import cn.itcast.travel.dao.RouteDao; import cn.itcast.travel.dao.impl.RouteDaoImpl; import cn.itcast.travel.domain.PageBean; import cn.itcast.travel.domain.Route; import cn.itcast.travel.service.RouteService;import java.util.List;public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();@Overridepublic PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {//封裝PageBeanPageBean<Route> pb = new PageBean<Route>();//設置當前頁碼pb.setCurrentPage(currentPage);//設置每頁顯示條數pb.setPageSize(pageSize);//設置總記錄數int totalCount = routeDao.findTotalCount(cid);pb.setTotalCount(totalCount);//設置當前頁顯示的數據集合int start = (currentPage - 1) * pageSize;//開始的記錄數List<Route> list = routeDao.findByPage(cid, start, pageSize);pb.setList(list);//設置總頁數 = 總記錄數/每頁顯示條數int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : (totalCount / pageSize) + 1;pb.setTotalPage(totalPage);return pb;} }

36-旅游線路分頁展示_分頁數據展示_前臺代碼_頁碼展示

37-旅游線路分頁展示_分頁數據展示_前臺代碼_數據展示

38-旅游線路分頁展示_分頁數據展示_前臺代碼_異步加載數據

39-旅游線路分頁展示_分頁數據展示_前臺代碼_頁碼處理

window跳轉到頁面頂部

//1.2 展示分頁頁碼 /*1.一共展示10個頁碼，能夠達到前5后4的效果2.如果前邊不夠5個，后邊補齊10個3.如果后邊不足4個，前邊補齊10個 */ // 定義開始位置begin,結束位置 end var begin; // 開始位置 var end; // 結束位置 //1.要顯示10個頁碼 if (pb.totalPage < 10) {//總頁碼不夠10頁begin = 1;end = pb.totalPage; } else {//總頁碼超過10頁begin = pb.currentPage - 5;end = pb.currentPage + 4;//2.如果前邊不夠5個，后邊補齊10個if (begin < 1) {begin = 1;end = begin + 9;}//3.如果后邊不足4個，前邊補齊10個if (end > pb.totalPage) {end = pb.totalPage;begin = end - 9;} } for (var i = begin; i <= end; i++) {var li;//判斷當前頁碼是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//創建頁碼的lili = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';}//拼接字符串lis += li; }

route_list.html //?客戶端代碼編寫

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>黑馬旅游-搜索</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" href="css/search.css"><script src="js/jquery-3.3.1.js"></script><script>$(function () {var search = location.search;//alert(search);//?id=5// 切割字符串，拿到第二個值var cid = search.split("=")[1];//當頁面加載完成后，調用load方法，發送ajax請求加載數據load(cid);});function load(cid, currentPage) {//發送ajax請求，請求route/pageQuery,傳遞cid$.get("route/pageQuery", {cid: cid, currentPage: currentPage}, function (pb) {//解析pagebean數據，展示到頁面上//1.分頁工具條數據展示//1.1 展示總頁碼和總記錄數$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/*<li><a href="">首頁</a></li><li class="threeword"><a href="#">上一頁</a></li><li class="curPage"><a href="#">1</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><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="threeword"><a href="javascript:;">下一頁</a></li><li class="threeword"><a href="javascript:;">末頁</a></li>*/var lis = "";var fristPage = '<li onclick="javascipt:load(' + cid + ')"><a href="javascript:void(0)">首頁</a></li>';//計算上一頁的頁碼var beforeNum = pb.currentPage - 1;if (beforeNum <= 0) {beforeNum = 1;}var beforePage = '<li onclick="javascipt:load(' + cid + ',' + beforeNum + ')" class="threeword"><a href="javascript:void(0)">上一頁</a></li>';lis += fristPage;lis += beforePage;//1.2 展示分頁頁碼/*1.一共展示10個頁碼，能夠達到前5后4的效果2.如果前邊不夠5個，后邊補齊10個3.如果后邊不足4個，前邊補齊10個*/// 定義開始位置begin,結束位置 endvar begin; // 開始位置var end; // 結束位置//1.要顯示10個頁碼if (pb.totalPage < 10) {//總頁碼不夠10頁begin = 1;end = pb.totalPage;} else {//總頁碼超過10頁begin = pb.currentPage - 5;end = pb.currentPage + 4;//2.如果前邊不夠5個，后邊補齊10個if (begin < 1) {begin = 1;end = begin + 9;}//3.如果后邊不足4個，前邊補齊10個if (end > pb.totalPage) {end = pb.totalPage;begin = end - 9;}}for (var i = begin; i <= end; i++) {var li;//判斷當前頁碼是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//創建頁碼的lili = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';}//拼接字符串lis += li;}/*// 顯示所有頁碼for (var i = 1; i <= pb.totalPage; i++) {var li;//判斷當前頁碼是否等于iif (pb.currentPage == i) {li = '<li class="curPage" onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';} else {//創建頁碼的lili = '<li onclick="javascipt:load(' + cid + ',' + i + ')"><a href="javascript:void(0)">' + i + '</a></li>';}//拼接字符串lis += li;}*/var lastPage = '<li class="threeword"><a href="javascript:;">末頁</a></li>';var nextPage = '<li class="threeword"><a href="javascript:;">下一頁</a></li>';lis += nextPage;lis += lastPage;//將lis內容設置到ul$("#pageNum").html(lis);/*<li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>【減100元 含除夕/春節出發】廣州增城三英溫泉度假酒店/自由行套票</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>299</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li>*///2.列表數據展示var route_lis = "";for (var i = 0; i < pb.list.length; i++) {//獲取{rid:1,rname:"xxx"}var route = pb.list[i];var li = '<li>\n' +' <div class="img"><img src="' + route.rimage + '" style="width: 299px;"></div>\n' +' <div class="text1">\n' +' <p>' + route.rname + '</p>\n' +' <br/>\n' +' <p>' + route.routeIntroduce + '</p>\n' +' </div>\n' +' <div class="price">\n' +' <p class="price_num">\n' +' <span>&yen;</span>\n' +' <span>' + route.price + '</span>\n' +' <span>起</span>\n' +' </p>\n' +' <p><a href="route_detail.html">查看詳情</a></p>\n' +' </div>\n' +' </li>';route_lis += li;}$("#route").html(route_lis);//定位到頁面頂部window.scrollTo(0, 0);});}</script> </head> <body> <!--引入頭部--> <div id="header"></div> <div class="page_one"><div class="contant"><div class="crumbs"><img src="images/search.png" alt=""><p>黑馬旅行><span>搜索結果</span></p></div><div class="xinxi clearfix"><div class="left"><div class="header"><span>商品信息</span><span class="jg">價格</span></div><ul id="route"><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>【減100元 含除夕/春節出發】廣州增城三英溫泉度假酒店/自由行套票</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>299</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉島叢林飛躍空中飛人探險游中文服務泰國旅游</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>899</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>黑妞皇家旅行普吉島攀牙灣大船星光之旅皮劃艇日落休閑特色體驗</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>999</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>浪花朵朵旅行普吉島皇帝島珊瑚島香蕉船拖拽傘水上項目</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>99</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>環游記 泰國清邁Lila massage女子監獄spa 麗菈泰式按摩馬殺雞</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>199</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>【減100元 含除夕/春節出發】廣州增城三英溫泉度假酒店/自由行套票</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>899</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>【減100元 含除夕/春節出發】廣州增城三英溫泉度假酒店/自由行套票</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>1199</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li><li><div class="img"><img src="images/04-search_03.jpg" alt=""></div><div class="text1"><p>泰國芭提雅三合一日游芭提雅蒂芬妮人妖秀成人門票bigeye含接送</p><br/><p>1-2月出發，網付立享￥1099/2人起！爆款位置有限，搶完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>1589</span><span>起</span></p><p><a href="route_detail.html">查看詳情</a></p></div></li></ul><div class="page_num_inf"><i></i> 共<span id="totalPage">12</span>頁<span id="totalCount">132</span>條</div><div class="pageNum"><ul id="pageNum"><li><a href="">首頁</a></li><li class="threeword"><a href="#">上一頁</a></li><li class="curPage"><a href="#">1</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><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="threeword"><a href="javascript:;">下一頁</a></li><li class="threeword"><a href="javascript:;">末頁</a></li></ul></div></div><div class="right"><div class="top"><div class="hot">HOT</div><span>熱門推薦</span></div><ul><li><div class="left"><img src="images/04-search_09.jpg" alt=""></div><div class="right"><p>清遠新銀盞溫泉度假村酒店/自由行套...</p><p>網付價<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="images/04-search_09.jpg" alt=""></div><div class="right"><p>清遠新銀盞溫泉度假村酒店/自由行套...</p><p>網付價<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="images/04-search_09.jpg" alt=""></div><div class="right"><p>清遠新銀盞溫泉度假村酒店/自由行套...</p><p>網付價<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="images/04-search_09.jpg" alt=""></div><div class="right"><p>清遠新銀盞溫泉度假村酒店/自由行套...</p><p>網付價<span>&yen;<span>899</span>起</span></p></div></li><li><div class="left"><img src="images/04-search_09.jpg" alt=""></div><div class="right"><p>清遠新銀盞溫泉度假村酒店/自由行套...</p><p>網付價<span>&yen;<span>899</span>起</span></p></div></li></ul></div></div></div> </div> <!--引入頭部--> <div id="footer"></div> <!--導入布局js，共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>

只有你爬到山頂了，這座山才會支撐著你。

總結

以上是生活随笔為你收集整理的JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。