文章目录
- 数据走向
- 关于接口的路径
- 1、前端发送请求：（相应代码在nsxl的大屏代码中）
- 2、在相应的js文件中寻找路径
- 3、进入后端
- ① 首先进入Controller层
- ② 进入Service层
- ③ 模拟数据
- a、参照前端的数据写出想要的DTO
- b、Service开始模拟数据（注意是写在Impl后缀的类里）
- c、写Service
- 数据调用
- 1、导入对应的接口
- 2、在方法中写调用函数
- 3、绑数据
- 4、G2图表的数据传输
- a、绑定之后在G2组件中添加更新函数
- b、标识ref
- 5、调用函数
- 调试方法
数据走向
关于接口的路径
各个层和前后端能够连接就是依据路径，下面举例说明：
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层模拟的数据，就是被抓到前端的数据，如果没有，说明数据没有进入前端
