七台河北京网站建设深圳网页设计公司建设

前言

点赞、收藏功能作为常见的社交功能，是众多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: localhostport: 6379

点赞功能实现

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

@RestController
@RequestMapping("/like")
public class LikeController {@Autowiredprivate 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 {@Autowiredprivate 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实现点赞、收藏功能，并提供了相关的前后端页面代码示例，希望能对您有所帮助。如果您有任何问题或建议，请在评论中留言，谢谢！