【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 推荐列表（热榜）

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

前言

大家好，经过十几天的分享我们已经完成了签到日历页面和抽奖页面的功能实现。而我们的首页还依然是空白一片，仅仅由一个签到按钮（首页右上角）就扩展出来这么多页面和功能，突然发现我们的实战项目任重而道远啊，但不管道有多远，只要我们一步一步走下去就一定能够到达终点。好了废话不多说，继续我们今天多分享。上面说到现在的首页还是空白没有内容的，从今天开始就慢慢一点一点来实现我们的首页功能。本次分享将实现如下功能：

首页推荐标签 - 热榜文章
首页推荐标签 - 热榜作者官方示例图

热榜文章

打开官方稀土掘金app，首先进入的是首页的推荐列表，推荐列表包含来两部分内容：热榜和文章列表。热榜又分为热榜文章和热榜作者。从这一点可以发现官方app中的推荐和官方web网页中的推荐还是不太一样的。但涉及到到后端接口都是大同小异。为了方便我们依然还是借助web端的API接口来请求数据。

用chrome浏览器打开web端掘金官网，并F12切换到network
依次选择“综合” => “热榜”，这是在network中会发现有个叫recommend_all_feed的请求，这个就是我们jiangy奥用到的后端请求数据接口如下图：

需要注意的是，我们的推荐热榜中只需要取TOP3数据，因此在传递limit参数时，传个3就可以了，但还会有另外一个问题：有时候根据上面接口获取到的数据会有掘金官方的广告,并且是出现在第一个，我们得考虑把广告排除掉，因此需要在前端把item_type等于14的数据（也就是广告数据）排除掉。

有了数据以后就可以仿照官方APP的样子来实现我们自己的热榜文章功能了

首先热榜文章和热榜作者类似一个轮播图，可以来回切换，我们到vant官方拽一个轮播组件van-swipe
在该轮播组件中添加两个轮播子项van-swipe-item，分别用于作为热榜文章和热榜作者的容器
然后再在轮播子项中分别添加以下内容
- 第一行显示“热榜”标题和“文章”标签（利用vant官方的van-tag组件）
- 接下来展示top3文章，包括top1-3序号标色，文章标题和文章热度（浏览量）
- 利用v-for指令循环hotArticles将3篇热榜文章输出展示
在setup方法中定义响应式属性hotArticles用于存放请求回来的热榜数据
请求后端封装好的API并将返回的结果保存在响应式属性hotArticles中核心代码及效果图如下：

<van-swipe-item>
  <div class="article-container">
    <div class="hot-bang">
      <van-icon name="fire-o" color="#ee0a24" />热榜
    </div>
    <div class="hot-tag">
      <van-tag type="primary" round>文章</van-tag>
    </div>
  </div>
  <div
    class="article-container"
    v-for="(art, $index) in hotArticles"
    :key="art.item_info.article_id"
  >
    <div class="icon">
      <div :class="'hot' + ($index + 1)">{{ $index + 1 }}</div>
    </div>
    <div class="title">
      {{ art.item_info.article_info.title }}
    </div>
    <div class="hot">
      {{ art.item_info.article_info.view_count }}热度
    </div>
  </div>
</van-swipe-item>

//nodejs server
router.post('/recommend_all_feed', async (ctx, next) => {
    const {
        limit,
        sortType
    } = ctx.request.body;
    const {
        data
    } = await axios({
        url: `${recommandUrl}recommend_all_feed?aid=${aid}&uuid=${uuid}`,
        method: 'post',
        headers: {
            cookie: MY_COOKIE
        },
        data: {
            client_type: 2608,
            cursor: "0",
            id_type: 2,
            limit: limit,
            sort_type: sortType
        }
    });
    ctx.body = data;
    next()
})

//Home.vue setup
 api.recommendAllFeed(3, 3).then((res) => {
      state.hotArticles = res.data.filter((item) => item.item_type === 2);
    });

热榜作者

在上一步中我们已经实现来top3的热榜文章展示，接下来再在另一个轮播子项中添加top2热榜作者。还是打开官方的web网页，会发现在右侧部分会有一个“作者榜”板块，那么我们就可以从这里入手分析出接口，然后取出前2位作者，作为我们的热榜作者。与热榜文章不同的是，热榜作者是以卡片的形式来呈现内容的，刚开始实现时本来用的vant组件库中的card商品卡片组件，但是后来发现效果不是很好，样式调来调去很繁琐还不如自己实现一个，于是就借助van-image和div自己实现了一个简单的卡片展示组件

将热榜文章中的第一行内容“热榜”标题和“文章”标签（van-tag）直接拷贝过来，并将“文章”二字改为“作者”
然后再用一个van-image组件和两个div元素分别来展示作者的头像和昵称等内容
在setup方法中定义一个响应式属性hotAuthors，用于保存后端返回的数据
请求封装好的后端API获取作者榜，limit参数传2，并将结果保存在hotAuthors中
利用v-for指令循环响应式属性hotAuthors将作者信息展示出来核心代码及效果图

<van-swipe-item>
  <div class="article-container">
    <div class="hot-bang">
      <van-icon name="fire-o" color="#ee0a24" />热榜
    </div>
    <div class="hot-tag">
      <van-tag type="success" round>作者</van-tag>
    </div>
  </div>
  <div class="author-container">
    <div
      class="author"
      v-for="aut in hotAuthors"
      :key="aut.user_id"
    >
      <van-image
        round
        width="40px"
        height="40px"
        :src="aut.avatar_large"
      />
      <div class="info">
        <div class="title">{{ aut.user_name }}</div>
        <div class="desc">
          {{ aut.job_title }} @{{ aut.company }}
        </div>
      </div>
    </div>
  </div>
</van-swipe-item>

// nodejs server
router.post('/recommend', async (ctx, next) => {
    const {
        limit
    } = ctx.request.body
    const {
        data
    } = await axios.get(`${userApi}recommend?aid=${aid}&uuid=${uuid}&category_id=&cursor=0&limit=${limit}`, {
        headers: {
            cookie: MY_COOKIE
        }
    });
    ctx.body = data;
    next()
})

//Home.vue setup
 api.recommend(2).then((res) => {
      state.hotAuthors = res.data;
    });

总结

本次分享中我们利用van-swipe组件实现了首页推荐中的热榜功能，从技术角度来看依然没有什么难点，但是UI方面基本没有现成的组件可用，只能靠自己组装需要花费一定的时间去调样式。下一次分享中将继续实现首页推荐中的文章列表功能。本次分享就到这里来，喜欢的欢迎点个赞关个注哦！