毕业设计（论文） - 图文(8)

大连交通大学2014届本科生毕业设计（论文）

图4.9 修改密码页面

4.4 地震信息管理模块的实现

用户可以进行地震信息查询操作，页面如图4.10所示。后台实现的过程为：左边菜单地震信息查询是一个链接，链接到EarthquakeAction中的case1，查询出所有的地震数据，修改、删除按钮分别对应一个触发事件，这事件将该行的地震信息ID绑定到请求上传给对应的case，调用EarthquakeDao中的修改、删除方法做相应的处理，然后对应修改数据库中的数据。

图4.10 地震信息查询页面

23

大连交通大学2014届本科生毕业设计（论文）

管理员和专业用户可以录入地震信息，页面如图4.11所示。后台实现的过程为：用js代码对输入框进行格式限制及验证，地震时间一栏日期限定到用户登录当天为止，时分秒的文本框不能输入数字以外的字符。震源的经纬度、震级和震源深度也是只能输入数字。提交按钮利用触发事件将表单数据传递到EarthquakeAction中的case42，将数据封装到Earthquake对象后调用EarthquakeDao的insert方法，进行新增数据操作。

图4.11 地震信息录入页面

4.5 建筑物信息管理模块的实现

用户可以查询建筑物信息，页面如图4.12所示。后台实现的过程为：左边菜单建筑信息查询是一个链接，链接到BuildingAction中的case1，查询出所有的建筑物数据，修改、删除按钮分别对应一个触发事件，这事件将该行的建筑信息ID绑定到请求上传给对应的case，调用BuildingDao中的修改、删除方法做处理，修改数据库中的数据。

24

大连交通大学2014届本科生毕业设计（论文）

图4.12 建筑物信息查询

如需新建建筑物信息，系统提供了建筑物信息录入，页面如图4.13所示。在页面设计中，利用ajax检验用户输入的建筑物编号在数据库中是否存在。还有Js代码对于年份，栋数，层数这些文本输入框进行了输入限制，只能输入数字且符合现实意义。而建筑物的结构类型和使用功能是用下拉列表的方式让用户进行选择，从而避免了一些自定义的数据存入数据库。但是这里录入选项，只有专业用户和管理员可以进行录入工作，普通用户登录系统后，左边的菜单栏中不会显示建筑物信息录入这一菜单选项。用户输入正确的信息点提交按钮时，会触发点击事件。表单提交到BuildingAction中的case32，将表单数据封装到Building对象之后，调用BuildingDao的insert方法，进行新增数据。

系统附了建筑物类型描述的表，即显示建筑物类型描述表，页面如图4.14所示。由于考虑到建筑物类型由于地区的不同而不同的情况，系统给了建筑物类型修改的选项，以便于适应环境，更好的记录数据。

图4.13 建筑物信息录入页面

25

大连交通大学2014届本科生毕业设计（论文）

图4.14 建筑物结构类型描述页面

4.6 建筑物震损信息管理模块的实现

建筑物震损信息查询，页面如图4.15所示。震损信息查询将链接转到DamageAction的case1，显示查询页面。查询列表中右侧有修改和删除，为管理员提供对建筑物震损信息的修改和删除操作。每个按钮都有一个点击事件，将该按钮所在行的信息编号绑定到请求上传递给DamageAction中的相应case，调用DamageDao中的修改或删除函数，分别进行震损信息的修改、删除操作。

在页面下方，系统提供了一个导出数据的功能，可以将页面上查询出来的数据导出到Excel文件中，存储在用户本地，导出的Excel文件如图4.16所示。实现过程如下：将查询的数据绑定在请求中，利用DamageAction中的case6，先创建Excel表格，之后利用文件流将绑定的数据一条一条的写入Excel表中。

图4.15 建筑物震损信息查询

26

大连交通大学2014届本科生毕业设计（论文）

图4.16 导出的Excel文件

系统提供给用户的建筑物震损信息录入，页面如图4.17所示。由于一般情况下用户无法准确知道震损信息对应的建筑物和地震信息的编号，所以采用了查询选择的方式进行录入。分步选择，先选择建筑物，之后进入的页面如图4.18所示选择地震信息，每一步都是先由DamageAction的case先做查询的工作，每页的选择按钮的对应的触发事件，将记录下该行的编号，绑定到请求中。两项都选择完之后进入的页面如图4.19所示，在该页面录入建筑物破坏等级。提交按钮将表单提交的DamageAction的case34，将数据封装到Damage对象中，调用DamageDao类下的insert方法，将数据插入数据库。

图4.17 建筑物震损信息录入页面1

27