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

preface

Hello everyone, in yesterday’s sharing we implemented the simple layout of the boiling point home page, and placed some static element placeholders. Next we will fill in the real boiling point content data based on the previous layout. Here are some things to share today:

  • Encapsulate the release time utility class
  • Boiling point page “attention” TAB recommended circle data rendering
  • Boiling point page “Attention” TAB boiling point content data rendering

Encapsulate the release time utility class

In terms of nuggets release time, either the article list or the boiling point content, the release time is not a specific date or time, but a converted time period, such as: A few minutes ago, a few days ago, a few months ago, etc., and the time format of the data returned to us in the background is mostly a timestamp format, so we need to encapsulate a method to convert the timestamp to the time period format. The specific steps are as follows:

  • First convert the timestamp format to the date format
  • Subtract the current date from the converted content publication date above, and the two date difference is a millisecond value of diffTime
  • Then the millisecond value is judged by different conditions and the corresponding time period format is returned
    • Converts the current millisecond value of diffTime to second if less than 60 returns “just” meaning published in one minute
    • If the diffTime value is less than 60, “xx minutes ago” is returned, indicating that the diffTime will be published within one hour
    • If the diffTime conversion period is less than 24, the value xx hours ago is returned, indicating that the diffTime will be published within one day
    • Change the current value of diffTime to days. If less than 30, return “xx days ago” indicating that the diffTime will be published within a month
    • Convert the current millisecond value diffTime to month if less than 12 return xx months ago indicating release within a year
    • Otherwise return to “xx years ago”

The code is as follows:

// src/utils/utils.js
const getLocalTime = function (nS) {
   return new Date(parseInt(nS) * 1000).toString().replace(/ : \ d {1, 2} $/.' ');
};

export default {
   getLocalTime: getLocalTime,
   getPublishTime(ns) {
       const currentDate = new Date(a);const ctime = new Date(getLocalTime(ns))
       const time = currentDate - ctime;
       const cSencond = time / 1000,
           cMinutes = cSencond / 60,
           cHours = cMinutes / 60,
           cDays = cHours / 24,
           cMonth = cDays / 30,
           cYears = cMonth / 365;
       if (cSencond <= 60) { // Within 1 minute
           return 'just'
       } else if (cMinutes <= 60) { // Greater than 1 minute and less than 1 hour
           return `${cMinutes.toFixed(0)}Minutes ago `
       } else if (cHours <= 24) {
           return `${cHours.toFixed(0)}Hours before `
       } else if (cDays <= 30) {
           return `${cDays.toFixed(0)}Days ago `
       } else if (cMonth <= 12) {
           return `${cMonth.toFixed(0)}` months ago
       } else {
           reutrn `${cYears.toFixed(0)}Years ago `}}}Copy the code

Boiling point page “attention” TAB recommended circle data rendering

In yesterday’s layout, we have finished writing the relevant styles and static elements of the page in the module of “recommendation circle”. Next, we will go to the official website to find the relevant background interface, and then render the real data.

The first recommended circles are displayed in the same line, and the first element is a fixed “discover more” icon, click to jump to the new page – circle square page; Then we get the recommended circle content back from the background, and we just loop the circle title and icon through the V-for command. With reference to the background interface “list_BY_rec”, we need to encapsulate a method in our own Nodeserver background to request this interface. This implementation is relatively simple, the specific steps will not be described, directly on the code:

<div class="topic">
  <div class="title-box">
    <div class="title">Recommended circle</div>
    <div class="my-topic">The circle I joined</div>
  </div>
  <div class="topic-box">
    <div class="topic-name">
      <van-image
        src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
      />
      <span>Find out more</span>
    </div>
    <div
      class="topic-name"
      v-for="item in topicList"
      :key="item.topic_id"
    >
      <van-image :src="item.topic.icon" />
      <span>{{ item.topic.title }}</span>
    </div>
  </div>
</div>
Copy the code
const state = reactive({
      topicList: [].pinList: [],}); api.listByRec().then((res) = > {
      state.topicList = res.data;
    });
Copy the code

Boiling point page “Attention” TAB boiling point content data rendering

The boiling point content data will be rendered in a similar way to the recommendation circle, but with a different style layout. The boiling point content will contain the following information:

  • The first line mainly shows the avatar of the author who published the boiling point, the author’s nickname and the content of the publishing time of the boiling point (the publishing time needs to be converted according to the method we encapsulated above).
  • The second line is the main part of the boiling point content, including text content, expression content, image content, etc
  • The third line is the hot comments about the boiling point, and the comments with more likes are displayed here
  • The fourth row shows which circle the boiling point belongs to and which people like it
  • The last line shows the number of comments and likes for the boiling point

Through the interface analysis of web boiling point content, we found the interface as shown in the figure below, which contains the author’s basic information: Author_user_info, digg_user, hot_comment, msg_Info, topic and so on. We can render the specific content to the corresponding position of the page according to the needs. General specific implementation steps will not be described, directly on the code:

api.recommendPins("0".20.300).then((res) = > {
  console.log(res);
  state.pinList = res.data;
});

const publishTime = utils.getPublishTime;
Copy the code

conclusion

This time, we realized the dynamic binding of the recommendation circle data in the boiling point discovery page and the dynamic rendering of the boiling point content, and also encapsulated two common date format conversion tools, tomorrow will continue to share some details about the boiling point content processing, today’s share is here.