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

JavaScriptJavaScriptBeginner
立即练习

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

简介

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

👀 预览

最终格式化表格预览

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/array_methods -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} javascript/obj_manip -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} javascript/async_prog -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} javascript/dom_select -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} javascript/dom_manip -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} javascript/http_req -.-> lab-445634{{"`使用Vue.js进行数据格式化与可视化`"}} end

设置项目结构

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

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

├── 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
    });
  }
}
  1. 在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;
   });
}
  1. 遍历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? "是" : "否";
      });
   });
}
  1. 格式化数据后,将resData数组赋给tableData属性:
getTableData() {
   axios.get("./fetchTableData.json").then((response) => {
      //...
      this.tableData = resData;
   });
}

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

最终效果如下:

格式化数据
✨ 查看解决方案并练习

总结

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

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