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

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

前言

大家好，上一篇文章发现首页分享中，我们对发现页整体布局进行了分析梳理，并根据官方的页面布局实现了一个静态的发现页，那么今天我们将继续分析和梳理发现页面相关的后台api接口实现数据的动态绑定和渲染。

搜索模块

上一篇文章中我们用div盒子模拟了个简单的搜索框，并不能实现真正的搜索功能，而在官方app也是如此，该搜索并非真正的搜索，而是点击后跳转到一个新的搜索页面，并在该页面中实现真正的搜索功能。那么我们本次的分享先实现点击搜索框跳转到新页面，具体的搜索功能暂不实现。 记得在之前的分享中我们好像已经添加了一个搜索页面search.vue了，那我们直接使用就可以了。

<div class="search-box" @click="toSearch">
...
</div>

const router = useRouter();
const toSearch = ()=>{
    router.push('/search')
}

轮播图

这个轮播图实际就是两个广告位，我们可以通过chrome在掘金web版首页中分析出获取广告数据对应的后台接口：“content_api/v1/advert/query_adverts”，其中该接口返回的数据中包括广告图片的URL地址以及点击广告图片后要跳转的页面链接地址。我们只需要在昨天的基础上给轮播图绑定上真正的图片地址，并添加一个超链接实现广告跳转即可。

<div class="swiper-box">
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="ad in advList" :key="ad.advert_id">
      <a :href="ad.url"> <img :src="ad.picture" /></a>
    </van-swipe-item>
  </van-swipe>
</div>

api.queryAdverts().then((res) => {
  state.advList = res.data;
});

分类模块

分类模块共包含四个类别：招聘、话题、字学和活动，它们的行为都是点击后跳转的对应的新页面。其中只有话题和活动在web版中能找到对应的接口，而招聘和字学在web中暂时没有找到，因此我们的分享中只实现话题和活动两个页面的跳转，并且跳转后的新页面的数据渲染暂时也先不实现，这里仅实现跳转即可。

 <div class="category-item" @click="toTopic">
   ...
   <span>话题</span>
  </div>
   <div class="category-item" @click="toActivity">
    ...
    <span>活动</span>
  </div>

const toTopic = () => {
  router.push("/topic");
 };
const toActivity = () => {
  router.push("/activity");
};

文章作者榜

关于文章榜和作者榜同样也是一个页面跳转功能。在web版的首页中同样有个作者榜，我们可以利用该接口获取对应的作者数据并把作者的头像信息展示在作者榜的头像区。而至于文章榜即使有对应接口能够获取到热榜文章，但由于文章没有像作者一样头像，因此我们也无法将文章图片显示在文章榜的图片区，因此文章榜我们依然保持静态就好，只需给其添加一个跳转超链接即可。

<div class="author-bang">
    <div class="bang-title">
      <span class="title">作者榜</span>
      <span class="sub-title">每日更新</span>
    </div>
    <div class="bang-img" @click="toAuthorList">
      <van-image
        v-for="item in authorList"
        :key="item.user_id"
        :src="item.avatar_large"
        round
      ></van-image>
    </div>
</div>

api.recommend(3, "", "0").then((res) => {
  state.authorList = res.data;
  console.log(res.data);
});
const toAuthorList = () => {
  router.push("/authorlist");
};
const toArticleList = () => {
  router.push("/articlelist");
};

推荐技术团队

关于推荐技术团队同样没有找到对应的接口，只找到了个人作者榜，因此我们临时先用个人作者榜代替一下，最终要实现的功能都是一样的。通过调用后台recommen接口获取到数据后将数据渲染到页面推荐技术团队处，并给每个团队头像添加click事件，点击后跳转到作者主页

<div class="recommend-box">
  <div class="title-box">
    <span class="title">推荐技术团队</span>
    <span class="all-team" @click="toAuthorList">全部技术团队></span>
  </div>
  <div class="team-box">
    <div
      class="team"
      v-for="item in teamList"
      :key="item.user_id"
      @click="toAuthorHome(item.user_id)"
    >
      <van-image :src="item.avatar_large"></van-image>
    </div>
  </div>
</div>

api.recommend(5, "", "0").then((res) => {
  state.teamList = res.data;
});
const toAuthorHome = (uid) => {
  router.push(`/authorhome/${uid}`);
};

热门文章

热门文章这里不多说了，直接把之前封装好的JList.vue导入进来直接使用即可。

 <div class="hot-articles-box">
  <div class="hot-bang">
    <van-icon name="fire-o" color="#ee0a24" />热门文章
  </div>
  <j-list url="/juejin/recommend_all_feed" :limit="20" :sort_type="200" />
</div>
</div>

总结

今天的分享中我们在昨天的基础上实现了发现页面的数据动态渲染以及相关页面的跳转。但是 由于还有一些接口在web版中分析不到，导致我们不得不暂时先放弃部分功能。后续如果有机会再继续研究，今天的分享就到这里了。