文章详情页

最新推荐文章于 2024-07-18 19:54:29 发布

红女子

最新推荐文章于 2024-07-18 19:54:29 发布

阅读量268

点赞数

分类专栏： vue新闻头条项目文章标签：前端 javascript

本文链接：https://blog.csdn.net/hongzxh/article/details/126512604

版权

vue新闻头条项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

铺设数据

1、发送网络请求

首先查看接口文档要求：

在这里插入图片描述

根据要求发送请求：

2、我们在页面创建初期就使用

在这里插入图片描述
然后定义一个变量（onDetails）来保存我们后台返回给我们的数据

3、铺设数据

在这里插入图片描述

发布时间我们用封装好的处理时间的方法（改成多久之前）

关注/取消关注

1、关注/已关注的显示隐藏

在我们请求文章详情接口时，后台会返回一个is_followed，代表是否关注作者，我们可以用他来作为v-if判断的条件
在这里插入图片描述

（1）接口信息

在这里插入图片描述

（2）绑定一个点击事件

在这里插入图片描述
让后台数据更新我们的点击关注/取关

async onFollow(boolean) {
      // this.onDetails.is_followed = !this.onDetails.is_followed;
      // 在已关注上面点击，变成+关注（取关的操作）
      if (boolean === true) {
        this.onDetails.is_followed = false;
        const res=await deFollowAPI({
          target:this.onDetails.aut_id
        })
      } else {
        //在+关注上面点击，变成已关注（关注的操作）
        this.onDetails.is_followed = true;
          const res=await getFollowAPI({
          target:this.onDetails.aut_id
        })
      }
    },

2、点赞/已点赞的显示隐藏

在这里插入图片描述

（1）先实现前端页面的点击切换效果

绑定一个点击事件onLike：

<!-- 点赞 -->
    <div>
      <!-- attitude用户对文章的态度, -1: 无态度，0-不喜欢，1-点赞 -->
      <div class="good img active-good" v-if="onDetails.attitude === 1" @click="onLike(true)">
        <img src="../../assets/已点赞.svg" alt="" />
        <span>已点赞</span>
      </div>
      <div class="good img" v-else @click="onLike(false)">
        <img src="../../assets/点赞.svg" alt="" />
        <span>点赞</span>
      </div>
    </div>

写方法

    // 点赞/已点赞
    onLike(boolean){
      // 判断用户点在哪里，true就是点在已点赞身上
      if(boolean===true){
        // 取消点赞，展示点赞的图标
        this.onDetails.attitude=0
      }else{
        // 展示已点赞的图标
        this.onDetails.attitude=1
      }
    }

（2）找接口文档

在这里插入图片描述

发送请求

/**点赞 */
export const getLikingsAPI=({target})=>{
  return axios({
    url:'/v1_0/article/likings',
    method:'POST',
    data:{
      target
    }
  })
}
/**取消点赞 */
export const disLikingsAPI=({target})=>{
  return axios({
    url:`/v1_0/article/likings/${target}`,
    method:'DELETE',
  })
}

代码实现：让我们的点击事件保存到数据库中

    // 点赞/已点赞
    async onLike(boolean) {
      // 判断用户点在哪里，true就是点在已点赞身上
      if (boolean === true) {
        // 取消点赞，展示点赞的图标(取消点赞)
        this.onDetails.attitude = 0;//-1是无态度，我们这里用0
        const res = await disLikingsAPI({
          target: this.onDetails.art_id,
        });
      } else {
        // 展示已点赞的图标（点赞）
        this.onDetails.attitude = 1;
        const res = await getLikingsAPI({
          target: this.onDetails.art_id,
        });
      }
    },