08-vue移动端项目(文章详情detail（以及它的子组件评论comment，write组件）页面)

最新推荐文章于 2025-03-26 09:41:54 发布

原创最新推荐文章于 2025-03-26 09:41:54 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了如何构建一个动态的博客详情页面，包括创建组件、设置路由、完成静态页面设计，以及实现文章数据渲染、作者关注、点赞、评论等功能。

详情页面

01 - 完成静态页面

创建组件 & 设置路由
设置入口
完成结构 & 样式
- 头部标题
- 文章标题
- 作者信息
- 文章内容
- 点赞 & 不喜欢区域
- 评论区域
  - 将单条评论封装为一个单独的组件
    - 步骤：
      - 1.0 在detail中创建一个文件夹：com
      - 2.0 在 com 添加一个comment.vue 组件
      - 3.0 在 detail 页面中使用这个组件
      - 4.0 完成静态的结构 & 样式
- 评论书写区域
  - 将评论书写区域封装为一个组件
    - 步骤
      - 1.0 在 com 添加一个 write.vue 组件
      - 2.0 在 detail页面中使用这个组件
      - 3.0 完成静态的结构 & 样式

<template>
  <div class="detail">
    <!-- 头部标题 -->
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      :fixed="true"
      class="mytitle"
      title="文章详情"
    />
    <!-- 文章标题 -->
    <h1>{{detail.title}}</h1>
    <!-- 作者信息 -->
    <van-cell>
      <template #title>
        <div class="auth">
          <div class="authImg">
            <img :src="detail.aut_photo" alt />
          </div>
          <div class="authMsg">
            <div class="authName">{{detail.aut_name}}</div>
            <div class="authTime">{{detail.pubdate | filterTime}}</div>
          </div>
          <div class="follow">
            <van-button v-if="detail.is_followed === false" type="info" @click="follow"><van-icon name="plus" />关注</van-button>
            <van-button  v-else  type="info" @click="unfollow">已关注</van-button>
          </div>
        </div>
      </template>
    </van-cell>
    <!-- 文章区域 -->
    <van-cell>
      <template #title>
        <div v-html="detail.content"></div>
     </template>
    </van-cell>
    <!-- 点赞 & 不喜欢 -->
    <div class="btnbox">
      <div class="item">
        <van-button @click="unzan" v-if="detail.attitude === 1" round type="danger" plain> <van-icon name="like" />点赞</van-button>
        <van-button @click="zan" v-if="detail.attitude !== 1" round type="default" plain> <van-icon name="like" />点赞</van-button>
      </div>
      <div class="item">
        <van-button @click="undislike" v-if="detail.attitude === 0" round type="danger" plain><van-icon name="delete" />不喜欢</van-button>
        <van-button @click="dislike" v-if="detail.attitude !== 0" round type="default" plain><van-icon name="delete" />不喜欢</van-button>
      </div>
    </div>
    <!-- 评论区域 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <comment v-for="(item, index) in commentList" :key="index" :item="item"/>
    </van-list>
    <!-- 发布评论输入框 -->
    <write @addNewComment="addNewComment"  />
   </div>
</template>

评论区域是个子组件,
用户输入框也是一个子组件
在这里插入图片描述

02 - 渲染文章数据

步骤：

1.0 打开页面时先根据文章的 id 得到文章的详情
- 请求接口：获取新闻文章详情
2.0 将详情渲染到页面上

03- 关注作者

步骤：

a. 给关注按钮添加一个点击事件
b. 在事件中：
- 得到当前文章作者的 id
- 将 id 提交到服务器，关注作者
  - 请求服务器接口（关注用户）
- 手动将用户的关注状态设置为 true

04 - 取关作者

步骤：

a. 给已关注按钮添加一个点击事件
b. 在事件中：
- 得到当前文章作者的 id
- 将 id 提交到服务器，取消关注作者
  - 请求服务器接口（取消关注用户）
    - url： /user/followings/:target
    - method： DELETE
    - 参数：
      - 路径参数（写在路由上的）
        target：作者的 id
    - 返回数据
- 手动将用户的关注状态设置为 false

05 - 点赞

步骤：

a. 给点赞（默认样式）按钮添加一个点击事件：
b. 在事件中：
- 得到文章的 id
- 将文章 Id 提交到服务器，对文章进行点赞
  - 请求服务器的接口（对文章点赞）
- 手动将文章的态度属性设置为 1

06 - 取消点赞

步骤：

a. 给点赞（红色）按钮添加一个点击事件：
b. 在事件中：
- 得到文章的 id
- 将文章 Id 提交到服务器，对文章进行取消点赞
  - 请求服务器的接口（取消对文章点赞）
- 手动将文章的态度属性设置为 -1

07 - 不喜欢

08- 取消不喜欢

在这里插入图片描述

09- 渲染评论数据

步骤：

a. 在页面上添加一个 list 组件，用来包裹评论信息
b. 在 list 组件的 onload 事件中来请求当前文章对应的评论数据
- 请求服务器接口（获取评论或评论回复）
c. 将数据进行渲染
- 在遍历生成评论数据时，应该将数据替换为 commentList
- 将遍历出来的数据传入到评论组件的内部（父传子）
- 在评论组件内部接收数据
- 在评论组件内部渲染数据
d. 实现上拉加载更多操作
e. 判断数据是否加载完成功能

// 获取评论或者评论的回复：
path: '/app/v1_0/comments'
method: 'GET'
功能：
    1.0 获取评论
    2.0 获取评论的回复
参数：
    type：
        a：获取评论
        c：获取评论的回复
     source：
        功能：（获取评论） 评论所属文章的  id
        功能：（获取评论的回复） 回复所属评论的 id
     offset：偏移量（分页的标识）
     	当请求第一页时，不需要传入 offset
     	当请求从第二页时开始：需要将上一页返回的 last_id 当作 offset 传入，以此来得到下一页的数据
     	如果返回的 last_id 与 end_id 一致，就说明所有的评论数据已经加载完成了
     limit：页容量

10 - 完成添加评论

步骤：

1.0 在 write 组件中的输入框中输入内容
2.0 得到输入框中的内容，将内容提交到服务器
- 请求服务器接口（添加评论或评论回复）
3.0 接收服务器响应的数据（本次添加的评论数据）
4.0 将新的评论数据渲染到页面上
- 问题：
  - 服务器响应的数据是响应到 write 组件中的
  - 渲染数据应该是在 detail 中渲染
  - detail 与 write 之间是父子关系
- 解决：
  - 在 write 中接收到服务器返回的数据之后
  - 将数据从 write 中传入到 detail 组件中
  - 由于是 write 与 detail 是父子关系，可以使用 子传父

path: '/app/v1_0/comments'
method: 'POST'
功能：
     a. 添加评论
     b. 添加评论的回复
参数：
    target：目标 id
       功能：（添加评论）文章的 id
       功能：（添加评论的回复） 回复所属评论的 id
    content: 评论的内容
    art_id：文章 id
       功能：（添加评论）不用传的
       功能：（添加评论的回复） 传入评论所属文章的 id