一) 收藏标志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】

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐