前两篇说了比较基础的页面跳转和数据获取,这次说一下比较主要的接口调用步骤。

我们获得数据后需要发送请求给后端服务器处理,然后获取对应的返回结果。

现在一个功能需求就是通过选择的日期来获取对应的数据列表,前面我们已经说过了,日期我们是可以通过组件返回的value数组来获取。

那么我们就需要在对应的事件方法中去把这个数据发出去,这里你不需要明白怎么发,因为公用的request包都已经写好,你只需要把数据发送到对应的url即可,这里可以把前端理解为postman。

所以首先你要先想清楚你需要哪些请求,是post还是get,你定义的请求路径是什么,请求方法叫什么。我这里定义了三个get方法,分别是获取全部数据,获取指定时间范围内的数据,获取单条数据

java 如何给前端提供接口 怎么写接口给前端调用_数据库


很清楚的可以看到你需要哪些参数,直接写在方法参数里面就好了,这个就是get请求方法url中的?后面的参数。

java 如何给前端提供接口 怎么写接口给前端调用_字段_02


这里是200因为后端的接口已经调通了,如果后端没有调通,那么这里会报404

由于后端也是自己写的,就简单说一下后端的接口暴露。我这边用的是flask 和blueprint,所以两个地方。

功能方法这里,填好对应的url,在api的初始化py文件中添加对应的注册名称

java 如何给前端提供接口 怎么写接口给前端调用_数据库_03


java 如何给前端提供接口 怎么写接口给前端调用_数据库_04


然后就可以了,后端的代码经常写,所以就不在赘述了。

更新一下,因为要做的是服务器监控结果的展示,结果都是保存在数据库中,原本我以为数据库中会有一个单独的json格式的字段来保存,类似于{“time”:“121211”,“cpu”:“1231415”,“mem”:“2131”}这种,但是拿到同事的数据我差点斯巴达了,其中时间是作为单独的字段进行存储的,每记录一次,数据库里面会多一条记录,然后根据监控的服务器数据区分,比如只监控一台服务器,那么每次时间记录表中就只有一条记录,如果监控两台服务器,那么每次时间记录就会有两条记录产生,由于压测的时候需要对多台数据库,服务器进行检测,所以就会产生很多条数据记录,通过一个XX object的字段来区分,如XXXXdb,XXXXapi等等。

然后考虑到图形化展示用到的是vue uielement 中的组件 ve-line,这里面的数据是json格式的,所以在写后端代码的时候就需要对数据库中读取的内容进行重新组合,变成json格式的然后返回给前端。

java 如何给前端提供接口 怎么写接口给前端调用_数据库_05


拼接一下返回给前端

java 如何给前端提供接口 怎么写接口给前端调用_数据_06


然后通过循环读取来显示表格。