【JavaWeb】112：收藏功能的实现

今天是刘小爱自学Java的第112天。

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

收藏，一个很常见很重要的功能。

看到一篇文章，可以选择收藏。

看到一个商品，也可以选择收藏。

包括本次案例中的旅游路线也是一样的。

这也是一个被频繁使用的功能。

我写了一百多篇的文章，有一个重大发现就是：文章被收藏数，远远大于点赞和评论。

正所谓收藏从未停止，学习从未开始。

这是我某平台的后台截图：

我们今天要学的就是这个收藏功能的实现，当然我们项目不是文章，而是旅游线路的收藏。

一、业务分析

收藏有什么特点呢？

用户收藏之后，在他的收藏夹可以快速访问。

同一旅游路线，可以有多个用户收藏。

同一个用户，可以收藏多条旅游路线

它们之间的关系是多对多，所以在设计数据表时，会设计一个中间表来关联它们。

这是可视化工具中的视图功能，这样一看的话，表与表之间的关系就很清楚了。

在中间表中，有另外两张表的主键，分别为uid和rid：

uid可以确定是哪个用户。

rid可以确定是哪条路线。

其中主要牵扯到两个功能：

1判断该路线是否能够被用户收藏

想要收藏旅游路线，肯定需要用户登录的。

如果用户没有登录，则无法收藏。

如果用户已经收藏了，也没法收藏。

2可以收藏的话完成收藏功能

收藏了之后，要将对应路线的count值加一。

同时还要将对应路线的count值查询出来，以便用户查看总收藏数。

二、判断是否已被收藏

1前端发送请求

向后台发送请求判断是否能收藏，请求中的参数为rid。

2Web层

创建FavoriteServlet接受请求，在isFavorite方法中编写代码：

接受请求

获取前端发送的请求数据rid。

Service层

这里做了一个判断，判断用户是否登录：

如果用户没有登录，那么不可收藏。

如果用户已经登录了，那么再去数据库查询是否已经收藏了。

响应数据

将数据转换成json数据，再响应数据。

3Service层

调用dao层查询数据

要判断用户是否已经收藏了该路线，需要根据rid和uid这两个参数去查询tab_favorite表。

查询数据一般是一条数据，但稳妥起见这里返回值还是用一个集合接受。

毕竟就算只有一条数据也可以放入集合中。

查询结果判断

如果能查询到数据，则表示已经收藏了，所以返回false，反之则为true。

4dao层

使用jdbcTemplate的query方法查询数据，结果为一个集合，将其返回即可。

5前端渲染

前端接受服务器响应的数据之后，根据返回值判断是否将相应的按钮隐藏：

如果返回的值为true，表示已经被收藏了，所以不可收藏了，将点击收藏这个按钮隐藏。

如果返回值为false，则相反。

上述都是使用的id选择器来定位标签。

三、添加收藏业务

添加收藏的功能实现和上述的是差不多的，但逻辑稍许复杂。

1前端发送请求

在“点击收藏”处将点击事件和该函数绑定。

用户点击收藏，就会向服务器发送请求，其中请求参数为rid。

2web层

接受前端请求，并在addFavorite()方法中编写代码：

用户未登录

则不可添加收藏，将数据封装到map中。

用户已登录：添加收藏数据

调用favoriteService来操作。

用户已登录：更新收藏记录数

调用routeService来操作。

添加收藏只是针对tab_favorite这张表，除此之外我们还得查询添加收藏后的总收藏数。

所以需要根据rid查询tab_route这张表中的数据，得到route对象。

再调用route的属性count即可得到总收藏数，其对应Service层Dao层代码如下：

注意：这里是Route中的代码编写。

既然是根据id查询，肯定是一个route对象，故使用queryForObject()方法。

3Service层

这里是Favorite的service层。

添加收藏数据

通过favoriteDao层对tab_favorite这张表进行增加收藏数据的操作。

更新收藏记录数

将tab_route表中对应数据的count增加一，又是调用了routeDao的方法。

调用jdbcTemplate的update方法完成对对应数据的字段count增一。

返回数据

这两者必须同时成功，否则就算失败，也就是返回值都不为0才行。

4dao层

向tab_favorite表中添加收藏数据，共三个字段：

rid：对应收藏的是哪条路线。

uid：对应哪个用户收藏了该路线。

date：用户收藏时的时间。

5前端渲染

收藏成功

将已经收藏次数更新后显示。

收藏失败

跳转登录页面，提示用户完成登录。

最后

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。