黑马旅游网编写练习(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){
            // 如果当前登录用户已经收藏了此线路
            // 
            $("#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){
                // 如果当前登录用户已经收藏了此线路
                // 
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled","disabled");
                $("#favorite").text("已收藏");

                // 删除按钮的点击事件
                $("#favorite").removeAttr("onclick");

            }
        });

        // 向服务器发送Ajax请求，获取线路收藏次数，并将收藏次数展示到页面
        $.post("route/favoriteCount",{rid:rid},function (count){
            $("#favoriteCount").html("已收藏"+count+"次");
        });
    }

至此，便可以完成用户的收藏功能了。