黑马旅游网编写练习(9)--旅游线路收藏功能
黑马旅游网编写练习(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{
// 用户已登录，获取用户的uid
uid = 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
*/
@Override
public 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
*/
@Override
public Favorite findByRidAndUid(int rid, int uid) {
Favorite favorite = null;
// 定义sql
String sql = "select * from tab_favorite where rid = ? and uid = ? ";
try {
// 执行sql
favorite = 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
*/
@Override
public int findByRid(int rid) {
int favoriteCount = -1;
// 定义sql
String sql = "select count(*) from tab_favorite where rid = ? ";
try {
// 执行sql
favoriteCount = template.queryForObject(sql,Integer.class,rid);
} catch (DataAccessException e) {
//e.printStackTrace(); // 查询失败
System.out.println("FavoriteDao查询收藏次数失败");
}
return favoriteCount;
}
接下来编写service层的代码，favoriteService中查询方法如下：
/**
* 判断线路rid的收藏次数
* @param rid
* @return
*/
@Override
public 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{
// 获取线路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为空，请求错误");
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{
// 获取线路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为空，请求错误");
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;
}
// 获取用户的uid
int uid = user.getUid();
// 调用favoriteService对象，添加用户uid的收藏线路rid
boolean flag = favoriteService.addFavorite(rid, uid);
if(flag){
// 收藏成功
info.setFlag(true);
}
// 将错误信息对象响应给客户端
responseJson(response,info);
}
service层添加用户uid的收藏线路rid的方法如下所示
/**
* 为用户uid添加收藏线路rid
* @param rid
* @param uid
* @return
*/
@Override
public boolean addFavorite(int rid, int uid) {
// 调用favoriteDao层的添加收藏线路方法
boolean flag = favoriteDao.addByRidAndUid(rid, uid);
return flag;
}
favoriteDao层的添加收藏线路方法如下所示
/**
* 为用户uid添加收藏线路rid
* @param rid
* @param uid
* @return
*/
@Override
public boolean addByRidAndUid(int rid, int uid) {
// 定义sql
String sql = "insert into tab_favorite values(?, ?, ?) ";
try {
//执行sql
template.update(sql, rid, new Date(), uid);
} catch (DataAccessException e) {
//e.printStackTrace(); // 收藏失败
System.out.println("用户收藏线路失败");
return false;
}
return true;
}
至此收藏线路功能的后台代码已经完成，接下来完成前端的收藏功能
前端收藏旅游线路的方法如下：
// 添加收藏线路方法
function addFavorite() {
// 获取rid
var 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+"次");
});
}
至此，便可以完成用户的收藏功能了。
上一篇： IO流小结与练习
下一篇： [原理] 说说Web请求的过程