当前位置：首页 > article >正文

SpringBoot整合Redis实现点赞、收藏功能

article 2024/9/25 5:31:03

前言

点赞、收藏功能作为常见的社交功能，是众多Web应用中必不可少的功能之一。而redis作为一个基于内存的高性能key-value存储数据库，可以用来实现这些功能。

本文将介绍如何使用spring boot整合redis实现点赞、收藏功能，并提供前后端页面的编写代码。

准备工作

在开始之前，您需要进行以下准备工作：

安装JDK
安装Redis，并启动Redis服务
安装Node.js和Vue.js，以便我们能够开发前端页面

后端实现

在后端中，我们需要使用spring boot来整合redis，并进行相关的接口设计和实现。下面是实现点赞和收藏的核心代码。

Redis配置

接下来，我们需要配置Redis连接信息，可以在application.yml中进行配置。

spring:
  redis:
    host: localhost
    port: 6379

点赞功能实现

下面是点赞功能的接口实现代码。

@RestController
@RequestMapping("/like")
public class LikeController {

    @Autowired
    private RedisTemplate<String, String> redisTemplate;

    @PostMapping("/add")
    public String addLike(@RequestParam String userId, @RequestParam String objectId) {
        String key = "like:" + objectId;
        long result = redisTemplate.opsForSet().add(key, userId);
        return result > 0 ? "点赞成功" : "不能重复点赞";
    }

    @PostMapping("/delete")
    public String deleteLike(@RequestParam String userId, @RequestParam String objectId) {
        String key = "like:" + objectId;
        long result = redisTemplate.opsForSet().remove(key, userId);
        return result > 0 ? "取消点赞" : "未进行点赞";
    }

    @GetMapping("/count")
    public long countLike(@RequestParam String objectId) {
        String key = "like:" + objectId;
        return redisTemplate.opsForSet().size(key);
    }
}

收藏功能实现

下面是收藏功能的接口实现代码。

@RestController
@RequestMapping("/favorite")
public class FavoriteController {

    @Autowired
    private RedisTemplate<String, String> redisTemplate;

    @PostMapping("/add")
    public String addFavorite(@RequestParam String userId, @RequestParam String objectId) {
        String key = "favorite:" + userId;
        long result = redisTemplate.opsForSet().add(key, objectId);
        return result > 0 ? "收藏成功" : "不能重复收藏";
    }

    @PostMapping("/delete")
    public String deleteFavorite(@RequestParam String userId, @RequestParam String objectId) {
        String key = "favorite:" + userId;
        long result = redisTemplate.opsForSet().remove(key, objectId);
        return result > 0 ? "取消收藏" : "未进行收藏";
    }

    @GetMapping("/count")
    public long countFavorite(@RequestParam String userId) {
        String key = "favorite:" + userId;
        return redisTemplate.opsForSet().size(key);
    }

    @GetMapping("/list")
    public Set<String> listFavorite(@RequestParam String userId) {
        String key = "favorite:" + userId;
        return redisTemplate.opsForSet().members(key);
    }
}

前端实现

在前端中，我们使用Vue.js来编写页面，并调用后端提供的接口。下面是点赞、收藏功能的页面实现代码。

点赞功能页面代码

<template>
  <div>
    <button @click="addLike">点赞</button>
    <button @click="deleteLike">取消点赞</button>
    <span>点赞数：{{likeCount}}</span>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Like',
  data () {
    return {
      userId: '123', // 用户id, 从登录状态中取得
      objectId: '1', // 对象id, 从url参数中取得
      likeCount: 0 // 点赞数
    }
  },
  methods: {
    addLike () {
      axios.post('/like/add', {
        userId: this.userId,
        objectId: this.objectId
      })
      .then(response => {
        alert(response.data)
        if (response.data === '点赞成功') {
          this.likeCount++
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    deleteLike () {
      axios.post('/like/delete', {
        userId: this.userId,
        objectId: this.objectId
      })
      .then(response => {
        alert(response.data)
        if (response.data === '取消点赞') {
          this.likeCount--
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    countLike () {
      axios.get('/like/count', {
        params: {
          objectId: this.objectId
        }
      })
      .then(response => {
        this.likeCount = response.data
      })
      .catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.countLike()
  }
}
</script>

收藏功能页面代码

<template>
  <div>
    <button @click="addFavorite">收藏</button>
    <button @click="deleteFavorite">取消收藏</button>
    <span>收藏数：{{favoriteCount}}</span>
    <ul>
      <li v-for="item in favoriteList" :key="item">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Favorite',
  data () {
    return {
      userId: '123', // 用户id, 从登录状态中取得
      objectId: '1', // 对象id, 从url参数中取得
      favoriteCount: 0, // 收藏数
      favoriteList: [] // 收藏列表
    }
  },
  methods: {
    addFavorite () {
      axios.post('/favorite/add', {
        userId: this.userId,
        objectId: this.objectId
      })
      .then(response => {
        alert(response.data)
        if (response.data === '收藏成功') {
          this.favoriteCount++
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    deleteFavorite () {
      axios.post('/favorite/delete', {
        userId: this.userId,
        objectId: this.objectId
      })
      .then(response => {
        alert(response.data)
        if (response.data === '取消收藏') {
          this.favoriteCount--
          this.favoriteList = this.favoriteList.filter(item => item !== this.objectId)
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    countFavorite () {
      axios.get('/favorite/count', {
        params: {
          userId: this.userId
        }
      })
      .then(response => {
        this.favoriteCount = response.data
      })
      .catch(error => {
        console.log(error)
      })
    },
    listFavorite () {
      axios.get('/favorite/list', {
        params: {
          userId: this.userId
        }
      })
      .then(response => {
        this.favoriteList = response.data
      })
      .catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.countFavorite()
    this.listFavorite()
  }
}
</script>