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

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

前言

大家好，在昨天的文章我布局中，我们实现了个人中心的布局分析及设计，但目前所有数据都是静态数据，今天的分享就让数据动起来，实现个人中心页面数据的动态渲染。在整个页面中并不是所有的数据都是动态渲染，而只有个人基本信息模块、快捷菜单中的已签到天数菜单和创作者中心几个模块是涉及到数据的动态渲染的。下面我们来把每个模块分析实现一下。

个人基本信息

个人基本信息这块数据基本都是动态渲染的。首先我们用chrome打开网页版的官方稀土掘金并进入到“我的主页”，在network中会发现有个"user_api/v1/user/get"的接口，这个接口返回的数据就是我们需要的渲染数据，如下图所示，框框圈出来的就是我们需要渲染到页面上用到的字段，其中avatar_large和user_name保存的是用户的头像和昵称，而badges对象则是跟徽章相关的数据，最后就是点赞收藏和关注数，需要注意的是：这几个字段展示的数据不是别人对我的点赞关注和收藏数据，而是我对其他掘友的点赞数、关注数和收藏数，并且这个点赞数是包括对文章及沸点等的点赞总数。数据已经分析出来，下面就直接渲染到页面即可，如下:

<div class="profile-box">
    <div class="basic-info">
      <van-image :src="userInfo.avatar_large" round />
      <div class="content-box">
        <div class="title">
          <span>{{ userInfo.user_name }}</span>
          <img :src="level[userInfo.level]" />
        </div>
        <div class="tag">
          {{ userInfo.badges ? userInfo.badges.obtain_count : 0 }} 徽章>
        </div>
      </div>
      <div class="home-page">个人主页</div>
    </div>
    <div class="other-info">
      <div>
        <div class="digital">
          {{ userInfo.digg_article_count + userInfo.digg_shortmsg_count }}
        </div>
        <div>点赞</div>
      </div>
      <div>
        <div class="digital">{{ userInfo.collect_set_count }}</div>
        <div>收藏</div>
      </div>
      <div>
        <div class="digital">{{ userInfo.followee_count }}</div>
        <div>关注</div>
      </div>
    </div>
  </div>

const state = reactive({
      level: {
        1: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/636691cd590f92898cfcda37357472b8.svg",
        2: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg",
        3: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e108c685147dfe1fb03d4a37257fb417.svg",
        4: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/2c3fafd535a0625b44a5a57f9f536d77.svg",
        5: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f8d51984638784aff27209d38b6cd3bf.svg",
        6: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/74bd93adef7feff4fee26d08c0845b4f.svg",
      },
      userInfo: {},
      cardInfo: {},
      days: 0,
    });

    api.getUserinfo().then((res) => {
      state.userInfo = res.data;
    });

快捷菜单签到天数

在快捷菜单中只有前端天数是动态获取的，其它的都只是个静态链接。而关于签到天数的接口在之前我们做签到分享时已经分析并封装好了（对应的官方接口：“growth_api/v1/get_counts”），这里可以直接拿来使用。

<div class="tags-box">
    <div class="tag-item">
      <div class="icon">
        <van-icon name="checked" size="28" />
      </div>
      <div class="name">
        已签到<span style="color: #1e80ff">{{ days }}天</span>
      </div>
    </div>
    ...
  </div>

 api.getCount().then((res) => {
      state.days = res.data.cont_count;
    });

创作者中心

创作者中心展示的是我的文章的展现数，阅读数和点赞数以及与前一日的增量对比，其中阅读数和点赞数可以直接在上面个人基本信息那个接口中直接获取（对应get_view_count和got_digg_count两个字段）而展现数以及与前一日的增量对比数则需到另外一个接口：“content_api/v1/author_center/data/card”中获取，该接口中返回的数据包含了文章的展现数、阅读数、关注数、点赞数、评论数和收藏数，基本上包含了关于文章统计的所有数据了。

 <div class="creator-center">
    <div class="header">
      <span class="title">创作者中心</span>
      <span class="arrow">
        <van-icon name="arrow" size="14" />
      </span>
    </div>
    <div class="article-box">
      <div class="info-item">
        <div class="title">文章展现数</div>
        <div class="digital">{{ cardInfo.datas.all_article_display.cnt }}</div>
        <div class="yestday">
          较前日<span style="color: #1e80ff">{{
            cardInfo.datas.all_article_display.than_before
          }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">文章阅读数</div>
        <div class="digital">{{ userInfo.got_view_count }}</div>
        <div class="yestday">
          较前日<span style="color: #1e80ff">{{
            cardInfo.datas.all_article_view.than_before
          }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="title">文章点赞数</div>
        <div class="digital">{{ userInfo.got_digg_count }}</div>
        <div class="yestday">
          较前日<span style="color: #1e80ff">{{
            cardInfo.datas.all_article_digg.than_before
          }}</span>
        </div>
      </div>
    </div>
  </div>

 api.card().then((res) => {
      state.cardInfo = res.data;
      console.log(res.data);
    });

总结

本次分享我们对个人中心中所需数据的后台接口进行了分析，并将真实动态数据进行了渲染。通过两个篇幅的分享我们实现了个人中心的布局涉及和数据渲染，那么关于个人中心首页基本功能就全部实现了，下一篇开始实现个人中心相关的扩展功能，即点击各个菜单链接跳转的对应页面的实现。今天的分享就到这里了。