黑馬旅遊網編寫練習(10)–用戶收藏線路的展示功能
分析
當用戶點擊我的收藏按鈕時，需要將用戶所收藏的所有線路進行展示；並且點擊響應的線路，就會跳轉到該線路對應的詳情頁面。
旅遊線路的分頁展示功能之前已經進行了實現，此處只需要仿照該方法，將查詢的表格修改爲tab_favorite即可；
跳轉到路線詳情頁面之前也進行過實現，此處也只需要仿照該處傳遞相應的參數即可。
首先完成’我的收藏’按鈕的跳轉功能
此處需要要展示的頁面是根據當前登錄的，所以首先查詢用戶是否登錄；若未登錄，則彈出未登陸提示，然後跳轉到登陸頁面；若用戶已登錄，則跳轉到favoriterank.html頁面。具體代碼如下：
// 點擊我的收藏按鈕調用此函數
function myFavorite() {
// 訪問user/helloUser查詢用戶是否登錄
$.post("user/helloUser",{},function (user) {
if(user != null){
// 用戶已經登陸
// 傳遞到favoriterank.html頁面
location.href="http://localhost/travel/favoriterank.html";
}else{
// 用戶尚未登陸
alert("您尚未登錄,請先登錄");
// 跳轉到登陸頁面
location.href="http://localhost/travel/login.html";
}
});
}
然後在favoriterank.html頁面向服務器發送請求進行查詢
請求查詢代碼如下，此處還未編寫查詢結果的展示代碼，結果的展示在查詢後臺代碼完成後再進行編寫。此處代碼目前爲：
$(function () {
// 調用load函數向服務器發送Ajax請求獲取頁面數據
load();
});
function load(currentPage) {
// 向服務器發送Ajax請求獲取頁面數據
$.post("route/myFavorite",{currentPage:currentPage},function (data) {
}
}
接下來編寫後臺查詢代碼
由於收藏的路線和用戶相關，所以便將查詢我的收藏功能在UserServlet中進行實現。在其中添加一個myFavorite方法，該方法的主要內容如下：
/**
* 查詢用戶收藏的所有旅遊線路
* @param request
* @param response
* @throws IOException
*/
public void myFavorite(HttpServletRequest request, HttpServletResponse response) throws IOException{
// 獲取當前登錄用戶
User user = (User) request.getSession().getAttribute("user");
if(user == null || "".equals(user)){
// 用戶未登錄,請求錯誤
System.out.println("用戶未登錄,收藏線路請求錯誤");
return;
}
// 接收當前頁碼
String currentPage_str = request.getParameter("currentPage");
if(currentPage_str == null || currentPage_str.length() == 0){
// currentPage爲空，設置默認值爲1，訪問首頁
currentPage_str = "1";
}
int currentPage = Integer.parseInt(currentPage_str);
// 調用favoriteService中方法查詢用戶收藏的所有旅遊線路,返回一個PageBean對象
PageBean<Favorite> pageBean = favoriteService.myFavorite(user, currentPage);
// 將pageBean對象序列化爲json並響應給客戶端
responseJson(response,pageBean);
}
service層首先需要調用favoriteDao中查詢總線路條數，計算總頁面數；然後調用favoriteDao層查詢該用戶所有收藏的線路信息，將其封裝到favorite對象中，得到一個list集合；然後需要遍歷集合，對每一個favorite對象，分別設置其路線的詳細信息，路線的信息首先要調用RouteDao中通過rid查詢tab_route表的方法，然後需要再調用favoriteDao查詢tab_favorite表中該路線被收藏次數。最後封裝pageBean對象返回。主要代碼如下：
/**
* 查詢用戶的所有收藏線路,響應pageBean對象給客戶端
* @param user
* @param currentPage
* @return
*/
@Override
public PageBean<Favorite> myFavorite(User user, int currentPage, int pageSize) {
System.out.println("FavoriteService收到的currentPage:"+ currentPage);
// 定義PageBean對象
PageBean<Favorite> pageBean = new PageBean<Favorite>();
// 調用favoriteDao中查詢總線路條數
int totalCount = favoriteDao.findTotalCountByUid(user.getUid());
// 計算總頁面數
int totalPage = (totalCount % pageSize == 0)?(totalCount / pageSize):(totalCount / pageSize + 1);
// 計算開始查詢位置
int start = (currentPage - 1) * pageSize;
// 通過favoriteDao調用uid查詢tab_favorite表,返回list集合
List<Favorite> list = favoriteDao.findByUid(user.getUid(),start,pageSize);
// 遍歷集合;
Route route; // 定義旅遊路線對象
for (Favorite favorite : list) {
// 調用RouteDao中通過rid查詢tab_route表
route = routeDao.findRouteByRid(favorite.getRid());
// 調用favoriteDao查詢tab_favorite表中該路線被收藏次數
route.setCount(favoriteDao.findByRid(favorite.getRid()));
// 查詢結果賦值給route對象
favorite.setRoute(route);
}
// 封裝pageBean對象
pageBean.setTotalCount(totalCount);
pageBean.setTotalPage(totalPage);
pageBean.setCurrentPage(currentPage);
pageBean.setPageSize(pageSize);
pageBean.setList(list);
return pageBean;
}
dao層需要編寫的方法有兩個，一個是favoriteDao中查詢總線路條數方法；另一個是favoriteDao層查詢該用戶收藏的線路信息方法注意，並不是查詢所有，而是查詢指定數目的線路信息；這兩個方法內容分別如下所示：
/**
* 通過用戶uid查詢favorite表,將內容封裝到list集合中
* @param uid
* @return
*/
@Override
public List<Favorite> findByUid(int uid, int start, int pageSize) {
String sql = "select * from tab_favorite where uid = ? limit ? ,? ";
List<Favorite> list = template.query(sql, new BeanPropertyRowMapper<Favorite>(Favorite.class), uid,start,pageSize);
return list;
}
/**
* 查詢用戶共收藏線路條數
* @param uid
* @return
*/
@Override
public int findTotalCountByUid(int uid) {
// 定義sql
String sql = "select count(*) from tab_favorite where uid = ?";
return template.queryForObject(sql,Integer.class,uid);
}
至此，已經完成了後臺代碼的編寫。接下來需要在前臺將響應的json數據填充到相應的位置即可。
前臺收藏線路的填充
這部分工作與之前的黑馬旅遊網編寫練習（6）旅遊線路分頁展示功能基本一致，具體可參考該處文章；此處不再詳細講解；直接給出實現代碼，如下：
function load(currentPage) {
// 向服務器發送Ajax請求獲取頁面數據
$.post("user/myFavorite",{currentPage:currentPage},function (pageBean) {
var routes = pageBean.list;
// 展示共多少頁,共多少條記錄
$("#totalCount").html(pageBean.totalCount);
$("#totalPage").html(pageBean.totalPage);
// 展示路線
var rou_str;
for (var i = 0; i < routes.length; i++) {
var li = ' <li>\n' +
' <span class="num one">'+(i+1)+'</span>\n' +
' <a href="route_detail.html"><img src="'+routes[i].route.rimage+'" alt=""></a>\n' +
' <h4><a href="route_detail.html">'+routes[i].route.rname+'</a></h4>\n' +
' <p>\n' +
' <b class="price">¥<span>'+routes[i].route.price+'</span>起</b>\n' +
' <span class="shouchang">已收藏'+routes[i].route.count+'次</span>\n' +
' </p>\n' +
' </li>';
rou_str += li;
}
$("#route").html(rou_str);
// 展示頁碼工具條,實現前5後4的效果
var beforeNum = pageBean.currentPage - 1;
if(beforeNum <= 0){
beforeNum = 1;
}
// 拼接首頁和上一頁
var lis = '<li οnclick="javascript:load(1)"><a href="javascript:void(0);">首頁</a></li>\n' +
' <li οnclick="javascript:load('+beforeNum+')" class="threeword"><a href="javascript:void(0);">上一頁</a></li>';
var beginNum = pageBean.currentPage - 5;
var endNum = pageBean.currentPage + 4;
if(beginNum <= 0){
beginNum = 1;
endNum = beginNum + 9;
}
if(endNum > pageBean.totalPage){
endNum = pageBean.totalPage;
beginNum = endNum - 9;
}
// 若總頁面不足10頁
if(pageBean.totalPage < 10){
beginNum = 1;
endNum = pageBean.totalPage;
}
for (var i = beginNum; i <= endNum; i++) {
var li = ' <li οnclick="javascript:load('+i+')"><a href="javascript:void(0);">'+i+'</a></li>';
lis += li;
}
// 設置下一頁
var nextNum = pageBean.currentPage + 1;
if(nextNum > pageBean.totalPage){
nextNum = pageBean.totalPage;
}
lis += ' <li οnclick="javascript:load('+nextNum+')" class="threeword"><a href="javascript:void(0);">下一頁</a></li>\n' +
' <li οnclick="javascript:load('+pageBean.totalPage+')" class="threeword"><a href="javascript:void(0);">末頁</a></li>';
$("#page").html(lis);
});
}
最後還差一個，點擊收藏線路的標題，或者圖片，能夠跳轉到該線路的詳情頁面
該功能也與黑馬旅遊網編寫練習（6）旅遊線路分頁展示功能中的查案詳情處基本相似；因爲此處也是要跳轉到route_detail.html頁面；所以需要傳遞的參數以及路徑都是一致的；分別爲圖片和標題添加如下所示的路徑即可。
// 展示路線
var rou_str;
for (var i = 0; i < routes.length; i++) {
var li = ' <li>\n' +
' <span class="num one">'+(i+1)+'</span>\n' +
' <a href="route_detail.html?rid='+routes[i].route.rid+'"><img src="'+routes[i].route.rimage+'" alt=""></a>\n' +
' <h4><a href="route_detail.html?rid='+routes[i].route.rid+'">'+routes[i].route.rname+'</a></h4>\n' +
' <p>\n' +
' <b class="price">¥<span>'+routes[i].route.price+'</span>起</b>\n' +
' <span class="shouchang">已收藏'+routes[i].route.count+'次</span>\n' +
' </p>\n' +
' </li>';
rou_str += li;
}
至此，用戶的旅遊路線的收藏功能便已實現完畢。