Dynamization of Homepage Data

Introduction

In this project, you will learn how to dynamically display the homepage data using Vue.js. This project is designed to help you understand the process of fetching data from a JSON file and rendering it in a Vue.js component.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to request the homepage post list data via Axios and bind it to the List.vue component.
• How to implement the layout style and effect of the homepage to match the provided design.

🏆 Achievements

After completing this project, you will be able to:

• Use Axios to fetch data from a JSON file.
• Bind the fetched data to a Vue.js component and render it in the template.
• Style the components to match a specific design.
• Integrate different Vue.js components to create a complete homepage.

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── public
│   ├── static
│   	 ├── data
│   	 	  ├── list.json
│   	 ├── images
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│   	 ├── Header.vue
│   	 ├── List.vue
│   	 ├── Recommend.vue
│   ├── router
│   ├── views
│   	 ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

Among them:

• components/List.vue is the article list component to be added for this challenge.
• public/static/data/list.json is the data file to get the list of articles.
• public/static/images is the image file used for the list of articles.

Next, download the dependencies using the npm install command in the terminal, wait for the dependencies to finish downloading and then start the project using the npm run serve command.

Once the project starts successfully, click on the "Web 8080" to preview it in your browser. The running effect of the page is shown in the following image.

Completion of the List Display Function

In this step, you will learn how to request the homepage post list data via axios and bind it to the List.vue component.

1. Open the List.vue file located in the src/components folder.
2. Import the axios library under <script>:

// TODO
import axios from "axios";

3. In the data() function, define a dataList property to store the list data:

data() {
  return {
    dataList: []
  };
}

4. In the created() lifecycle hook, call the getList() method to fetch the list data:

created() {
  this.getList();
}

5. Implement the getList() method to fetch the data from the public/static/data/list.json file:

methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}

6. The complete code within the <script> is as follows:

<script>
// TODO
import axios from "axios";
export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get("./static/data/list.json").then((res) => {
        this.dataList = res.data.data.listInfo;
      });
    }
  }
};
</script>

7. In the template, use a v-for directive to render the list items:

<template>
  <div class="list">
    <!-- TODO -->
    <div class="list-item" v-for="item in dataList" :key="item.id">
      <img class="list-pic" :src="item.imgUrl" />
      <div class="list-info">
        <p class="title">{{ item.title }}</p>
        <p class="desc">{{ item.desc }}</p>
      </div>
    </div>
  </div>
</template>

This step ensures that the homepage post list data is fetched from the public/static/data/list.json file and bound to the List.vue component.

By following these steps, you have completed the dynamization of the homepage data, including fetching the data from the public/static/data/list.json file and rendering the list items in the desired layout.

The completed effect is as follows:

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.