七台河北京网站建设,专业网站模仿,无忧网站建设多少钱,谷歌seo 外贸建站前言
点赞、收藏功能作为常见的社交功能#xff0c;是众多Web应用中必不可少的功能之一。而redis作为一个基于内存的高性能key-value存储数据库#xff0c;可以用来实现这些功能。
本文将介绍如何使用spring boot整合redis实现点赞、收藏功能#xff0c;并提供前后端页面的…前言
点赞、收藏功能作为常见的社交功能是众多Web应用中必不可少的功能之一。而redis作为一个基于内存的高性能key-value存储数据库可以用来实现这些功能。
本文将介绍如何使用spring boot整合redis实现点赞、收藏功能并提供前后端页面的编写代码。
准备工作
在开始之前您需要进行以下准备工作
安装JDK安装Redis并启动Redis服务安装Node.js和Vue.js以便我们能够开发前端页面
后端实现
在后端中我们需要使用spring boot来整合redis并进行相关的接口设计和实现。下面是实现点赞和收藏的核心代码。
相关依赖
首先在pom.xml文件中添加redis相关依赖。
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactId
/dependency
dependencygroupIdorg.apache.commons/groupIdartifactIdcommons-pool2/artifactIdversion2.10.0/version
/dependencyRedis配置
接下来我们需要配置Redis连接信息可以在application.yml中进行配置。
spring:redis:host: localhostport: 6379点赞功能实现
下面是点赞功能的接口实现代码。
RestController
RequestMapping(/like)
public class LikeController {Autowiredprivate RedisTemplateString, 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 RedisTemplateString, 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 SetString listFavorite(RequestParam String userId) {String key favorite: userId;return redisTemplate.opsForSet().members(key);}
}前端实现
在前端中我们使用Vue.js来编写页面并调用后端提供的接口。下面是点赞、收藏功能的页面实现代码。
点赞
点赞功能页面代码
templatedivbutton clickaddLike点赞/buttonbutton clickdeleteLike取消点赞/buttonspan点赞数{{likeCount}}/span/div
/templatescript
import axios from axiosexport 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收藏
收藏功能页面代码
templatedivbutton clickaddFavorite收藏/buttonbutton clickdeleteFavorite取消收藏/buttonspan收藏数{{favoriteCount}}/spanulli v-foritem in favoriteList :keyitem{{item}}/li/ul/div
/templatescript
import axios from axiosexport 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实现点赞、收藏功能并提供了相关的前后端页面代码示例希望能对您有所帮助。如果您有任何问题或建议请在评论中留言谢谢
