第5章系统的实现
一、技术路线:
开发语言:Java
前端技术:JavaScript、VUE.js(2.X)、css3
数据库:MySQL 5.7
数据库管理工具:Navicat或sqlyog
开发工具:IDEA或Ecplise
二、项目介绍:
https://www.bilibili.com/video/BV1bz4y1c7ip/
三、运行截图:
3.1实现环境说明
运行环境包括硬件要求及软件要求如下表所示。
表3-1硬件要求
设备名称
说明
处理器
奔腾III以上,2GB
内存
2GB,内存越大,速度越快
硬盘
500GB以上
鼠标
双飞燕2D鼠标
表3-2软件要求
名称
说明
操作系统
Windows XP或 Windows7以上
应用软件
myeclipse
3.2主页面的实现
经过用户登录后,页面跳转至后台首页,main.jsp,首页是由2个页面组成的,包括top、left和center等页面,通过@ Register引入,这里也是浏览者操作系统功能的入口,系统首页主要介绍系统的基本信息,包括当前用户、当前日期、当前访问浏览器的版本、服务器的端口数、当前用户的权限、当前电脑的ip、当前电脑的操作系统名称、本系统的开发日期、系统作者、指导教师、开发日期等,主页面如下图所示。
图3-1主页界面
其中载入页面的主要代码如下:
系统基本信息显示的主要代码如下。
align=middle bgColor=#ffffff>
系统基本信息
align=middle
bgColor=#ffffff>
当前用户:
您的权限:
bgColor=#ffffff>
当前日期:
jsp.text.SimpleDateFormat format = new jsp.text.SimpleDateFormat("yyyy-MM-dd", jsp.util.Locale.CHINA);
3.3登录模块的实现
系统的登录是使用该系统的第一关卡,用户在登录界面输入账号和密码后,系统判断该账号密码是否能在数据库中存在并且匹配,返回登录成功或登录失败的信息,登录成功后才能使用系统的功能。
登录流程图如下图所示。
图3-1登录流程图
用户登录界面如下图所示。
图3-2用户登录界面
随着系统规模的壮大,系统发布更新的信息及对普通用户量会越来越多,只有超级管理员负责系统后台恐怕任务艰巨,本系统考虑到这一问题后开发了超级管理员有权限可以增加管理员的模块。管理员角色不同对应权限亦不相同。
系统用户管理界面如下图所示。
图3-5系统用户管理界面
3.4职位信息管理模块的实现
管理员添加职位是在点击添加按钮的前提下操作的,当页面跳转至zhiwei_add.jsp,添加成功后,管理员在zhiwei_list.jsp进行职位信息管理,zhiwei_ list.jsp通过查询数据库表列出所有职位信息,每条职位信息对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除职位信息,并重定向当前页面,当管理员选择点击修改,则进入zhiwei_update.jsp页面,进行职位信息的修改。
职位信息流程图如下图所示。
图3-6职位信息流程图
职位信息添加界面如下图所示。
图3-7职位信息添加界面
职位信息管理界面如下图所示。
图3-8职位信息管理界面
3.5部门信息管理模块的实现
管理员添加部门信息是在点击添加按钮的前提下操作的,当页面跳转至bumenxinxi_add.jsp,添加成功后,管理员在bumenxinxi_list.jsp进行部门信息管理,bumenxinxi_list.jsp通过查询数据库表列出所有部门信息,每条会议通知对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除部门信息,并重定向当前页面,当管理员选择点击修改,则进入bumenxinxi_update.jsp页面,进行部门信息的修改。
部门信息管理流程图如下图所示。
图3-9部门信息管理流程图
部门信息添加页面设计效果如下图所示。
图3-10部门信息添加界面
部门信息管理页面效果如下图所示。
图3-11部门信息管理界面
3.6工作日志管理模块的实现
管理员修改工作日志信息是在点击修改按钮的前提下操作的,当页面跳转至gongzuorizhi_add.jsp,修改成功后,用户在gongzuorizhi_list.jsp进行工作日志管理,gongzuorizhi_ list.jsp通过查询数据库的工作日志表列出所有工作日志信息,每条工作日志对应一个删除按钮和修改按钮,当用户点击删除按钮,直接在数据库删除工作日志信息,并重定向当前页面,当用户选择点击修改,则进入gongzuorizhi_update.jsp页面,进行工作日志信息的修改。
工作日志查询流程图如下图所示。
图3-12 工作日志管理流程图
工作日志管理页面设计效果如下图所示。
图3-13工作日志添加界面
3.7项目BUG管理模块的实现
管理员添加项目BUG是在点击添加按钮的前提下操作的,当页面跳转至xiangmubug_add.jsp,添加成功后,管理员在xiangmubug_list.jsp进行项目BUG管理,xiangmubug_list.jsp通过查询数据库表列出所有项目BUG,每条项目BUG对应一个删除按钮和修改按钮,当管理员点击删除按钮,直接在数据库删除项目BUG,并重定向当前页面,当管理员选择点击修改,则进入xiangmubug_update.jsp页面,进行项目BUG的修改。
项目BUG管理流程图如下图所示。
图3-14项目BUG管理流程图
项目BUG添加页面设计效果如下图所示。
图3-15项目BUG添加界面
项目BUG管理页面效果如下图所示。
图3-16项目BUG管理界面
3.8 BUG修复管理模块的实现
管理员编辑修复查询统计是在点击编辑按钮的前提下操作的,当页面跳转至xiufuchaxun_add.jsp,提交成功后,用户在xiufuchaxun_list.jsp进行修复查询统计,xiufuchaxun_ list.jsp通过查询数据库表列出所有修复查询统计,每条工作日志对应一个删除按钮,当用户点击删除按钮,直接在数据库删除BUG修复信息,并重定向当前页面,当用户选择点击修改,则进入xiufuchaxun_update.jsp页面,进行工作修复查询统计的修改。
修复查询统计流程图如下图所示。
图3-17 工作日志管理流程图
修复查询统计页面设计效果如下图所示。
图3-18修复查询统计界面
3.9任务计划管理模块的实现
管理员添加任务计划是在点击添加按钮的前提下操作的,当页面跳转至renwujihua_add.jsp,添加成功后,用户在renwujihua_list.jsp进行任务计划添加,renwujihua_ list.jsp通过查询数据库表列出所有任务计划信息,每条任务计划对应一个删除按钮,当用户点击删除按钮,直接在数据库删除任务计划,并重定向当前页面,当用户选择点击修改,则进入renwujihua_update.jsp页面,进行工作任何计划的修改。
任何计划管理流程图如下图所示。
图3-19任务计划管理流程图
任务计划添加页面设计效果如下图所示。
图3-20任务计划添加界面
任务计划统计界面
图3-21任务计划管理界面
3.10本章小结
本章节主要论述了登录模块用户的登录、工作日志、项目BUG管理、任务计划等功能模块的设计与代码的编写,以及最终实现的步骤。