09 旅游线路收藏功能实现

一） 收藏标志flag

整体逻辑：

数据库表结构关系：

代码实现

1 后端代码实现

RouteServlet

/**
     * 判断当前登录用户是否收藏过该线路
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    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);
    }

FavoriteServiceImpl

public class FavoriteServiceImpl implements FavoriteService {
    private FavoriteDao favoriteDao = new FavoriteDaoImpl();

    @Override
    public boolean isFavorite(String rid, int uid) {
        Favorite favorite = favoriteDao.findByRidAndUid(Integer.parseInt(rid),uid);
        return favorite != null;//如果对象有值，则为true；否则为false
    }
}

FavoriteDaoImpl

public class FavoriteDaoImpl implements FavoriteDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @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;
    }
}

2 前端代码实现

route_detail.html

$(function(){
        //发送请求，判断用户是否收藏过该线路
        var rid = getParameter("rid");
        $.get("route/isFavorite",{rid:rid},function(flag){
            if(flag){
                //用户已经收藏过
                //设计收藏样式
                $("#favorite").addClass("already");
                $("#favorite").prop("disabled",disabled);
            }else{
                //未收藏过
            }
        });
    });

---

二）收藏次数显示

【小功能】收藏次数的动态展示

实现思路：
（1）route_details.html数据填充：

（2）RouteServiceImpl补充代码：


（3）FavoriteDao中补充代码：

效果展示

---

二）收藏按钮功能

整体逻辑：

后端代码实现

RouteServlet代码补充：

/**
     * 获取
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    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);

    }

FavoriteServiceImpl代码补充：

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

FavoriteDaoImpl代码补充：

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

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

前端代码

route_detail.html代码补充：

 //点击收藏按钮触发的方法
    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";
            }
        })
    }

功能优化

优化目标：“收藏”按钮点击之后，不能再次点击，故去除按钮点击事件属性即可

代码补充：

---

【完结于20200820】