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

雨点打透心脏的1/2处 2023-10-09 20:41 138阅读 0赞

### 前言 ###

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

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

### 准备工作 ###

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

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

### 后端实现 ###

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

#### 相关依赖 ####

首先，在`pom.xml`文件中添加redis相关依赖。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-pool2</artifactId>
        <version>2.10.0</version>
    </dependency>

#### 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>

### 总结 ###

本文介绍了如何使用spring boot整合redis实现点赞、收藏功能，并提供了相关的前后端页面代码示例，希望能对您有所帮助。如果您有任何问题或建议，请在评论中留言，谢谢！