大屏監控系統實戰（8）-前端請求後端獲取數據並顯示

一、概述

前面我們已經發布了接口，並進行了測試，一切正常後，接下來我們寫前端工程。在如何將SpringBoot+Vue前後端分離項目一次打包爲一個Jar包運行？這篇中，我們已經將前後端項目都導入到IDEA中了，所以目前我們的前端項目結構是這樣的。用紅框標註的就是我們要動的一個組件。不要問我是怎麼知道要改這個組件的，我不會告訴你，是我打開那個demo頁面，然後通過搜索關鍵字找到的。

二、digitalFlop.vue頁面分析

打開digitalFlop.vue頁面，可以看到目前頁面是靜態的，一起來分析下，注意，這些都很重要，因爲將來你上手的時候，很可能代碼也不是你寫的，你需要對別人的代碼需要進行分析，然後動點手腳改成自己的 ，這也是比較難的地方。

數據部分代碼：

  data () {
    return {
      digitalFlopData: []
    }
  }

createData方法，主要是對digitalFlopData變量進行賦值：

    this.digitalFlopData = [
        {
          title: '管養