演示视频：
https://www.bilibili.com/video/BV18K411t779/
3 系统详细设计与实现
在管理信息系统的生命周期中，仅过了需求分析、系统设计等阶段之后，便开始了系统实施阶段。在系统分析和设计阶段，系统开发工作主要是集中在逻辑、功能和技术设计上，系统实施阶段要继承此前面各个阶段的工作成果，将技术设计转化为物理实现，因此系统实施的成果是系统分析和设计阶段的结晶[12]。
3.1 管理员登录页面
1、描述：为了保证系统的安全性，要使用本系统必须先登录到系统中。界面简洁、明了，无多余缀饰。
2、程序运行效果图，如图3.1所示：
图3.1 管理员登录页面
1、 功能实现：
在登录页面输入用户名和密码，点击提交按钮，跳转到登录的service中，在该service中会对用户名，密码进行判断，如果正确提示“通过验证”，进入到管理界面，如果错误则提示“用户名和密码不正确”，页面调转到登录页。
登录界面关键代码：
判断用户密码是否正确，不正确提示错误信息。
if(userType==0)//系统管理员登录
{String sql="from TAdmin where userName=? and userPw=?";
Object[] con={userName,userPw};
3.2 管理员模块
1、描述：管理员主页面：左方页面展示了管理员可操作的七大功能，进入相关的管理页面可以链接到子菜单，并且高亮显示。每个管理模块下面都有相应的子菜单。
2、程序运行效果图，如图3.2所示：
图3.2管理员主页面
3.2.1 图书类别管理
3.2.1.1 类别信息录入
1、描述：管理员输入类别相关正确信息后点击录入按钮，如果是没有输入完整的普通用户信息，比如没有输入类别名称，都会给出相应的错误提示，不能录入成功。输入数据都通过form表单中定义的方法οnsubmit="return checkForm()"来检查，checkForm()函数中是各种的校验输入数据的方式。
2、程序效果图，如下图3.3所示：
图3.3 类别信息录入
3、流程图，如下图3.4所示：
图3.4 图书类别信息录入流程图
3.2.1.2 类别信息管理
1、描述：管理员点击左侧，的菜单“图书类别管理”，页面跳转到类别管理界面，调用后台的action类查询所有图书类别信息。
2、程序效果图如下图3.5所示。
图3.5 图书类别管理
3、功能实现：
类别管理关键代码：
删除类别之前判断该类别下是否还有图书信息，
String sql="from TGoods where goodsDel='no' and goodsCatelogId="+catelogId;
List goodsList=goodsDAO.getHibernateTemplate().find(sql);
如果存在图书，则提示先删除此类别下的书籍，如果不存在图书，执行删除，
TCatelog catelog=catelogDAO.findById(catelogId);
catelog.setCatelogDel("yes");
3.2.1.3 类别信息删除
1、描述：先是点击类别信息管理，页面跳转到类别管理界面，浏览所有的类别信息，点击要删除的类别，弹出的确定对话框，即可删除该类别信息。
2、程序效果图，如下图3.6所示
图3.6 类别信息删除
3、功能实现：
类别删除关键代码：
判断能否删除，如果删除成功后，则弹出操纵成功对话框，删除该类别，
TCatelog catelog=catelogDAO.findById(catelogId);
catelog.setCatelogDel("yes");
catelogDAO.attachDirty(catelog);
this.setMessage("操作成功");
this.setPath("catelogMana.action");}
return "succeed";
3.2.2 图书信息管理
3.2.2.1 图书信息录入
1、描述：在此页面主要是输入图书信息，包括图书编号、名称、图书介绍、图书ISBM、图书图片、图书价格等。图中的图书介绍文本框，使用的是开源的在线文本编辑器fckEditor这个富文本框实现。图书介绍是否为空也是通过form表单中的οnsubmit="return checkForm()来检查。
2、程序效果图，如图3.7所示：
图3.7 图书信息录入
3、功能实现：
在整个系统中所有涉及输入日期的地方都是采用的mydata97这个日历控件的方式来实现，要在工程中导入Calendar.js文件，在jsp页面开始引入
<script type="text/javascript" src="../js/calendar.js" ></script>，
该js文件，在文本框的属性定义中定义方法οnclick="new Calendar().show(this);"即可。
3.2.2.2 图书信息管理
1、描述：管理员点击左侧的菜单“图书管理”，页面跳转到图书管理界面，调用后台的图书Action类查询出所有的图书信息，并把这些信息封转到数据集合List中，绑定到request对象，然后页面跳转到相应的jsp，显示出图书信息。
2、程序效果图，如下图3.8所示：
图3.8 图书信息管理页面
3、功能实现：
图书管理关键代码：
点击添加图书信息，输入信息正确，则显示操作成功对话框，返回图书管理界面，
goodsDAO.attachDirty(goods);
this.setMessage("操作成功");
this.setPath("goodsManaNoTejia.action");
return "succeed";}
3.2.3 会员信息管理
3.2.3.1 会员信息管理
1、描述：游客访问该站点的时候，可以注册成为会员，管理员登录后可以管理会员信息，点击左侧的“会员管理“，页面调转中后台的是java类userAction，在此类中，读取数据库中，提取会员的信息，绑定到request对象，再输出到相应的jsp显示页面页面。
2、程序效果图，如图3.9所示：
图3.9会员信息管理
3.2.4 系统管理
3.2.4.1 查询管理员信息
1、描述：点击系统管理菜单，右侧展示了所有的系统管理员信息。主要包括用户名和密码。
2、程序效果图，如图3.10所示：
图3.10 查询管理员
3.2.4.2 添加管理员
1、描述：输入要添加管理员的信息以后，点击添加按钮。两次输入的密码必须相同。
2、程序效果图，如图3.11所示：
图3.11 添加管理员
3、功能实现：
管理员添加关键代码：
输入用户名、密码错误，则提示错误信息用户名、密码清空。 catelog.setCatelogName(catelogName);
catelog.setCatelogDel("no");
catelogDAO.save(catelog);
this.setMessage("操作成功");
this.setPath("catelogMana.action");
return "succeed";}
3.2.5 修改密码
1、描述：输入用户名和用户的原有密码，输入新密码以后点击修改按钮即可修改密码成功。
2、程序效果图，如图3.12所示：
图3.12 修改密码
3、功能实现
修改密码界面关键代码：
输入原密码，if(document.formPw.userPw.value !=userPwReal)不正确则显示错误信息提示alert("原密码不正确")；
输入新密码，if(document.formPw.userPw1.value =="")不输入则显示错误信息提示alert("新密码不能空")；
判断两次输入新密码是否一致，if(document.formPw.userPw1.value != document.formPw.userPw2.value)不一致则显示错误信息alert("两次输入的密码不一致")。
3.2.6 退出系统
1、描述：点此按钮回到系统的主页面。
2、关键代码：主要是通过javascript语句来实现, item_word[8][4]="退出系统";
item_link[8][4]="javascript:window.open('../index.jsp','_self')";
3.3 普通用户模块
3.3.1 系统主页面实现
1、描述：页面的上方显示的是该网站的logo和当前的时间，下方主要部分是信息显示区域，左侧部分是通知公告，管理员发布的信息公告都可以在此点击后链接到相应的信息页面查看具体通知公告，左上方是登录模块，用户必须输入正确的用户名、密码和验证码后才能进入系统，左下方是一个图书类别信息。
2、程序运行效果图，如图3.13所示：
图3.13 系统主页面设计
3、功能实现：
普通用户登录关键代码：
判断用户名是否为空if(document.form1.userName.value=="")，提示alert("请输入用户名");
判断密码是否为空if(document.form1.userPw.value=="")，提示alert("请输入密码")。
3.3.2 图书类别查询
1、描述：普通用户点击导航栏的“类别查询”。调用后台的java类catelogAction查询所有的类别信息，并绑定这些信息到request对象中，在显示层jsp展示出来，然后用户点击类别名称，即可显示该类别的信息。
2、程序效果图，如图3.14所示：
图3.14 类别查询界面设计
3.3.3 用户注册
1、描述：对于游客，至于浏览的功能，如果想进一步使用本系统，比如说购买图书、在线下订单等，首先需要注册一个合法的账号，然后登录后，方能使用，点击导航栏菜单“免费注册”，调用js的open()方法，弹出注册页面，输入相关正确信息后点击注册按钮即可完成注册，如果是没有输入完整的信息，或都会给出相应的错误提示，不能录入成功。输入数据都通过form表单中定义的方法οnsubmit="return checkForm()"来检查，checkForm()函数中是各种的校验输入数据的方式。
2、程序效果图，如图3.15所示：
图3.15 用户注册界面设计
扫一扫
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
