黑马旅游网编写练习(9)–旅游线路收藏功能
旅游线路收藏功能分析
在旅游详情页面，用户点击收藏按钮后，我们向服务器发送Ajax请求；然后查询用户是否登录；若用户已登录，则需要查询数据库表格判断该用户是否收藏了该线路；若收藏成功，则返回标记，前端根据该标记修改收藏按钮的样式。
数据库表格关系分析
用户收藏线路，涉及到三个表格；一个是用户的表格tab_user；一个是旅游线路tab_route；还有一个是用户收藏表格tab_favorite。先来观察这三个表格之间的关系。
tab_favorite表格中rid代表某一条旅游线路；uid代表用户信息。所以在前台向服务器发送Ajax请求时，需要传递的参数是rid；uid可以通过查询当前登录用户来查询。而用户是否收藏该线路则只需要查询tab_favorite表格中是否存在满足rid和uid的信息。
接下来先开始编写后台信息
首先开始编写web层，在RouteServlet中编写一个查询是否收藏的方法；该方法主要代码如下：
/*** 判断用户是否已经收藏了该线路* @param request* @param response* @throws IOException*/public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws IOException {// 获取线路的rid参数String rid_str = request.getParameter("rid");if(rid_str == null || rid_str.length() == 0 || rid_str.equals("null")){// rid_str为空System.out.println("rid_str为空");return;}int rid = Integer.parseInt(rid_str);// 判断用户是否登录User user = (User) request.getSession().getAttribute("user");int uid = 0;if(user == null){// 用户未登录System.out.println("用户未登录，请先登录");return;}else{// 用户已登录，获取用户的uiduid = user.getUid();}// 调用FavoriteService查询线路rid是否被用户uid收藏boolean flag = favoriteService.isFavorite(rid, uid);// 将该收藏标志信息返回给客户端responseJson(response,flag);}
接下来开始编写service层，该层实现一个判断线路rid是否被用户uid收藏的方法，主要代码如下：
// 创建FavoriteDao对象FavoriteDao favoriteDao = new FavoriteDaoImpl();/*** 判断线路rid是否被用户uid收藏* @param rid* @param uid* @return*/@Overridepublic boolean isFavorite(int rid, int uid) {// 创建一个favorite对象，存储查询结果Favorite favorite = null;// 调用FavoriteDao，查询tab_favorite表favorite = favoriteDao.findByRidAndUid(rid, uid);if(favorite == null){// 查询失败return false;}else{// 查询成功return true;}}
最后编写dao层，创建一个FavoriteDao对象。该对象中通过rid和uid查询tab_favorite表。主要代码如下：
// 定义数据库连接对象JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 通过rid和uid查询tab_favorite表格，返回Favorite对象* @param rid* @param uid* @return*/@Overridepublic Favorite findByRidAndUid(int rid, int uid) {Favorite favorite = null;// 定义sqlString sql = "select * from tab_favorite where rid = ? and uid = ? ";try {// 执行sqlfavorite = template.queryForObject(sql,new BeanPropertyRowMapper<Favorite>(Favorite.class),rid,uid);} catch (DataAccessException e) {//e.printStackTrace(); //查询失败System.out.println("favorite查询失败");}return favorite;}
前台完成数据的传递以及收藏按钮样式的展示
用户浏览线路详情时，需要自动向后台发送Ajax请求；根据响应结果为收藏按钮展示不同的样式。
在前台向服务器发送Ajax请求时，需要传递的参数是rid；服务器响应的是用户是否收藏的标志。若用户已经收藏，则设置收藏按钮的样式为已收藏，并且不可点击。
收藏按钮设置的主要代码如下：
// 向服务器发送Ajax请求，获取是否收藏标志，若已收藏，则设置收藏按钮为已收藏状态$.post("route/isFavorite",{rid:rid},function (flag) {alert(flag);if(flag){// 如果当前登录用户已经收藏了此线路// <!--<a class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>-->$("#favorite").addClass("already");$("#favorite").attr("disabled","disabled");$("#favorite").text("已收藏");// 删除按钮的点击事件$("#favorite").removeAttr("onclick");}});
前台完成收藏次数的展示
用户浏览线路详情时，需要自动向后台发送Ajax请求；获取当前线路的收藏次数，将收藏次数展示到页面中相应位置。
同样，我们在routeServlet中添加一个favoriteCount方法来完成此功能；在favoriteDao中添加一个通过线路rid来查询tab_favorite表格的方法；同样在favoriteService中也增加一个方法。
首先来写dao的代码，favoriteDao中查询方法如下：
/*** 通过rid查询该线路被收藏的次数* @param rid* @return*/@Overridepublic int findByRid(int rid) {int favoriteCount = -1;// 定义sqlString sql = "select count(*) from tab_favorite where rid = ? ";try {// 执行sqlfavoriteCount = template.queryForObject(sql,Integer.class,rid);} catch (DataAccessException e) {//e.printStackTrace(); // 查询失败System.out.println("FavoriteDao查询收藏次数失败");}return favoriteCount;}
接下来编写service层的代码，favoriteService中查询方法如下：
/*** 判断线路rid的收藏次数* @param rid* @return*/@Overridepublic int favoriteCount(int rid) {// 调用dao层方法查询线路rid的收藏次数return favoriteDao.findByRid(rid);}
接下来在routeServlet中添加一个favoriteCount方法，该方法具体如下：
/*** 查询线路rid的收藏次数* @param request* @param response* @throws IOException*/public void favoriteCount(HttpServletRequest request, HttpServletResponse response) throws IOException{// 获取线路ridString rid_str = request.getParameter("rid");if(rid_str == null || rid_str.length() == 0 || rid_str.equals("null")){// rid_str为空System.out.println("rid为空，请求错误");return;}int rid = Integer.parseInt(rid_str);// 调用favoriteService层方法查询线路的收藏次数int favoriteCount = favoriteService.favoriteCount(rid);// 将收藏次数响应给客户端responseJson(response,favoriteCount);}
最后完成前台收藏次数的展示，展示的主要代码如下：
// 向服务器发送Ajax请求，获取线路收藏次数，并将收藏次数展示到页面$.post("route/favoriteCount",{rid:rid},function (count){$("#favoriteCount").html("已收藏"+count+"次");});
点击收藏按钮，完成线路的收藏
分析
首先要为该收藏按钮添加点击事件，当用户点击该按钮后；向服务器发送Ajax请求；服务器判断用户是否登录；若用户未登录，则提示用户还没有登陆，然后跳转到登陆页面。若用户已经登陆，则设置将该线路rid和用户的uid，保存到tab_favorite表中；若保存成功，则再将页面中点击收藏按钮和收藏次数进行刷新。
首先完成后台代码的编写，在routeServlet中添加一个方法，该方法结合favoriteService和favoriteDao实现将收藏路线添加到tab_favorite中
在routeServlet中添加的方法如下：
/*** 为登录用户添加线路rid的收藏* @param request* @param response* @throws IOException*/public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws IOException{// 获取线路ridString rid_str = request.getParameter("rid");if(rid_str == null || rid_str.length() == 0 || rid_str.equals("null")){// rid_str为空System.out.println("rid为空，请求错误");return;}int rid = Integer.parseInt(rid_str);// 获取登录用户User user = (User) request.getSession().getAttribute("user");if(user == null){info.setFlag(false);info.setErrorMsg("用户尚未登陆，请先登录");// 将错误信息对象响应给客户端responseJson(response,info);return;}// 获取用户的uidint uid = user.getUid();// 调用favoriteService对象，添加用户uid的收藏线路ridboolean flag = favoriteService.addFavorite(rid, uid);if(flag){// 收藏成功info.setFlag(true);}// 将错误信息对象响应给客户端responseJson(response,info);}
service层添加用户uid的收藏线路rid的方法如下所示
/*** 为用户uid添加收藏线路rid* @param rid* @param uid* @return*/@Overridepublic boolean addFavorite(int rid, int uid) {// 调用favoriteDao层的添加收藏线路方法boolean flag = favoriteDao.addByRidAndUid(rid, uid);return flag;}
favoriteDao层的添加收藏线路方法如下所示
/*** 为用户uid添加收藏线路rid* @param rid* @param uid* @return*/@Overridepublic boolean addByRidAndUid(int rid, int uid) {// 定义sqlString sql = "insert into tab_favorite values(?, ?, ?) ";try {//执行sqltemplate.update(sql, rid, new Date(), uid);} catch (DataAccessException e) {//e.printStackTrace(); // 收藏失败System.out.println("用户收藏线路失败");return false;}return true;}
至此收藏线路功能的后台代码已经完成，接下来完成前端的收藏功能
前端收藏旅游线路的方法如下：
// 添加收藏线路方法function addFavorite() {// 获取ridvar rid = getParameter("rid");// 向服务器发送Ajax请求,添加收藏线路rid$.post("route/addFavorite",{rid:rid},function (info) {if(info.flag){// 收藏成功// 重新调用已收藏按钮的方法，并重新展示已收藏次数favorite(rid);}else{// 用户尚未登陆alert(info.errorMsg);// 跳转到登陆页面location.href="http://localhost/travel/login.html";}});}
我们在这里将之前所写的收藏查询的功能，以及收藏次数查询的功能整理为一个方法，称为favorite方法，其主要内容如下：
// 收藏线路并重新展示收藏次数方法function favorite(rid) {// 向服务器发送Ajax请求，获取是否收藏标志，若已收藏，则设置收藏按钮为已收藏状态$.post("route/isFavorite",{rid:rid},function (flag) {if(flag == true){// 如果当前登录用户已经收藏了此线路// <!--<a class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>-->$("#favorite").addClass("already");$("#favorite").attr("disabled","disabled");$("#favorite").text("已收藏");// 删除按钮的点击事件$("#favorite").removeAttr("onclick");}});// 向服务器发送Ajax请求，获取线路收藏次数，并将收藏次数展示到页面$.post("route/favoriteCount",{rid:rid},function (count){$("#favoriteCount").html("已收藏"+count+"次");});}
至此，便可以完成用户的收藏功能了。
如果觉得《黑马旅游网编写练习(9)--旅游线路收藏功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
