https://www.bilibili.com/video/BV1Jp4y1o7St/
4.2 用户主界面设计
用户主界面是用户了解特产的重要窗口,其上必须有用户在特产购物所需的重要信息和相关入口。在首页用户可以通过选择“会员登录”进入系统购买页面并可以执行相关操作。用户还可以选择相应的菜单进行购物向导查看,公告信息,特产资讯,及不同分类的特产信息浏览,还有留言板,公司简介的说明,以及联系方式。
图4-2 主界面截图(一)
整个主界面有四部分组成:最上面的top.jsp,中间的为index.jsp,最下面的为foot.jsp,中间偏右的为特价特产和最新特产展示。top.jsp包含了用户注册,会员登录,购物向导,首页,自助订货,特产资讯,特产公告等菜单。在登陆后,菜单会有相应的改变。其中菜单的实现主要使用超链接实现。
增加了修改用户资料,订单查询,退出三个菜单,少了用户注册和会员登录菜单。主界面调用top.jsp,top.jsp首先访问session看用户名loginName是否存在或为空,来判断所要显示的菜单。
top.jsp主要实现特产的分类显示菜单,和购物车菜单。分类显示菜单是通过访问数据库,从数据库表splb和pros中提取相应信息动态生成菜单。当用户点击菜单时,通过超链接实现参数的传递和页面的跳转。
foot.jsp包含友情链接以及特产的相关信息。
以上三个JSP文件都是通过jsp:include动作引入。
4.3 用户信息管理模块设计
4.3.1 会员登录模块设计
此模块的主要功能是对使用本系统的用户进行用户名、密码、用户身份的验证,只有合法的用户才能使用本系统购买特产和管理。对于初次使用本系统的用户需要先通过注册才能登录用户界面。在首页界面中左上角有一个用户注册菜单。用户填写的所有信息由Form提交,使用post方法。通过getParameter函数获得用户提交的信息,并与数据库中的相应信息进行比较做出判断。在用户登录时,要使用setAttribute 函数将用户名和用户编码保存在session对象中,方便其它界面使用getAttribute函数获取session对象中的用户名和用户编码。此外,该界面还提供出错处理,如用户登录时用户信息填写不正确等异常。本系统会员与管理员登录系统用的都是这个界面。在用户登录是系统会自动根据当前用户的类别确定登录后的界面。在此界面中还添加了一个忘记密码的按钮,用以帮助用户取回密码。
用户登录界面如图4-5
图4-5 用户登录界面
具体流程图如图4-6
图4-6 登录流程图
用户退出页面把网页中的session对象清空,然后显示注销成功信息。这里结束session使用了一个session.invalidate()调用。这一处理有两个原因。首先,如果用户没有注销就离开了,下一个用户就有可能使用前一个用户未过期的session对象,这样会严重影响到安全性。另外,如果所有用户都不注销,则session对象会继续占用有效的资源直到过期。当用户数量很多的时候,就会造成网络资源的浪费。
在次界面还使用了JavaScript脚本对输入框进行验证,使用的函数为check.jsp中的checkU()。
4.3.2 用户注册模块设计
本系统约定只有特产的会员才有购买资格,才能操作购物车,生成订单。非会员只能进行特产的浏览,公告信息,特产资讯的查看。
在首页的左上角有一个用户注册菜单,用户通过此菜单进入注册页面,可以进行注册操作。在此界面,用户需要填写自己的信息:申请注册名,真实姓名,密码,性别,电邮,联系电话,联系地址和邮编。
注册界面如图4-7
图4-7 用户注册界面
在此模块中用到了两个JavaBean,一个是与用户信息的相对应的数据存储Bean:user_info。其具体属性对应数据库表用户信息表(userInfo_table)的所有字段。其作用主要是存储注册页的表单中的数据。具体Jsp代码如下:
通过上面的三条代码将注册页面中表单里面的信息对应的赋值到user_info类对象userInfo属性中。赋值后就可以调用另一个数据逻辑Bean:userInfoDaoImpl。其作用是调用user_info类对象对数据库表用户信息表(userInfo_table)进行访问操作。其具体类成员如表4-2
成员名
返回值
类别
作用域
功能
conn
connDB
private
数据库访问类
insert(user_info u)
int
public
数据库插入操作
update(user_info u)
int
public
数据库更新操作
updatePwd(user_info u)
int
public
修改密码操作
delete(user_info u)
int
public
进行删除记录操作
图4-2 userInfoDaoImpl类成员表
在用户名后跟的“检测用户名”菜单使用了JavaScript脚本函数openwin(UID)。在此函数中调用了checkUserName.jsp,用以访问数据库确认此用户名是否已被使用。在表单提交之前使用JavaScript脚本函数check()进行填写格式的验证。
注册流程图如图4-8
图4-8 注册流程图
注册成功后,系统将新用户的用户注册名,用户编号储存到session里面,以便之后用户操作时进行用户验证。在用户登录时也会作同样的操作。
4.3.3 用户信息的查看与修改模块设计
用户可以在此模块里查看自己注册时填写的信息,同时也可以修改相关的信息,如真实姓名,电话,Email,联系地址,联系邮编,性别,还可以根据需要更改密码。
用户信息查看与修改界面如图4-9
图4-9 用户信息查看与修改界面
在整个界面中,用户名输入框是只读属性,其余的都可以更改。当选择修改密码按钮是就可以进入密码修改界面,进行修改密码。密码修改界面如图4-10
图4-10 密码修改界面
4.4 购物车模块和前台订单处理模块的设计
购物车通常为特产信息管理的核心模块之一,在特产信息管理系统里面也是如此。购物车模块一般包括添加特产即特产放入购物车,删除特产,改变特产数量,清空购物车,购物车信息查看五个功能。
前台订单处理主要是根据用户提交的信息和购物车内的信息生成用户订单即用户订单的查看功能。
由于以上两个模块的联系比较紧,所以在此处一起设计。
整个购物车和订单信息填写界面如图4-12和图4-13
图4-12购物车部分界面
4.4.1购物车添加特产设计
购物车添加特产流程图如图4-14
用户在特产详细信息页面选择购买,即可触发购物车添加特产行为,并跳转到购物车信息界面如图4-12。
4.4.2修改购买数量设计
在图4-12界面中购物车信息表中填入购买的数量,然后单击更改数量按钮即可以更改购买数量。当填入负数或0是表示从购物车内删除对应特产。从图4-12中显示的购物车更改数量后的图为图4-15
图4-15 更改数量后的购物车信息
更改购物车中特产数量的实现根自助订货后台实现逻辑比较相似。
4.4.3订单的提交的设计
当用户选择玩需要的特产,填写好订单一般信息如留言,发送日期,接受人信息等后就可以单击完成订购按钮生成新的订单并保存到数据库中。