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

這篇文章主要介紹了怎么用Springboot+Vue+axios實現(xiàn)文章收藏功能的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么用Springboot+Vue+axios實現(xià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" >
   <el-button @click="addCollection" v-if="collectionState===false" type="text" >
      <el-icon  color="#999aaa"><StarFilled /></el-icon>
       {{collectionCount }}
          </el-button>
          <el-button @click="delCollection" v-if="collectionState===true" type="text" >
            <el-icon  color="#999aaa"><StarFilled /></el-icon>
            {{collectionCount }}
          </el-button>
          <el-button type="text" @click="" >
            <el-icon  color="#999aaa"> <ChatDotRound /></el-icon>
            {{ messageCount }}
  </el-button>
</div>

Js部分

 data(){
    return{
    collectionIds:{},
    collectionState:false,//默認(rèn)是false則是可收藏，true的話就是已收藏
    }
    },
    methods:{
    add(){
      this.collectionIds.idBlog=this.$route.query.id //當(dāng)前文章ID
      this.collectionIds.idUser=this.user.id //當(dāng)前用戶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)

已收藏狀態(tài)

補充：request是axios封裝的一個工具，大家也可以使用原axios進行對后臺接口調(diào)用

關(guān)于“怎么用Springboot+Vue+axios實現(xiàn)文章收藏功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么用Springboot+Vue+axios實現(xiàn)文章收藏功能”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。