后端模拟数据，前端调用

数据走向

关于接口的路径

各个层和前后端能够连接就是依据路径，下面举例说明：

1、前端发送请求：（相应代码在nsxl的大屏代码中）

按照数据走向，接下来就会去相应的js文件中寻找相应的路径，路径会告诉请求接下来要去哪里

2、在相应的js文件中寻找路径

js文件：
点击进入

这个url路径指明了相应的后端位置

3、进入后端

① 首先进入Controller层

标记为 “ 1 ” “ 4 ” 的地方和js文件中的路径对应，其他的标记和service层对应

② 进入Service层

service层有两个类，注意类的文件从属关系，数据在ServiceImpl中模拟

③ 模拟数据

a、参照前端的数据写出想要的DTO

例如我前端对应的数据是
即为一个String，一个int，那我的DTO就可以写成里面的对象是String和int类型的，注意要写成private，然后再写get和set，写在相应的dto层：

这里不用每个人都建文件夹，因为相同类型的数据类型都是可以复用一个dto的，避免重复，对应代码：

b、Service开始模拟数据（注意是写在Impl后缀的类里）

模拟出我想要的数据
【PS】规范的return是不能返回字符串的，要返回一个对象

c、写Service

就是它！

对应的写上去就行了

数据调用

后端的工作已经完成，接下来要从前端把后端的东西调用进来

1、导入对应的接口

在js中写的接口要在大屏代码里导入，才能使用

brljtw是在js中写的接口名，后面的from中的路径要一直写到对应js文件的文件名，而不是所属文件夹的名

2、在方法中写调用函数

这是在向后端发出请求，然后抓捕数据

3、绑数据

现在数据已经在前端了，如果要传入组件，在组件上用v-mode绑定就可以了

4、G2图表的数据传输

如果获取的数据只是用于显示出来，那么到第三步就可以结束了。但是如果这个数据是给G2图表用的话，因为G2图标涉及数据的更新和更新数据后要重新绘制渲染图表，所以不能单纯绑定就结束

a、绑定之后在G2组件中添加更新函数

以我的某个条形图组件为例
按住control点击就可以进入组件，在方法中添加change函数：

其中 this.zsdqyl 是对应的接收的数据，依据自己的数据而定。这个数据就是在 initChart ( ) 里绑定的那个数据：

b、标识ref

ref用于调用子组件中的方法，也就是说，获取数据的函数在大屏里，而更新数据的方法在子组件里，通过ref可以从大屏函数中触发子组件的更新方法。

由于JavaScript是单线程，所以可能出现我们的数据还没获取完，而图已经开始渲染了，所以我们要等数据完全获取完了再画图，我们可以在更新函数上加延时，给获取数据充分的时间

在组件上写ref：

在获取数据的地方加延时：

5、调用函数

获取数据的函数已经写好，接下来是调用函数，宁师小鹿的设计稿右上角是有时间按钮的，不同时间按钮获取不同数据，其他的大屏没有，你们可以先把触发函数写在mouted里，即一进入大屏就调用这个函数，获取相应的后端数据

注意要在前面加this

调试方法

在写的过程中可能会出现各种问题，可以在console和network上进行调试，在上面可以看到数据有没有进入前端

按f12，打开network

左下角是抓到前端的数据

右边是200表示你的接口路径是通的

点击Response可以看到捕捉的数据的内容

这个数据是在Service层模拟的数据，就是被抓到前端的数据，如果没有，说明数据没有进入前端