主页数据动态化

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

Vuejs主页预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-445739{{"`主页数据动态化`"}} html/head_elems -.-> lab-445739{{"`主页数据动态化`"}} html/layout -.-> lab-445739{{"`主页数据动态化`"}} html/multimedia -.-> lab-445739{{"`主页数据动态化`"}} html/inter_elems -.-> lab-445739{{"`主页数据动态化`"}} end

设置项目结构

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

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

├── 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组件。

  1. 打开位于src/components文件夹中的List.vue文件。
  2. <script>标签下导入axios库:
// TODO
import axios from "axios";
  1. data()函数中,定义一个dataList属性来存储列表数据:
data() {
  return {
    dataList: []
  };
}
  1. created()生命周期钩子中,调用getList()方法来获取列表数据:
created() {
  this.getList();
}
  1. 实现getList()方法,从public/static/data/list.json文件中获取数据:
methods: {
  getList() {
    axios.get("./static/data/list.json").then((res) => {
      this.dataList = res.data.data.listInfo;
    });
  }
}
  1. <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>
  1. 在模板中,使用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文件中获取数据并以所需的布局渲染列表项。

完成后的效果如下:

完成后的效果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 HTML 教程