(九)模仿学习-动态更改大屏数据
我们通过前面的练习,完全可以完成一个返回页面的操作。
首先我们准备一个action并在struts.xml中添加。
创建action
![](https://img.xiumi.us/xmi/ua/rSJP/i/6f3a62ef6ef08e1f4acc502cf098e098-sz_76688.png)
我们先什么数据都不返回,只返回一个页面
![](https://img.xiumi.us/xmi/ua/rSJP/i/493faf523c1090623db4eaefc4c532c7-sz_48307.png)
在applicationContext.xml中添加这个action
![](https://img.xiumi.us/xmi/ua/rSJP/i/56477cf82a9cabd27a8644f861c4d577-sz_42211.png)
接下来在struts.xml中填写这个action。
![](https://img.xiumi.us/xmi/ua/rSJP/i/50215721c5c935ff7529f237071428d6-sz_38032.png)
接下来我们准备一个ec.jsp这个页面
我们把之前可视化的页面代码拷贝到项目里
首先创建ec.jsp,创建在WebRoot目录下,因为我们再struts.xml中配置的是/ec.jsp,这两个路径要配合使用。
![](https://img.xiumi.us/xmi/ua/rSJP/i/a72238899714210a0a269bdfc66af41e-sz_116178.png)
复制所有的可视化index.html这个文件中的代码
![](https://img.xiumi.us/xmi/ua/rSJP/i/9b50b6af3f6042ee782bcb3a467a7ee5-sz_130500.png)
复制过来后我们进行这个页面的改动
首先是jsp中的一些配置文件,这部分文件在别的jsp文件中复制过来就行了。
![](https://img.xiumi.us/xmi/ua/rSJP/i/02cd32ff1b12668c1c1162c698a752ab-sz_172180.png)
接下来是静态资源的文件比如css,js,images,font等等
![](https://img.xiumi.us/xmi/ua/rSJP/i/550b59714b73385c48661f97cd6db743-sz_88808.png)
我们将之前静态代码的资源文件复制过来,注意其中的这个路径的配置,如果不对会出现404。
![](https://img.xiumi.us/xmi/ua/rSJP/i/aa6fd5101fe3f4a8c34a8decef427227-sz_188446.png)
这样可以把js也引入进来
![](https://img.xiumi.us/xmi/ua/rSJP/i/74c064643103396cb4c77a0522e6ca91-sz_77839.png)
改动完了之后看下效果,请求kshView.action可以看到大屏的界面。
![](https://statics.xiumi.us/stc/images/placeholder-img.jpg)
我们通过前面的练习,完全可以完成一个返回页面的操作。
首先我们准备一个action并在struts.xml中添加。
创建action
![](https://img.xiumi.us/xmi/ua/rSJP/i/6f3a62ef6ef08e1f4acc502cf098e098-sz_76688.png)
我们先什么数据都不返回,只返回一个页面
![](https://img.xiumi.us/xmi/ua/rSJP/i/493faf523c1090623db4eaefc4c532c7-sz_48307.png)
在applicationContext.xml中添加这个action
![](https://img.xiumi.us/xmi/ua/rSJP/i/56477cf82a9cabd27a8644f861c4d577-sz_42211.png)
接下来在struts.xml中填写这个action。
![](https://img.xiumi.us/xmi/ua/rSJP/i/50215721c5c935ff7529f237071428d6-sz_38032.png)
接下来我们准备一个ec.jsp这个页面
我们把之前可视化的页面代码拷贝到项目里
首先创建ec.jsp,创建在WebRoot目录下,因为我们再struts.xml中配置的是/ec.jsp,这两个路径要配合使用。
![](https://img.xiumi.us/xmi/ua/rSJP/i/a72238899714210a0a269bdfc66af41e-sz_116178.png)
复制所有的可视化index.html这个文件中的代码
![](https://img.xiumi.us/xmi/ua/rSJP/i/9b50b6af3f6042ee782bcb3a467a7ee5-sz_130500.png)
复制过来后我们进行这个页面的改动
首先是jsp中的一些配置文件,这部分文件在别的jsp文件中复制过来就行了。
![](https://img.xiumi.us/xmi/ua/rSJP/i/02cd32ff1b12668c1c1162c698a752ab-sz_172180.png)
接下来是静态资源的文件比如css,js,images,font等等
![](https://img.xiumi.us/xmi/ua/rSJP/i/550b59714b73385c48661f97cd6db743-sz_88808.png)
我们将之前静态代码的资源文件复制过来,注意其中的这个路径的配置,如果不对会出现404。
![](https://img.xiumi.us/xmi/ua/rSJP/i/aa6fd5101fe3f4a8c34a8decef427227-sz_188446.png)
这样可以把js也引入进来
![](https://img.xiumi.us/xmi/ua/rSJP/i/74c064643103396cb4c77a0522e6ca91-sz_77839.png)
改动完了之后看下效果,请求kshView.action可以看到大屏的界面。
![](https://img.xiumi.us/xmi/ua/rSJP/i/b81e727b0544ef424a2ee85953934c16-sz_4895719.png?x-oss-process=style/xm)
可视化大屏里的数据,我们正常应该来自于后台数据库,所以我们要完成这个内容。因为是做演示部分,我们做表单提交,建议表单会了之后,尝试用ajax提交,框架也可以改为springboot等框架。
首先我们的数据应该是来源于后台的,在Action的部分,我们要查询所有的数据。我们先以大屏左上角的图为例。
![](https://img.xiumi.us/xmi/ua/rSJP/i/44fca07570b653fc3defc27a7a695317-sz_982101.png)
先在action中完成测试数据,就是目前还不连接数据库
![](https://img.xiumi.us/xmi/ua/rSJP/i/54b79490aa9155465f0fee9f7a7d3fb9-sz_110226.png)
然后在请求的方法中添加我们的测试数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/6dd33076098a77d4a0676ba2445c60da-sz_80970.png)
数据已经准备好,接下来要将数据放到页面中
首先在index.js中将柱状图的代码移动到jsp中。这个页面里写ajax比较好,但是我们使用的是表单所以要将数据拿走。
![](https://img.xiumi.us/xmi/ua/rSJP/i/d61630b3c70c78acbcd721224f6b36fb-sz_91228.png)
移动之后代码到模块二
![](https://img.xiumi.us/xmi/ua/rSJP/i/92dcb053a8be05d16b954361fc4b8d86-sz_33400.png)
然后看jsp中移动过来的代码。
![](https://img.xiumi.us/xmi/ua/rSJP/i/551ba6f4d25de6755298c3a1ef819168-sz_54273.png)
放入代码后
![](https://img.xiumi.us/xmi/ua/rSJP/i/0888c04642c1b76e12f2ed9b0de96908-sz_111096.png)
然后我们需要把动态数据加进来。${td}就是我们后台返回的测试数据,这个地方就是将数据放到一个managerdata的数组中。
![](https://img.xiumi.us/xmi/ua/rSJP/i/45a22b29466f5d9d55db993009772ace-sz_31819.png)
打印测试一下,方便我们调试代码,可以不写
![](https://img.xiumi.us/xmi/ua/rSJP/i/355d5a1a953aeb9dd55ec811e59fbbe2-sz_71189.png)
接下来是第二个测试数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/0f88fb91963d34c0939ec781152c8671-sz_68244.png)
需要把静态数据改为我们动态的数据,所以上面的两个变量我们都要使用了。
首先是x轴的数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/a7a375c94e2f34abd463d55bd69d5497-sz_44294.png)
然后是y轴的数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/a4869be88ec3e9985959dfd9a5ba66af-sz_42085.png)
然后我们测试运行下,可以看到数据是我们后台的数据,说明前后端联系上了。
![](https://img.xiumi.us/xmi/ua/rSJP/i/563b21314778d5b58a1db97150be6d33-sz_514003.png)
我们开始准备数据库,先准备数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/b5c9c1382e616bfb9d82e7d275a33b65-sz_49736.png)
然后action中准备DAO
![](https://img.xiumi.us/xmi/ua/rSJP/i/7879c66d5a85d802c7d702519c51c8ed-sz_79878.png)
在applicationContext.xml中添加配置
![](https://img.xiumi.us/xmi/ua/rSJP/i/b07b3027123a37f9e30c551b70a80635-sz_46823.png)
我们准备测试代码
![](https://img.xiumi.us/xmi/ua/rSJP/i/522ec79bc170e9524c3a1dcce3801353-sz_223367.png)
运行看是不是数据库的数据
出现问题:数据没有
![](https://img.xiumi.us/xmi/ua/rSJP/i/4f2b4f2104e77bff31fa3649efef976b-sz_591406.png)
返回查看代码发现这个地方错了
![](https://img.xiumi.us/xmi/ua/rSJP/i/35cfd39de26efcaa0b8f5f045670bdb4-sz_127815.png)
修改后重新运行,数据正确了
![](https://img.xiumi.us/xmi/ua/rSJP/i/babea952b9bf7c28ab15f231181ba38a-sz_451871.png)
此时我们可以根据我们的后台管理完成数据的变动,比如打开管理后台,更改数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/70767196f7eccb4a83bbadfe2ea295b3-sz_63035.png)
这有个地方纠正 之前有个地方不小心改错了,之前写成zztlKsh.jsp了,现在改为zztlMoRe.jsp
![](https://img.xiumi.us/xmi/ua/rSJP/i/c0666876f2bc924ffe6302d316c434ac-sz_30216.png)
更改数据
![](https://img.xiumi.us/xmi/ua/rSJP/i/1392e615c476f4aa1b2f25a415ff6f4b-sz_27895.png)
查看可视化屏幕,可以发现已经更改了。
![](https://img.xiumi.us/xmi/ua/rSJP/i/134ba258fc552b14bae07dd9c8af0df6-sz_593172.png)