Springboot+Vue+axios實現(xiàn)文章收藏功能

更新時間：2022年08月31日 09:38:11 作者：小黑ya_

這篇文章主要為大家詳細介紹了Springboot+Vue+axios實現(xiàn)文章收藏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在做畢設(shè)，也是第一次使用前后分離框架我就邊學(xué)邊用springboot+vue做了一個博客文章的收藏功能，寫得不好見諒，算是一個學(xué)習(xí)筆記吧，給大家分享一下，后面可能還會做一個關(guān)注/粉絲的模塊。

那就進入正題：

咱們就先從數(shù)據(jù)庫出發(fā)

id_blog主要就是關(guān)聯(lián)對應(yīng)的文章，id_user就是是誰對這個文章收藏了，這樣后續(xù)利于用戶查詢自己收藏的文章列表，create_time可以加上添加時間，這個字段后續(xù)可進行按照時間排序。

數(shù)據(jù)庫創(chuàng)建好后，就寫實體類

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
public class BlogCollection implements Serializable {

? ? private static final long serialVersionUID = 1L;

? ? @TableId(value = "id", type = IdType.AUTO)
? ? private Integer id;

? ? private Integer idBlog;

? ? private Integer idUser;

? ? @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
? ? @TableField(fill = FieldFill.INSERT)
? ? private LocalDateTime createTime;
}

Mapper

public interface BlogCollectionMapper extends BaseMapper<BlogCollection> {
? ? @Insert("insert into 表名 ?values(字段名)")
? ? void addCollection(BlogCollection bc);
? ? //可以用mybatisPlus插入數(shù)據(jù)方便
}

Service

public interface BlogCollectionService extends IService<BlogCollection> {
? ? void addCollection(BlogCollection bc);
}

serviceImpl

public class BlogCollectionServiceImpl extends ServiceImpl<BlogCollectionMapper, BlogCollection> implements BlogCollectionService {

? ? @Autowired
? ? BlogCollectionMapper blogCollectionMapper;
? ? @Override
? ? public void addCollection(BlogCollection bc) {
? ? ? ? blogCollectionMapper.addCollection(bc);
? ? }
}

Controller

@RestController
@RequestMapping("/BlogCollection")
public class BlogCollectionController {
? ? @Resource
? ? BlogCollectionService blogCollectionService;
? ? @Resource
? ?BlogCollectionMapper BlogCollectionMapper;
?? ?//收藏
? ? @PostMapping("/addBlogCollection")
? ? public Result<?> addBlog(@RequestBody BlogCollection blogCollection) {
? ? ? ? blogCollectionService.addCollection(blogCollection);
? ? ? ? return Result.success();
? ? }
}

以上就是添加收藏的部分代碼，然后就是寫前端調(diào)用及渲染到頁面上

<div class="button_content" style="flex: 1;line-height: 60px">
? ?<el-button @click="addCollection" v-if="collectionState===false" type="text" style="margin-left: 30px">
? ? ? <el-icon style="font-size:20px" color="#999aaa"><StarFilled /></el-icon>
? ? ?  {{collectionCount }}
? ? ? ? ? </el-button>
? ? ? ? ? <el-button @click="delCollection" v-if="collectionState===true" type="text" style="margin-left: 30px">
? ? ? ? ? ? <el-icon style="font-size:20px" color="#999aaa"><StarFilled /></el-icon>
? ? ? ? ? ? {{collectionCount }}
? ? ? ? ? </el-button>
? ? ? ? ? <el-button type="text" @click="" style="margin-left: 30px">
? ? ? ? ? ? <el-icon style="font-size:20px" color="#999aaa"> <ChatDotRound /></el-icon>
? ? ? ? ? ? {{ messageCount }}
? </el-button>
</div>

Js部分

?data(){
? ? return{
? ? collectionIds:{},
? ? collectionState:false,//默認是false則是可收藏，true的話就是已收藏
? ? }
? ? },
? ? methods:{
? ? add(){
? ? ? this.collectionIds.idBlog=this.$route.query.id //當前文章ID
? ? ? this.collectionIds.idUser=this.user.id //當前用戶ID
? ? request.post("/BlogCollection/addBlogCollection",this.collectionIds).then(res=>{
? ? ? ? if (res.code === '0') {
? ? ? ? ? this.$message({
? ? ? ? ? ? message: "收藏成功",
? ? ? ? ? ? type: "success"
? ? ? ? ? });
? ? ? ? ? this.collectionState=true
? ? ? ? ? console.log(this.collectionState)
? ? ? ? } else {
? ? ? ? ? this.$message({
? ? ? ? ? ? message: res.msg,
? ? ? ? ? ? type: "error"
? ? ? ? ? });
? ? ? ? }
? ? ? })
?? ?}
? ? }

在頁面加載時獲取該用戶判斷是否收藏該文章

getState(){
? ? ? let userJson=sessionStorage.getItem("user")
? ? ? let userid=JSON.parse(userJson).id
? ? ? request.get("/user/getState/"+userid).then(res=>{
? ? ? ? if(res.data!=null){?? ??? ?//從表中查詢是否有記錄，不為空把collectionState設(shè)置true
? ? ? ? ? this.collectionState=true
? ? ? ? }
? ? ? ? if(res.data.length){ ?//獲取結(jié)果集如果存在則把collectionState設(shè)置true,防止重復(fù)收藏
? ? ? ? ? this.collectionState=true
? ? ? ? }
? ? ? })
? ? },

獲取用戶收藏狀態(tài)需要在頁面加載時調(diào)用，需要在created里進行調(diào)用，其次就是取消收藏功能也是跟這個邏輯一樣的，在點擊取消收藏后將collectionState設(shè)置為false即可，后臺的話就通過用戶id對收藏表查詢刪除就可以啦！奉上效果圖：

未收藏狀態(tài)