使用 Vue.js 进行数据格式化与可视化

介绍

在这个项目中，你将学习如何转换和格式化表格数据，以便以用户友好的方式显示。这是前端开发人员在处理来自后端的数据时经常遇到的常见任务。

👀 预览

🎯 任务

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

• 如何发送 HTTP 请求以从 JSON 文件中获取数据
• 如何格式化数据以匹配所需的显示格式
• 如何使用 Vue.js 和 Element UI 在 HTML 表格中渲染格式化后的数据

🏆 成果

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

• 使用axios发送 HTTP 请求并获取数据
• 操作和转换数据为所需格式
• 集成 Vue.js 和 Element UI 以创建一个响应式且视觉上吸引人的表格组件

设置项目结构

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

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

├── axios.min.js
├── element-ui.css
├── element-ui.js
├── fetchTableData.json
├── index.html
└── vue.js

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

发送请求以获取数据

在这一步中，你将学习如何发送 HTTP 请求，从fetchTableData.json文件中获取数据。

1. 在代码编辑器中打开index.html文件。
2. 在<script>部分，向 Vue 实例的methods中添加一个新的getTableData()方法。
3. 在getTableData()方法内部，使用axios.get()函数向fetchTableData.json文件发送 GET 请求：

methods: {
  getTableData() {
    axios.get("./fetchTableData.json").then((response) => {
      // 待办事项：格式化数据并将其赋给 tableData
    });
  }
}

4. 在 Vue 实例的mounted中调用getTableData函数。

mounted() {
  this.getTableData();
},

格式化数据

在这一步中，你将学习如何将数据格式化为所需格式，并将其赋给tableData属性。

1. 在代码编辑器中打开index.html文件。
2. 在<script>部分，找到 Vue 实例中的getTableData()方法。
3. 在getTableData()函数的then()方法的成功回调函数内部，从响应对象中获取data属性：

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
   });
}

4. 遍历resData数组，并根据要求格式化数据：
   • 对于datetime字段，将格式从YYYYMMDD转换为YYYY-MM-DD。
   • 对于sex字段，将值从1转换为"男"，从0转换为"女"。
   • 对于vip字段，将值从1转换为"是"，从0转换为"否"。

以下是格式化数据的代码：

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      let resData = response.data.data;
      resData.forEach((item) => {
         item.datetime = `${item.datetime.substring(0, 4)}-${item.datetime.substring(4, 6)}-${item.datetime.substring(6)}`;
         item.sex = item.sex? "男" : "女";
         item.vip = item.vip? "是" : "否";
      });
   });
}

5. 格式化数据后，将resData数组赋给tableData属性：

getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

现在，数据已格式化并赋给tableData属性，该属性将用于在 HTML 中渲染表格。

最终效果如下：

总结

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