云监控（华为） | 实训学习day8（10）

SpringBoot结合GaussDB的前端展示

 一、数据打印到控制台

配合前端页面显示

图形展示，前端使用echarts

使用方法

显示页面的布局

左边布局

右边是echarts

Echarts的脚本如下

这里需要echarts的js文件，在bootcdn中查找

击echarts的链接

把script标签复制到网页文件中

 这里可以把SystemService中的deleteAll打开

运行后的界面

报错的原因，是mapper文件中的分号   

在页面中增加单位项

运行后，后台显示数据如下

显示数据需要前台

前台使用ajax进行数据的交互，ajax作用：局部刷新

加入按钮

加载数据使用ajax , ajax需要使用jquery

再到bootcdn搜索jquery,

然后击jquery链接

这里复制script标签到网页

因为后台返回数据，使用model

在Controller方法中传入Model

 然后数据放在model中传到前端

前端需要thymeleaf获取方法

在调用方法时使用[[${myresults}]]可以输出结果

输出结果中Results前端不认，这里做转化

使用模块json

在pom文件中加入

       

  加入后maven重新加载项目

加载后回到Results

击”生成”或者’generate…..”

在出现的对话框中击”toString….”

在弹出框中确认即可

代码显示如下

改成

使用th模板后,代码改如下

      

  调用myresults报错,原因

在返回数据中把quot去除

控制台出的数据:

先构成x和y的数据

后面继续改x,y的意义及数据

  运行后显示数据图表如:

现在只需要把三参数传入后台.

前端的代码

后端需要接收参数

在参数中控制空的处理

   中文改英文

然后运行

修改方法

1. 查内存的使用率报错

原因：Long运行时汇总报错，把Ｌong改成int型

第一步连接GaussDb的 sys用户

第二步：修改类型，把Long变成int 

1. 后端修改

返回数据和返回页面分开

逻辑和页面分开，先把return  页面analyse注释掉． 

逻辑把返回页面变成返回数据．

 

后面的方法中注释页面，返回error

在try结构中返回数据

返回数据把注解Controller改在RestController，就返回数据

返回数据在访问页面时

再做一个页面的Controller

管页面的需要使注解@Controller

        

  效果图如

先把页面刷新注释掉

再用ajax请求数据

把后面的所有的代码

后面的代码放在function中

再改表头

二、页面的整合

• 根据逻辑调整注册页 /user的user去除

1. 把/addpage的addpage去除

   

注册成功后，进入到数据分析页

在analyse页面添加用户列表的链接

 在list页面实现用户的删改查操作．

把注册页中/user/add中，把/user去掉

前端页面:updatepage把/user去掉．Form表单中的

在UserController中的