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

1. 点赞的流程图分析

1.1 进入尚未点赞过的文章

用户通过点击👍的按钮，实现点赞。
当点击按钮时，会判断用户是否登录
若登录，则点赞数+1且点赞按钮高亮，若再次点击，则取消点赞
若未登录，则提醒用户进行登录。

1.2 进入已经点赞过的文章

用户进入页面，首先会判断用户是否登录
若没有登录，则不做处理
若登录，则判断用户是否点赞过该文章
若点赞过，则高亮👍按钮，若再次点击，则取消点赞
若没点赞过，则不做处理

2. 数据库设计

数据库设计的很简单：

点赞表：

id——主键
article_id 该文章的ID
user_id 用户的ID
created_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请求

controller

@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

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

mapper

    /**
     * 点赞文章
     * @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是组件每次创建都会触发的方法

即我们进入该文章详情页面就会触发判断

后端：

controller

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

service & mapper

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

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

    @Override
    public boolean isThumbUp(Long aid, Long uid) {
        LambdaQueryWrapper<ArticleLike> 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: 具体使用可以看下面的链接

https://blog.csdn.net/L_201607/article/details/80479963?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.nonecase