vue3前端中如何实现点赞功能和基本图片转换

前端

一、资源准备

首先在基本网站或者小程序的设计中，点赞图片一般呈现为两种形式，一种是空心的未点赞形式，一种是实心的已经点赞的形式，所以需要准备的是两个素材图片，在这里我在src/assets下存放了like和liked两个素材图片

二、前端逻辑设计

由于我正在编写的是一个论坛类网站，所以这里的点赞功能是在帖子组件上实现的，这里根据我实现的功能举例，首先在图片的展示上，我们可以设置一个变量来控制展示那张图片，我这里运用了三目运算符，具体示例如下：

import likeImg from '@/assets/like.png';
import likedImg from '@/assets/liked.jpg';

这里大家导入自己的素材图片即可，然后由于img标签是不能直接添加点击功能的，所以我们可以使用标签来包裹图片标签

<span @click="handleLikeClick($event)">
              <img :src="isLiked ? likedImg : likeImg" class="myimg" />{{ post.likesCount }}
            </span>

这里就是前面是对应的图片，后面的是从数据库调动得来的动态数据，表示点赞数
然后我在这里遇到了第一个问题，如果没有在点击的组件上设置跳转功能的可以跳过这一段，由于我设计的是帖子的点赞功能，但是帖子在点击以后会进入到详情页，所以我在点击点赞图标的时候就直接跳跃到了帖子详情组件，在这里我们需要设置阻止跳转，把这个逻辑放在点击方法里面处理，所以这里需要传递参数($event)来指代跳转事件

event.stopPropagation();

然后我们需要设置对应的变量即三目运算符中出现的isLiked，默认应该为false

const isLiked = ref(false)

然后每一次点击，它的值都应该反转，并且在后端发起请求修改，但是由于不同状态的处理逻辑不同我们需要把状态作为参数传递过去，并且针对帖子功能，我还需要传递帖子id，所以设计的参数是一个对象

const EventParam = ref({
  pid:props.post.id,
  status:0,
})

由于我的展示帖子是一个子组件，没有做到实时更新，所以多添加了判断逻辑，最终点击方法的逻辑处理是：

const handleLikeClick = async(event) => {
  event.stopPropagation();
  if(isLiked.value===false){
    EventParam.value.status = 0
  }
  else{
    EventParam.value.status = 1
  }
  if (isLiked.value) {
    props.post.likesCount -= 1;
  } else {
    props.post.likesCount += 1;
  }
  isLiked.value = !isLiked.value
  await ConjugatorService(EventParam.value)
  ElMessage.success("点赞成功")
};

后端

后端的逻辑处理就比较简单，首先可以先设计一个Query类来包含传递过来的参数

import lombok.Data;

@Data
public class LikeQuery {
    //帖子id
    public Integer  pid;
    //帖子状态,1表示已经实现，0表示还没有
    public Integer status;
}

然后先根据id查询到对于的数据信息，然后根据不同状态对应的处理逻辑，这里后端逻辑比较简单我就直接展示给大家：

 //点赞方法
    @PostMapping("/post/conjugator")
    public R<String> conjugatorPost(@RequestBody LikeQuery likeQuery){
        LambdaQueryWrapper<Post> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(Post::getId,likeQuery.getPid());
        Post res = postService.getOne(queryWrapper);
        if(likeQuery.getStatus()==1 && res.getLikesCount()!=0){
            res.setLikesCount(res.getLikesCount()-1);
        }
        else if(likeQuery.getStatus()==0 ){
            res.setLikesCount(res.getLikesCount() + 1);
        }
        postService.update(res,queryWrapper);
        return R.success("点赞成功");
    }

最后就实现了点赞功能，希望对大家有帮助。