tft每日頭條

 > 科技

 > 如何使用小屏幕學習

如何使用小屏幕學習

科技 更新时间:2024-11-23 17:09:50

可視化大屏裡的數據,我們正常應該來自于後台數據庫,所以我們要完成這個内容。因為是做演示部分,我們做表單提交,建議表單會了之後,嘗試用ajax提交,框架也可以改為springboot等框架。

首先我們的數據應該是來源于後台的,在Action的部分,我們要查詢所有的數據。我們先以大屏左上角的圖為例。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)1

先在action中完成測試數據,就是目前還不連接數據庫

如何使用小屏幕學習(模仿學習-動态更改大屏數據)2

然後在請求的方法中添加我們的測試數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)3

數據已經準備好,接下來要将數據放到頁面中

首先在index.js中将柱狀圖的代碼移動到jsp中。這個頁面裡寫ajax比較好,但是我們使用的是表單所以要将數據拿走。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)4

移動之後代碼到模塊二

如何使用小屏幕學習(模仿學習-動态更改大屏數據)5

然後看jsp中移動過來的代碼。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)6

放入代碼後

如何使用小屏幕學習(模仿學習-動态更改大屏數據)7

然後我們需要把動态數據加進來。${td}就是我們後台返回的測試數據,這個地方就是将數據放到一個managerdata的數組中。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)8

打印測試一下,方便我們調試代碼,可以不寫

如何使用小屏幕學習(模仿學習-動态更改大屏數據)9

接下來是第二個測試數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)10

需要把靜态數據改為我們動态的數據,所以上面的兩個變量我們都要使用了。

首先是x軸的數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)11

然後是y軸的數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)12

然後我們測試運行下,可以看到數據是我們後台的數據,說明前後端聯系上了。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)13

我們開始準備數據庫,先準備數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)14

然後action中準備DAO

如何使用小屏幕學習(模仿學習-動态更改大屏數據)15

在applicationContext.xml中添加配置

如何使用小屏幕學習(模仿學習-動态更改大屏數據)16

我們準備測試代碼

如何使用小屏幕學習(模仿學習-動态更改大屏數據)17

運行看是不是數據庫的數據

出現問題:數據沒有

如何使用小屏幕學習(模仿學習-動态更改大屏數據)18

返回查看代碼發現這個地方錯了

如何使用小屏幕學習(模仿學習-動态更改大屏數據)19

修改後重新運行,數據正确了

如何使用小屏幕學習(模仿學習-動态更改大屏數據)20

此時我們可以根據我們的後台管理完成數據的變動,比如打開管理後台,更改數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)21

這有個地方糾正 之前有個地方不小心改錯了,之前寫成zztlKsh.jsp了,現在改為zztlMoRe.jsp

如何使用小屏幕學習(模仿學習-動态更改大屏數據)22

更改數據

如何使用小屏幕學習(模仿學習-動态更改大屏數據)23

查看可視化屏幕,可以發現已經更改了。

如何使用小屏幕學習(模仿學習-動态更改大屏數據)24

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved