【终极之战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 个人主页

布局分析

第一件事还是布局分析，如上图所示该页面分为3个模块：个人信息模块、徽章模块和内容模块。其中个人信息模块头像信息，用户名，用户等级，所佩戴的徽章以及关注相关的信息和当前掘力值。这些基本信息在我们之前的分享中基本都已经实现过了，所以这块内容实现起来就很简单了。

徽章模块默认展示当前所获得的徽章数并展示出前三个徽章，点击后跳转到徽章墙页面。

第三个模块内容模块就略显复杂了，从上图我们可以看到这个模块中是一组tab页，包括动态、文章、专栏、沸点、收藏、关注和点赞几个模块。其中除了“动态”模块外其他几个模块展示的都是比较专一的内容，比如文章就显示文章列表数据，专栏就展示的是专栏数据，其他几个也是以此类推。而唯一不同的也是比较复杂的就是“动态”模块，因为这个动态中的内容是包含了后面几个模块中所有内容的。也就是说动态模块中的列表内容既有可能是文章数据也可能是沸点数据等等。因此我们本次分享仅实现一个动态中的功能即可。

数据渲染

• 个人信息/徽章

首先个人信息和徽章两个模块还是使用我们之前分析过的get接口来获取数据，在这个get接口中已经包含了我们想要的个人信息数据和徽章数据。如下图中红框中的obtain_badges就是当前所获取的前5个徽章，以及wear_badges是当前所佩戴的徽章。

 <div class="profile-box">
    <van-image class="avatar" :src="userInfo.avatar_large" round />
    <div class="title-box">
      <span class="title">{
  { userInfo.user_name }}</span>
      <img
        src="