可視化大屏裡的數據,我們正常應該來自于後台數據庫,所以我們要完成這個内容。因為是做演示部分,我們做表單提交,建議表單會了之後,嘗試用ajax提交,框架也可以改為springboot等框架。
首先我們的數據應該是來源于後台的,在Action的部分,我們要查詢所有的數據。我們先以大屏左上角的圖為例。
先在action中完成測試數據,就是目前還不連接數據庫
然後在請求的方法中添加我們的測試數據
數據已經準備好,接下來要将數據放到頁面中
首先在index.js中将柱狀圖的代碼移動到jsp中。這個頁面裡寫ajax比較好,但是我們使用的是表單所以要将數據拿走。
移動之後代碼到模塊二
然後看jsp中移動過來的代碼。
放入代碼後
然後我們需要把動态數據加進來。${td}就是我們後台返回的測試數據,這個地方就是将數據放到一個managerdata的數組中。
打印測試一下,方便我們調試代碼,可以不寫
接下來是第二個測試數據
需要把靜态數據改為我們動态的數據,所以上面的兩個變量我們都要使用了。
首先是x軸的數據
然後是y軸的數據
然後我們測試運行下,可以看到數據是我們後台的數據,說明前後端聯系上了。
我們開始準備數據庫,先準備數據
然後action中準備DAO
在applicationContext.xml中添加配置
我們準備測試代碼
運行看是不是數據庫的數據
出現問題:數據沒有
返回查看代碼發現這個地方錯了
修改後重新運行,數據正确了
此時我們可以根據我們的後台管理完成數據的變動,比如打開管理後台,更改數據
這有個地方糾正 之前有個地方不小心改錯了,之前寫成zztlKsh.jsp了,現在改為zztlMoRe.jsp
更改數據
查看可視化屏幕,可以發現已經更改了。
,
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!