仿掘金社区：点赞的流程图分析和判断用户是否登录代码分析

该文章写得较简单，后续会更新- -

1. 点赞的流程图剖析1.1 进入仍未点赞过的文章

用户通过点击的按键网页点赞，实现点赞。当点击按键时，会判定用户是否登陆若登陆，则点赞数+1且点赞按键高亮，若再度点击，则取消点赞若未登陆，则提醒用户进行登陆。

1.2 进入早已点赞过的文章

用户步入页面，首先会判定用户是否登陆若没有登陆，则不做处理若登陆，则判定用户是否点赞过该文章若点赞过，则高亮按键，若再度点击，则取消点赞若没点赞过，则不做处理

2. 数据库设计

数据库设计的很简单：

点赞表：

id——主键article_id 该文章的IDuser_id 用户的IDcreated_time 创建时间可选，看你需不需要点踩功能，如果须要，可以加个type数组，用于分辨可选，增加个逻辑删掉数组，不过我觉得对于点赞功能不是很有必要。

文章表：看个人需求，点赞的话要有个记录点赞数的数组即可

3. 代码实现

我们按找流程图一步一步来。

具体效果图我会用近来正在做的一个仿鹈鹕社区进行演示，帮助你们更直观的观看疗效

3.1 如何判定用户是否登陆

代码剖析

首先步入仍未点赞过的文章的时侯要判定用户是否登陆，

因为我是用的Vue，所以处理如下：

在Vuex的state写上isLogin数组，同时在mutation申明一个方式，当用户成功登陆将isLogin设置成true

这里建议你们，安装Vuex持久化插件vuex-persistedstate，将vuex数据存储在session上面，以放每次刷新页面，导致数据遗失

完成判别用户怎么登陆以后，我们就可以继续处理接下来的流程

3.2 若用户没有登陆的情况下点击按键，则进行提醒

效果图

代码

我是直接用一行代码进行提醒。大家可以按照须要进行调整，比如直接弹出登陆框也是可以的~

3.3 若用户为登录状态，点击

效果图

代码剖析

前端：

按钮

定义好基本的数据方式

// 点赞记录（传给后端的数据）
thumbUpArticle: {
  articleId: '',
  userId: ''
},
// 点赞按钮颜色和类型，熟悉Element-UI的同学应该了解是
// 用于动态变化按钮的颜色和右上角小圆圈的颜色
thumbUpArticleBtn: {
  type: 'info',
  color: ''
},

核心代码

可能看起来注释写的有点乱，

不过你们从第一行耐心往下读即可O(∩_∩)O，思路特别清晰

前端封装好数据传给前端前端进行处理，返回结果给后端后端领到结果进行页面渲染

后端：

后端我使用的是Springboot 和 Mybatis、MybatisPlus

基本思路是 前端恳求->controller->service->mapper->数据库

处理Post恳求

@RestController
@RequestMapping("/article_like")
public class ArticleLikeController {
    @Autowired
    private ArticleLikeService articleLikeService;
    @PostMapping("/")
    // 调用service的thumbUpArticle方法
    public MyJsonResult thumbUpArticle(@RequestBody ArticleLike articleLike) {
        return MyJsonResult.success(articleLikeService.thumbUpArticle(articleLike));
    }
}

@Service
@Transactional // 进行事务
public class ArticleLikeServiceImpl extends ServiceImpl<ArticleLikeMapper, ArticleLike> implements ArticleLikeService {
    @Autowired
    private ArticleLikeMapper articleLikeMapper;
    @Autowired
    private ArticleMapper articleMapper;
    @Override
    // 直接使用mp自带的insert插入点赞记录，再使用自己编写的sql进行文章点赞数+1
    public boolean thumbUpArticle(ArticleLike articleLike) {
        // 两者成功才成功
        return articleLikeMapper.insert(articleLike) > 0 && articleMapper.incrLikeCount(articleLike.getArticleId());
    }
}

    /**
     * 点赞文章
     * @param articleId
     * @return
     */
    @Update("update article set like_count = like_count + 1 where id = #{articleId}")
    boolean incrLikeCount(Long articleId);

处理delete恳求和post差不多，就是取消点赞。

3.4 判断用户是否点赞过

如果用户在登入的情况下，进入早已点赞过的按键，则按键会手动高亮

效果图

代码剖析

前端：

这里注意！！！

该方式须要置于vue的钩子函数created上面

因为created是组件每次创建就会触发的方式

即我们步入该文章详情页面都会触发判定

后端：

    @GetMapping("/is")
    public MyJsonResult isThumbUp(@RequestParam("aid")Long aid,@RequestParam("uid")Long uid) {
        boolean thumbUp = articleLikeService.isThumbUp(aid, uid);
        return MyJsonResult.success(thumbUp);
    }

判断逻辑，根据后端传来的文章ID和用户ID网页点赞，判断点赞表中是否有相同的数据

这边使用了mybatis-plus，正常操作也是一样的。

    @Override
    public boolean isThumbUp(Long aid, Long uid) {
        LambdaQueryWrapper lqw = new LambdaQueryWrapper<>();
        lqw
                .eq(ArticleLike::getArticleId, aid)
                .eq(ArticleLike::getUserId, uid);
        Integer res = articleLikeMapper.selectCount(lqw);
        return res>0;
    }

4. 写在最后

点赞评论的话思路虽然也差不多，不过须要注意怎样保持点赞过的状态，我的思路是先把用户点赞过的评论ID取下来，因为每位评论是借助v-for实现的，将点赞按键的style写成如下:style={color:isThumbUpComment(item.id)},然后这个方式就是判定当前评论对象的ID是否在上面维持的链表里，如果存在，则返回高亮的颜色字符串，如果不是直接返回''即可。

希望你们一起进步哇！！(●''●)~~

5. 福利：GIF图制做工具——Gifcam

Gifcam: 具体使用可以看下边的链接

blog.csdn.net/L_201607/ar…