JavaWeb27.1【綜合案例：旅遊線路名稱查詢】
阿新 • • 發佈：2021-07-13
header.html
1 <!-- 頭部 start --> 2 <script src="js/getParameter.js"></script> 3 <script> 4 $(function () { 5 6 //請求登入使用者資訊 7 $.get( 8 // "findUserServlet", 9 "user/findOne", 10 {}, 11 function (data) {View Code12 var msg = "歡迎回來，" + data.name; 13 $("#span_username").html(msg); 14 }, 15 "json" 16 ); 17 18 19 //請求分類資料 20 $.get( 21 "category/findAll", 22 {}, 23 function (data) { //data: [{cid:1,cname:國內遊},{},{},...]24 //初始化<li>字串（第一個是首頁，固定的） 25 var lis = '<li class="nav-active"><a href="index.html">首頁</a></li>'; 26 27 //遍歷陣列，拼接<li>字串 28 for (var i=0; i<data.length; i++){ 29 var li = '<li><a href="route_list.html?cid=' + data[i].cid + '">' + data[i].cname + '</a></li>'; 30 lis += li; 31 } 32 33 //拼接收藏排行榜的<li>（最後一個也是固定的） 34 lis += '<li><a href="favoriterank.html">收藏排行榜</a></li>'; 35 36 //將lis字串，設定到ul的html內容中 37 $("#category").html(lis); 38 }, 39 "json" 40 ); 41 42 43 //給搜尋按鈕繫結單擊事件，獲取搜尋輸入框的內容 44 $("#search_button").click(function () { 45 var rname = $("#search_input").val(); //線路名稱 46 // alert(rname); 47 var cid = getParameter("cid"); //利用getParameter.js中封裝好的獲取方法（自定義） 48 // alert(cid); 49 50 // 跳轉路徑 51 location.href = "http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname; 52 }); 53 54 }); 55 </script> 56 57 58 <header id="header"> 59 <div class="top_banner"> 60 <img src="images/top_banner.jpg" alt=""> 61 </div> 62 <div class="shortcut"> 63 <!-- 未登入狀態 --> 64 <div class="login_out"> 65 <a href="login.html">登入</a> 66 <a href="register.html">註冊</a> 67 </div> 68 <!-- 登入狀態 --> 69 <div class="login"> 70 <!--<span>歡迎回來，admin</span>--> 71 <span id="span_username"></span> 72 <a href="myfavorite.html" class="collection">我的收藏</a> 73 <!--<a href="javascript:location.href='exitServlet';">退出</a>--> 74 <a href="javascript:location.href='user/exit';">退出</a> 75 </div> 76 </div> 77 <div class="header_wrap"> 78 <div class="topbar"> 79 <div class="logo"> 80 <a href="/"><img src="images/logo.jpg" alt=""></a> 81 </div> 82 <div class="search"> 83 <input id="search_input" name="" type="text" placeholder="請輸入路線名稱" class="search_input" autocomplete="off"> 84 <a id="search_button" href="javascript:;" class="search-button">搜尋</a> 85 </div> 86 <div class="hottel"> 87 <div class="hot_pic"> 88 <img src="images/hot_tel.jpg" alt=""> 89 </div> 90 <div class="hot_tel"> 91 <p class="hot_time">客服熱線(9:00-6:00)</p> 92 <p class="hot_num">400-618-9090</p> 93 </div> 94 </div> 95 </div> 96 </div> 97 </header> 98 <!-- 頭部 end --> 99 <!-- 首頁導航 --> 100 <div class="navitem"> 101 <ul class="nav" id="category"> 102 <!--<li class="nav-active"><a href="index.html">首頁</a></li> 103 <li><a href="route_list.html">門票</a></li> 104 <li><a href="route_list.html">酒店</a></li> 105 <li><a href="route_list.html">香港車票</a></li> 106 <li><a href="route_list.html">出境遊</a></li> 107 <li><a href="route_list.html">國內遊</a></li> 108 <li><a href="route_list.html">港澳遊</a></li> 109 <li><a href="route_list.html">抱團定製</a></li> 110 <li><a href="route_list.html">全球自由行</a></li> 111 <li><a href="favoriterank.html">收藏排行榜</a></li>--> 112 </ul> 113 </div> 114
route_list.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>黑馬旅遊-搜尋</title> 9 <link rel="stylesheet" type="text/css" href="css/common.css"> 10 <link rel="stylesheet" href="css/search.css"> 11 <script src="js/jquery-3.3.1.js"></script> 12 <script src="./js/getParameter.js"></script> 13 <script> 14 $(function () { 15 /*var search = location.search; //BOM-location-search：設定或返回從？開始的URL 16 // alert(search); //?cid=5 17 var cid = search.split("=")[1]; //切割字串，獲取cid 18 // alert(cid);*/ 19 20 //利用getParameter.js中封裝好的獲取方法（自定義） 21 var cid = getParameter("cid"); 22 var rname = getParameter("rname"); //%E7%AA%9D%E5%AB%A9%E5%8F%A0 23 if (rname){ 24 //URI解碼 25 rname = window.decodeURIComponent(rname); //窩嫩疊 26 } 27 28 //當頁碼載入完成後，呼叫load方法，傳送ajax請求載入資料 29 // load(cid); 30 load(cid, null, rname); 31 }); 32 33 // function load(cid, currentPage) { 34 function load(cid, currentPage, rname) { 35 //傳送ajax請求，請求route/pageQuery,傳遞cid 36 $.get( 37 "route/pageQuery", 38 // {cid:cid, currentPage:currentPage}, 39 {cid:cid, currentPage:currentPage, rname:rname}, 40 function (pb) { //解析pagebean資料，展示到頁面上 41 // ========================================================================== 42 //1 分頁工具條展示 43 44 //1.1 展示總頁碼和總記錄數 45 $("#totalPage").html(pb.totalPage); 46 $("#totalCount").html(pb.totalCount); 47 48 //1.2 展示分頁頁碼 49 var lis = ""; 50 var beforeNum = pb.currentPage - 1; //上一頁頁碼 51 if (beforeNum <= 0){ 52 beforeNum = 1; 53 } 54 55 // var firstPage = '<li onclick="javascripy:load('+ cid +','+ 1 +')"><a href="javascript:void(0)">首頁</a></li>'; 56 var firstPage = '<li onclick="javascripy:load('+ cid +','+ 1 +',\''+ rname +'\')"><a href="javascript:void(0)">首頁</a></li>'; 57 // var beforePage = '<li onclick="javascripy:load('+ cid +','+ beforeNum +')"><a href="javascript:void(0)">上一頁</a></li>'; 58 var beforePage = '<li onclick="javascripy:load('+ cid +','+ beforeNum +',\''+ rname +'\')"><a href="javascript:void(0)">上一頁</a></li>'; 59 lis += firstPage; 60 lis += beforePage; 61 62 /*for (var i=1; i<=pb.totalPage; i++){ 63 var li; 64 if (currentPage == i){ //當前頁碼新增樣式 65 li = '<li class="curPage" onclick="javascripy:load('+ cid +','+ i +')"><a href="javascript:void(0)">'+ i +'</a></li>'; 66 }else { 67 li = '<li onclick="javascripy:load('+ cid +','+ i +')"><a href="javascript:void(0)">'+ i +'</a></li>'; //遞迴 68 } 69 lis += li; 70 }*/ 71 //------------------------------------------------------------------------- 72 /* 73 1.一共展示10個頁碼，能夠達到前5後4的效果 74 2.如果前邊不夠5個，後邊補齊10個 75 3.如果後邊不足4個，前邊補齊10個 76 */ 77 var begin; // 開始位置 78 var end ; // 結束位置 79 80 //1 顯示10個頁碼 81 if (pb.totalPage < 10){ 82 //總頁碼不夠10頁 83 begin = 1; 84 end = pb.totalPage; 85 }else { 86 //總頁碼超過10頁 87 begin = pb.currentPage - 5; 88 end = pb.currentPage + 4; 89 90 //2 如果前邊不夠5個，後邊補齊10個 91 if (begin < 1){ 92 begin = 1; 93 end = begin + 9; 94 } 95 //3 如果後邊不足4個，前邊補齊10個 96 if (end > pb.totalPage){ 97 end = pb.totalPage; 98 begin = end - 9; 99 } 100 } 101 102 for (var i=begin; i<=end; i++){ 103 var li; 104 if (currentPage == i){ //當前頁碼新增樣式 105 // li = '<li class="curPage" onclick="javascripy:load('+ cid +','+ i +')"><a href="javascript:void(0)">'+ i +'</a></li>'; 106 li = '<li class="curPage" onclick="javascripy:load('+ cid +','+ i +',\''+ rname +'\')"><a href="javascript:void(0)">'+ i +'</a></li>'; 107 }else { 108 // li = '<li onclick="javascripy:load('+ cid +','+ i +')"><a href="javascript:void(0)">'+ i +'</a></li>'; //遞迴 109 li = '<li onclick="javascripy:load('+ cid +','+ i +',\''+ rname +'\')"><a href="javascript:void(0)">'+ i +'</a></li>'; //遞迴 110 } 111 lis += li; 112 } 113 //------------------------------------------------------------------------- 114 115 var nextNum = pb.currentPage + 1; //下一頁頁碼 116 if (nextNum > pb.totalPage){ 117 nextNum = pb.totalPage; 118 } 119 120 // var nextPage = '<li onclick="javascripy:load('+ cid +','+ nextNum +')"><a href="javascript:void(0)">下一頁</a></li>'; 121 var nextPage = '<li onclick="javascripy:load('+ cid +','+ nextNum +',\''+ rname +'\')"><a href="javascript:void(0)">下一頁</a></li>'; 122 // var lastPage = '<li onclick="javascripy:load('+ cid +','+ pb.totalPage +')"><a href="javascript:void(0)">尾頁</a></li>'; 123 var lastPage = '<li onclick="javascripy:load('+ cid +','+ pb.totalPage +',\''+ rname +'\')"><a href="javascript:void(0)">尾頁</a></li>'; 124 lis += nextPage; 125 lis += lastPage; 126 127 $("#pageNum").html(lis); 128 129 //2 列表資料展示 130 var route_lis = ""; 131 for (var i=0; i<pb.list.length; i++){ 132 var route = pb.list[i]; //獲取json格式的route物件，{rid:1,rname:"xxx",...} 133 var li = '<li>\n' + 134 ' <div class="img"><img src="'+ route.rimage +'" style="width: 299px"></div>\n' + 135 ' <div class="text1">\n' + 136 ' <p>'+ route.rname +'</p>\n' + 137 ' <br/>\n' + 138 ' <p>'+ route.routeIntroduce +'</p>\n' + 139 ' </div>\n' + 140 ' <div class="price">\n' + 141 ' <p class="price_num">\n' + 142 ' <span>¥</span>\n' + 143 ' <span>'+ route.price +'</span>\n' + 144 ' <span>起</span>\n' + 145 ' </p>\n' + 146 ' <p><a href="route_detail.html">檢視詳情</a></p>\n' + 147 ' </div>\n' + 148 ' </li>'; 149 route_lis += li; 150 } 151 $("#route").html(route_lis); 152 window.scrollTo(0,0); //換頁後定位到頁面頂部 153 // ========================================================================== 154 }, 155 "json" 156 ); 157 } 158 </script> 159 </head> 160 <body> 161 <!--引入頭部--> 162 <div id="header"></div> 163 <div class="page_one"> 164 <div class="contant"> 165 <div class="crumbs"> 166 <img src="images/search.png" alt=""> 167 <p>黑馬旅行><span>搜尋結果</span></p> 168 </div> 169 <div class="xinxi clearfix"> 170 <div class="left"> 171 <div class="header"> 172 <span>商品資訊</span> 173 <span class="jg">價格</span> 174 </div> 175 <ul id="route"> 176 177 </ul> 178 <div class="page_num_inf"> 179 <i></i> 共 180 <span id="totalPage"></span>頁<span id="totalCount"></span>條 181 </div> 182 <div class="pageNum"> 183 <ul id="pageNum"> 184 185 </ul> 186 </div> 187 </div> 188 <div class="right"> 189 <div class="top"> 190 <div class="hot">HOT</div> 191 <span>熱門推薦</span> 192 </div> 193 <ul> 194 <li> 195 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 196 <div class="right"> 197 <p>清遠新銀盞溫泉度假村酒店/自由行套...</p> 198 <p>網付價<span>¥<span>899</span>起</span> 199 </p> 200 </div> 201 </li> 202 <li> 203 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 204 <div class="right"> 205 <p>清遠新銀盞溫泉度假村酒店/自由行套...</p> 206 <p>網付價<span>¥<span>899</span>起</span> 207 </p> 208 </div> 209 </li> 210 <li> 211 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 212 <div class="right"> 213 <p>清遠新銀盞溫泉度假村酒店/自由行套...</p> 214 <p>網付價<span>¥<span>899</span>起</span> 215 </p> 216 </div> 217 </li> 218 <li> 219 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 220 <div class="right"> 221 <p>清遠新銀盞溫泉度假村酒店/自由行套...</p> 222 <p>網付價<span>¥<span>899</span>起</span> 223 </p> 224 </div> 225 </li> 226 <li> 227 <div class="left"><img src="images/04-search_09.jpg" alt=""></div> 228 <div class="right"> 229 <p>清遠新銀盞溫泉度假村酒店/自由行套...</p> 230 <p>網付價<span>¥<span>899</span>起</span> 231 </p> 232 </div> 233 </li> 234 </ul> 235 </div> 236 </div> 237 </div> 238 </div> 239 240 <!--引入頭部--> 241 <div id="footer"></div> 242 <!--匯入佈局js，共享header和footer--> 243 <script type="text/javascript" src="js/include.js"></script> 244 </body> 245 246 </html>View Code
1 package cn.haifei.travel.web.servlet; 2 3 import cn.haifei.travel.domain.PageBean; 4 import cn.haifei.travel.domain.Route; 5 import cn.haifei.travel.service.RouteService; 6 import cn.haifei.travel.service.impl.RouteServiceImpl; 7 8 import javax.servlet.ServletException; 9 import javax.servlet.annotation.WebServlet; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 import java.io.IOException; 14 15 @WebServlet("/route/*") 16 public class RouteServlet extends BaseServlet { 17 18 private RouteService service = new RouteServiceImpl(); 19 20 /** 21 * 分頁查詢 22 * @param request 23 * @param response 24 * @throws ServletException 25 * @throws IOException 26 */ 27 public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 28 String currentPageStr = request.getParameter("currentPage"); 29 String pageSizeStr = request.getParameter("pageSize"); 30 String cidStr = request.getParameter("cid"); 31 32 String rname = request.getParameter("rname"); //中文亂碼 33 rname = new String(rname.getBytes("iso-8859-1"),"utf-8"); 34 35 int cid = 0; //category類別id 36 // if (cidStr!=null && cidStr.length()>0){ 37 if (cidStr!=null && cidStr.length()>0 && !"null".equals(cidStr)){ 38 cid = Integer.parseInt(cidStr); 39 } 40 int currentPage = 0; //當前頁碼，如果不傳遞，則預設為第一頁 41 if (currentPageStr!=null && currentPageStr.length()>0){ 42 currentPage = Integer.parseInt(currentPageStr); 43 }else { 44 currentPage = 1; //指定預設值（首次訪問currentPageStr==null） 45 } 46 int pageSize = 0; //每頁顯示條數，如果不傳遞，預設每頁顯示5條記錄 47 if (pageSizeStr!=null && pageSizeStr.length()>0){ 48 pageSize = Integer.parseInt(pageSizeStr); 49 }else { 50 pageSize = 5; //指定每頁顯示記錄數的預設值 51 } 52 53 // PageBean<Route> pb = service.pageQuery(cid, currentPage, pageSize); 54 PageBean<Route> pb = service.pageQuery(cid, currentPage, pageSize, rname); 55 56 writeValue(pb, response); 57 } 58 59 }View Code
1 package cn.haifei.travel.service; 2 3 import cn.haifei.travel.domain.PageBean; 4 import cn.haifei.travel.domain.Route; 5 6 /** 7 * 旅遊路線的service介面 8 */ 9 public interface RouteService { 10 11 /** 12 * 根據類別進行分頁查詢 13 * @param cid 14 * @param currentPage 15 * @param pageSize 16 * @return 17 */ 18 public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize); 19 public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize, String rname); 20 21 }View Code
1 package cn.haifei.travel.service.impl; 2 3 import cn.haifei.travel.dao.RouteDao; 4 import cn.haifei.travel.dao.impl.RouteDaoImpl; 5 import cn.haifei.travel.domain.PageBean; 6 import cn.haifei.travel.domain.Route; 7 import cn.haifei.travel.service.RouteService; 8 9 import java.util.List; 10 11 public class RouteServiceImpl implements RouteService { 12 13 private RouteDao dao = new RouteDaoImpl(); 14 15 @Override 16 public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) { 17 //封裝PageBean 18 PageBean<Route> pb = new PageBean<>(); 19 20 pb.setCurrentPage(currentPage); 21 pb.setPageSize(pageSize); 22 23 int totalCount = dao.findTotalCount(cid); 24 pb.setTotalCount(totalCount); 25 26 int start = (currentPage - 1) * pageSize; 27 List<Route> list = dao.findByPage(cid, start, pageSize); 28 pb.setList(list); 29 30 int totalPage = (totalCount % pageSize == 0) ? (totalCount / pageSize) : (totalCount / pageSize) + 1; 31 pb.setTotalPage(totalPage); 32 33 return pb; 34 } 35 36 37 @Override 38 public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize, String rname) { 39 //封裝PageBean 40 PageBean<Route> pb = new PageBean<>(); 41 42 pb.setCurrentPage(currentPage); 43 pb.setPageSize(pageSize); 44 45 int totalCount = dao.findTotalCount(cid, rname); 46 pb.setTotalCount(totalCount); 47 48 int start = (currentPage - 1) * pageSize; 49 List<Route> list = dao.findByPage(cid, start, pageSize, rname); 50 pb.setList(list); 51 52 int totalPage = (totalCount % pageSize == 0) ? (totalCount / pageSize) : (totalCount / pageSize) + 1; 53 pb.setTotalPage(totalPage); 54 55 return pb; 56 } 57 }View Code
1 package cn.haifei.travel.dao; 2 3 import cn.haifei.travel.domain.Route; 4 5 import java.util.List; 6 7 public interface RouteDao { 8 9 /** 10 * 根據cid查詢總記錄數 11 * @param cid 12 * @return 13 */ 14 public int findTotalCount(int cid); 15 public int findTotalCount(int cid, String rname); 16 17 18 /** 19 * 根據cid start pageSize查詢當前頁的資料集合 20 * @param cid 21 * @param start 22 * @param pageSize 23 * @return 24 */ 25 public List<Route> findByPage(int cid, int start, int pageSize); 26 public List<Route> findByPage(int cid, int start, int pageSize, String rname); 27 28 }View Code
1 package cn.haifei.travel.dao.impl; 2 3 import cn.haifei.travel.dao.RouteDao; 4 import cn.haifei.travel.domain.Route; 5 import cn.haifei.travel.util.JDBCUtils; 6 import org.springframework.jdbc.core.BeanPropertyRowMapper; 7 import org.springframework.jdbc.core.JdbcTemplate; 8 9 import java.util.ArrayList; 10 import java.util.List; 11 12 public class RouteDaoImpl implements RouteDao { 13 14 JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource()); 15 16 @Override 17 public int findTotalCount(int cid) { 18 String sql = "select count(*) from tab_route where cid = ?"; 19 return template.queryForObject(sql, Integer.class, cid); //實際返回Integer，預期返回int，自動拆箱了 20 } 21 22 @Override 23 public int findTotalCount(int cid, String rname) { 24 String sql = "select count(*) from tab_route where 1=1 "; 25 StringBuilder sb = new StringBuilder(sql); 26 List params = new ArrayList(); 27 28 if (cid != 0){ 29 sb.append(" and cid = ? "); 30 params.add(cid); //新增?對應的值 31 } 32 if (rname != null && rname.length()>0){ 33 sb.append(" and rname like ? "); 34 params.add("%" + rname + "%"); 35 } 36 sql = sb.toString(); 37 38 return template.queryForObject(sql, Integer.class, params.toArray()); 39 } 40 41 @Override 42 public List<Route> findByPage(int cid, int start, int pageSize) { 43 String sql = "select * from tab_route where cid = ? limit ?,?"; 44 return template.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, pageSize); 45 } 46 47 @Override 48 public List<Route> findByPage(int cid, int start, int pageSize, String rname) { 49 String sql = "select * from tab_route where 1=1 "; 50 StringBuilder sb = new StringBuilder(sql); 51 List params = new ArrayList(); 52 53 if (cid != 0){ 54 sb.append(" and cid = ? "); 55 params.add(cid); //新增?對應的值 56 } 57 if (rname != null && rname.length()>0){ 58 sb.append(" and rname like ? "); 59 params.add("%"+ rname +"%"); 60 } 61 sb.append(" limit ?,? "); 62 params.add(start); 63 params.add(pageSize); 64 sql = sb.toString(); 65 66 return template.query(sql, new BeanPropertyRowMapper<>(Route.class), params.toArray()); 67 } 68 69 }View Code