⦁ 旅遊線路收藏功能

⦁ 分析

⦁ 判斷當前登入使用者是否收藏過該線路

當頁面載入完成後，傳送ajax請求，獲取使用者是否收藏的標記 根據標記，展示不同的按鈕樣式

⦁ 編寫程式碼

⦁ 後臺程式碼

RouteServlet：

public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //1. 獲取線路id
  String rid = request.getParameter("rid");
​
  //2. 獲取當前登入的使用者 user
  User user = (User) request.getSession().getAttribute("user");
  int uid;//使用者id
  if(user == null){
    //使用者尚未登入
    uid = 0;
   }else{
    //使用者已經登入
    uid = user.getUid();
   }
​
  //3. 呼叫FavoriteService查詢是否收藏
  boolean flag = favoriteService.isFavorite(rid, uid);
​
  //4. 寫回客戶端
  writeValue(flag,response);
}
 

FavoriteService

@Override
public boolean isFavorite(String rid, int uid) {
​
  Favorite favorite = favoriteDao.findByRidAndUid(Integer.parseInt(rid), uid);
​
  return favorite != null;//如果物件有值，則為true，反之，則為false
}
​

FavoriteDao

@Override
public Favorite findByRidAndUid(int rid, int uid) {
  Favorite favorite = null;
  try {
    String sql = " select * from tab_favorite where rid = ? and uid = ?";
    favorite = template.queryForObject(sql, new BeanPropertyRowMapper<Favorite>(Favorite.class), rid, uid);
   } catch (DataAccessException e) {
    e.printStackTrace();
   }
  return favorite;
}
​
 

⦁ 前臺程式碼

route_detail.html

$(function () {
  // 傳送請求，判斷使用者是否收藏過該線路
  var rid = getParameter("rid");
  $.get("route/isFavorite",{rid:rid},function (flag) {
    if(flag){
      // 使用者已經收藏過
      //<a  class="btn already" disabled="disabled">
      //設定收藏按鈕的樣式
      $("#favorite").addClass("already");
      $("#favorite").prop("disabled",disabled);
     }else{
      // 使用者沒有收藏
     }
   });
​
 

⦁ 收藏次數的動態展示

前臺：

//設定收藏次數
$("#favoriteCount").html("已收藏"+route.count+"次");
​
後臺：
    RouteService
//4. 查詢收藏次數
int count = favoriteDao.findCountByRid(route.getRid());
route.setCount(count);
​
FavoriteDao
@Override
public int findCountByRid(int rid) {
  String sql = "SELECT COUNT(*) FROM tab_favorite WHERE rid = ?";
​
  return template.queryForObject(sql,Integer.class,rid);
}

⦁ 點選按鈕收藏線路

⦁ 分析：

⦁ 編碼

前臺程式碼

    $(function () {
  // 傳送請求，判斷使用者是否收藏過該線路
  var rid = getParameter("rid");
  $.get("route/isFavorite",{rid:rid},function (flag) {
    if(flag){
      // 使用者已經收藏過
      //<a  class="btn already" disabled="disabled">
      //設定收藏按鈕的樣式
      $("#favorite").addClass("already");
      $("#favorite").attr("disabled","disabled");
​
      //刪除按鈕的點選事件
      $("#favorite").removeAttr("onclick");
     }else{
      // 使用者沒有收藏
     }
   });
​
​
​
});
​
//點選收藏按鈕觸發的方法
function addFavorite(){
  var rid = getParameter("rid");
  //1. 判斷使用者是否登入
  $.get("user/findOne",{},function (user) {
    if(user){
      //使用者登入了
      //新增功能
      $.get("route/addFavorite",{rid:rid},function () {
​
        //程式碼重新整理頁面
        location.reload();
       });
​
    }else{
      //使用者沒有登入
      alert("您尚未登入，請登入");
      location.href="http://localhost/travel/login.html";
    }
   })
}
​

後臺程式碼

RouteServlet

public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //1. 獲取線路rid
  String rid = request.getParameter("rid");
  //2. 獲取當前登入的使用者
  User user = (User) request.getSession().getAttribute("user");
  int uid;//使用者id
  if(user == null){
    //使用者尚未登入
    return ;
   }else{
    //使用者已經登入
    uid = user.getUid();
   }
​
​
  //3. 呼叫service新增
  favoriteService.add(rid,uid);
​
}

FavoriteService

@Override
public void add(String rid, int uid) {
  favoriteDao.add(Integer.parseInt(rid),uid);
}

FavoriteDao

@Override
public void add(int rid, int uid) {
    String sql = "insert into tab_favorite values(?,?,?)";

    template.update(sql,rid,new Date(),uid);
}