使用 Vue.js 动态显示主页数据

介绍

在这个项目中，你将学习如何使用 Vue.js 动态显示主页数据。这个项目旨在帮助你理解从 JSON 文件中获取数据并在 Vue.js 组件中渲染它的过程。

👀 预览

Vuejs 主页预览

🎯 任务

在这个项目中，你将学习：

如何通过 Axios 请求主页文章列表数据并将其绑定到List.vue组件。
如何实现主页的布局样式和效果以匹配提供的设计。

🏆 成果

完成这个项目后，你将能够：

使用 Axios 从 JSON 文件中获取数据。
将获取到的数据绑定到 Vue.js 组件并在模板中渲染它。
对组件进行样式设置以匹配特定设计。
集成不同的 Vue.js 组件以创建一个完整的主页。

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── 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

其中：

components/List.vue 是本次挑战要添加的文章列表组件。
public/static/data/list.json 是获取文章列表的数据文件。
public/static/images 是用于文章列表的图像文件。

接下来，在终端中使用 npm install 命令下载依赖项，等待依赖项下载完成后，使用 npm run serve 命令启动项目。

项目成功启动后，点击“Web 8080”在浏览器中进行预览。页面的运行效果如下所示。

图像描述

完成列表显示功能

在这一步中，你将学习如何通过 axios 请求主页文章列表数据并将其绑定到List.vue组件。

打开位于src/components文件夹中的List.vue文件。
在<script>标签下导入axios库：

// TODO
import axios from "axios";

在data()函数中，定义一个dataList属性来存储列表数据：

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

在created()生命周期钩子中，调用getList()方法来获取列表数据：

created() {
  this.getList();
}

实现getList()方法，从public/static/data/list.json文件中获取数据：

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

<script>标签内的完整代码如下：

<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>

在模板中，使用v-for指令来渲染列表项：

<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>

这一步确保了主页文章列表数据从public/static/data/list.json文件中获取并绑定到List.vue组件。

通过遵循这些步骤，你已经完成了主页数据的动态化，包括从public/static/data/list.json文件中获取数据并以所需的布局渲染列表项。

完成后的效果如下：

完成后的效果