【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点页内容渲染

西瓜watermelon
1,033 阅读3分钟

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」

前言

大家好，昨天的分享中我们实现了沸点首页的简单布局，并放置了一些静态元素占位，接下来我们将基于前面的布局把真实的沸点内容数据填充进去。今天要分享的内容有：

  • 封装发布时间工具类
  • 沸点页面“关注”页签中推荐圈子数据渲染
  • 沸点页面“关注”页签中沸点内容数据渲染

封装发布时间工具类

关于掘金的发布时间，不管是文章列表还是沸点内容，所显示的发布时间都不是具体的日期时间，而是一个转换过的时间段，比如：几分钟前，几天前，几个月前等等，而后台返回给我们的数据中的时间格式大部分都是一个时间戳的格式，因此我们得需要封装一个方法用于将时间戳转换成时间段的格式。具体步骤如下：

  • 先将时间戳格式转换成日期格式
  • 再用当前日期减去上面转换好的内容发布日期，得到的两个日期差是一个毫秒值 diffTime
  • 然后再将该毫秒值进行不同条件的判断并返回相应的时间段格式
    • 将当前毫秒值diffTime转换为秒 如果小于 60 则返回 “刚刚” 表示一分钟内发布的
    • 将当前毫秒值diffTime转换为分 如果小于60 则返回“xx分钟前” 表示一个小时以内发布
    • 将当前毫秒值diffTime转换为时 如果小于24 则返回“xx小时前” 表示在一天以内发布
    • 将当前毫秒值diffTime转换为天 如果小于30 则返回“xx天前” 表示在一个月内发布
    • 将当前毫秒值diffTime转换为月 如果小于12 则返回“xx个月前” 表示在一年内发布
    • 否则就返回 “xx年前” 代码如下：
// src/utils/utils.js
const getLocalTime = function (nS) {
   return new Date(parseInt(nS) * 1000).toString().replace(/:\d{1,2}$/, ' ');
};

export default {
   getLocalTime: getLocalTime,
   getPublishTime(ns) {
       const currentDate = new Date();
       const ctime = new Date(getLocalTime(ns))
       const time = currentDate - ctime;
       const cSencond = time / 1000,
           cMinutes = cSencond / 60,
           cHours = cMinutes / 60,
           cDays = cHours / 24,
           cMonth = cDays / 30,
           cYears = cMonth / 365;
       if (cSencond <= 60) { // 1分钟内
           return '刚刚'
       } else if (cMinutes <= 60) { // 大于1分钟小于1小时
           return `${cMinutes.toFixed(0)}分钟前`
       } else if (cHours <= 24) {
           return `${cHours.toFixed(0)}小时前`
       } else if (cDays <= 30) {
           return `${cDays.toFixed(0)}天前`
       } else if (cMonth <= 12) {
           return `${cMonth.toFixed(0)}个月前`
       } else {
           reutrn `${cYears.toFixed(0)}年前`
       }
   }
}

沸点页面“关注”页签中推荐圈子数据渲染

在昨天的布局中，我们已经把“推荐圈子”模块中的相关样式及页面静态元素写完了，接下来就去官网找下相关后台接口，然后将真实数据渲染出来。

首先推荐的圈子都在同一行中展示，并且第一个元素是固定的“发现更多”图标，点击后跳转到新页面 - 圈子广场页面；然后紧接着则是后台返回给我们的推荐圈子内容，我们只需要通过v-for指令将圈子标题和图标循环渲染出来即可。涉及到的后台接口“list_by_rec”，我们需要在我们自己的nodeserver后台中封装一个方法去请求该接口。这个实现起来比较简单，具体是步骤就不赘述来，直接上代码吧：

<div class="topic">
  <div class="title-box">
    <div class="title">推荐圈子</div>
    <div class="my-topic">我加入的圈子</div>
  </div>
  <div class="topic-box">
    <div class="topic-name">
      <van-image
        src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
      />
      <span>发现更多</span>
    </div>
    <div
      class="topic-name"
      v-for="item in topicList"
      :key="item.topic_id"
    >
      <van-image :src="item.topic.icon" />
      <span>{{ item.topic.title }}</span>
    </div>
  </div>
</div>

const state = reactive({
      topicList: [],
      pinList: [],
    });

    api.listByRec().then((res) => {
      state.topicList = res.data;
    });

test2.gif

沸点页面“关注”页签中沸点内容数据渲染

沸点内容数据的渲染跟推荐圈子类似，只不过是样式布局不同，在沸点内容这一块将包含如下一些信息：

  • 第一行主要展示发布沸点作者的头像，作者昵称以及沸点的发布时间内容（发布时间需根据我们上面封装好的方法进行转换）
  • 第二行则是沸点内容的主体部分，包含文本内容，表情内容以及图片内容等等
  • 第三行是关于该沸点的热评内容，将评论点赞数比较多的评论展示在这里
  • 第四行展示该沸点所属的圈子，以及有哪些人赞过
  • 最后一行展示该沸点的评论数和点赞数 通过对web端沸点内容的接口分析，我们找到如下图所示接口，其中包含作者的基本信息：author_user_info、沸点内容点赞的用户digg_user、沸点热评内容hot_comment、沸点自身内容msg_Info、沸点所属圈子信息topic等内容，我们根据需要将具体内容渲染到页面相应的位置即可。通用具体实现步骤不再赘述，直接上代码： image.png
api.recommendPins("0", 20, 300).then((res) => {
  console.log(res);
  state.pinList = res.data;
});

const publishTime = utils.getPublishTime;

test2.gif

总结

本次分享我们实现来沸点发现页中的推荐圈子数据动态绑定以及沸点内容的动态渲染，并且还封装来两个常用日期格式转换的工具方法，明天将继续分享关于沸点内容中的一些细节处理，今天的分享就到这里了。

avatar
文章
阅读
粉丝