“This is the 18th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Hello, everyone. After more than ten days of sharing, we have completed the function realization of the sign-in calendar page and lottery page. And our home page is still a blank, just by a sign-in button (upper right corner of the home page) to expand out so many pages and functions, suddenly found that our actual combat project has a long way to go, but not how far the pipeline, as long as we go step by step will be able to reach the end. Well, without further ado, we will continue to share more today. It said that the home page is still blank without content, from today on slowly a little bit to achieve our home page function. This sharing will achieve the following functions:

  • Home recommendation tag – Hot list articles
  • Home recommendation tag – Hot list author

Official Sample diagram

Hot list of articles

When you open the official rare-earth mining app, you will first enter the recommendation list on the home page, which contains two parts: hot list and article list. Hot list is divided into hot list articles and hot list authors. From this point, we can see that the recommendation in the official app is not quite the same as the recommendation in the official Web page. But it’s pretty much the same when it comes to the back-end interface. For convenience, we still use the WEB API interface to request data.

  • Use Chrome to open the Nuggets website on the Web and switch F12 to Network
  • Select “comprehensive” = > “hot list”, this is in the network will find there is a call recommend_all_feed request, this is our jiangy used the back-end request data interface

The diagram below:

It should be noted that we only need TOP3 data in the recommended hot list, so when passing the limit parameter, it is ok to pass 3, but there is another problem: Sometimes there will be official nuggets ads based on the data retrieved from the interface above, and they will appear in the first one, so we need to consider excluding the ads, so we need to exclude the data of item_type = 14 (i.e. advertising data) in the front end.

With the data, we can copy the official APP to achieve our own hot list of articles function

  • First of all, hot list articles and hot list authors are like a wheel map, you can toggle back and forth, we went to vant official drag a wheel component van-Swipe
  • Add two van-swipe-item children to this rotation component to be used as containers for hot list articles and hot list authors, respectively
  • Then add the following contents to the round seeding sub-items respectively
    • The first line shows the “hot list” title and the “Articles” tag (using vant’s official Van-Tag component)
    • Next, show the top3 articles, including top1-3 serial color, title and popularity of articles (page views).
    • Use the V-for command to loop hotArticles to display 3 popular articles
  • Define the reactive property hotArticles in the setup method to hold the requested hot list data
  • Request the backend wrapped API and store the returned result in the responsive property hotArticles

The core code and renderings are as follows:

<van-swipe-item>
  <div class="article-container">
    <div class="hot-bang">
      <van-icon name="fire-o" color="#ee0a24" />Hot list</div>
    <div class="hot-tag">
      <van-tag type="primary" round>The article</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}} Heat</div>
  </div>
</van-swipe-item>
Copy the code
//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()
})
Copy the code
//Home.vue setup
 api.recommendAllFeed(3.3).then((res) = > {
      state.hotArticles = res.data.filter((item) = > item.item_type === 2);
    });
Copy the code

Hot list of authors

In the previous step, we have implemented the display of top3 hot list articles, and then add top2 hot list authors in another round item. Or open the official web page, there will be a “author list” section in the right part, so we can start from here to analyze the interface, and then take out the top two authors as our hot list of authors.Different from the hot list article, the hot list author presents the content in the form of cards. At the beginning of implementation, the card commodity card component in the Vant component library was used, but later found that the effect was not very good, and the style adjustment was very tedious. It was better to implement one by ourselves. So we implemented a simple card presentation component with van-Image and div

  • Copy the “hot list” title and the “article” van-tag directly from the first line of the hot list article, and change the “article” to “author”.
  • We then use a van-Image component and two div elements to display the author’s avatar and nickname, respectively
  • Define a reactive property, hotAuthors, in the setup method to hold the data returned by the back end
  • Request the wrapped backend API to get the author list, pass the limit parameter 2, and save the result in hotAuthors
  • The author information is displayed using the v-for instruction loop responsive attribute hotAuthors

Core code and renderings

<van-swipe-item>
  <div class="article-container">
    <div class="hot-bang">
      <van-icon name="fire-o" color="#ee0a24" />Hot list</div>
    <div class="hot-tag">
      <van-tag type="success" round>The author</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>
Copy the code
// 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()
})
Copy the code
//Home.vue setup
 api.recommend(2).then((res) = > {
      state.hotAuthors = res.data;
    });
Copy the code

conclusion

In this sharing, we used the Van-Swipe component to implement the hot list feature on the home page. From a technical point of view, there are no technical difficulties, but there are almost no ready-made UI components available, so we have to assemble them ourselves, which takes some time to adjust the style. The next share will continue to implement the feature of the recommended article list on the home page. This time to share here, welcome to click a like to close a note oh!