大屏监控系统实战（8）-前端请求后端获取数据并显示

一、概述

前面我们已经发布了接口，并进行了测试，一切正常后，接下来我们写前端工程。在如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？这篇中，我们已经将前后端项目都导入到IDEA中了，所以目前我们的前端项目结构是这样的。用红框标注的就是我们要动的一个组件。不要问我是怎么知道要改这个组件的，我不会告诉你，是我打开那个demo页面，然后通过搜索关键字找到的。

二、digitalFlop.vue页面分析

打开digitalFlop.vue页面，可以看到目前页面是静态的，一起来分析下，注意，这些都很重要，因为将来你上手的时候，很可能代码也不是你写的，你需要对别人的代码需要进行分析，然后动点手脚改成自己的 ，这也是比较难的地方。

数据部分代码：

  

   

    

     

    
    

     

        data () {
     
    
   

    

     

    
    

     
    
      return {
     
    
   

    

     

    
    

     
      
      digitalFlopData: []
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        }
     
    
  

createData方法，主要是对digitalFlopData变量进行赋值：

  

   

    

     

    
    

     
    
      this.digitalFlopData = [
     
    
   

    

     

    
    

     

              {
     
    
   

    

     

    
    

     
          
      title: 
      '管养