界面设计
1．登陆界面设计
验证码，自动生成
网站公告点这里注册找回密码
图1.1用户登陆首页
用户登陆首页要求：只有当用户名、密码和验证码都正确时才能通过验证。
“网站公告”
部分为由下到上的滚动字幕，“查看所有商品”部分为从右到左的滚动字幕。
点“注册
会员”时，弹出添加新会员窗口，如图1.2所示。
点“忘记密码？”，弹出找回密码
页面，如图1.4所示。
点“查看所有商品”，弹出商品展示页面，如图1.7所示。
点
网站公告信息，弹出该公告的详细信息页面，如图1.9所示。
图1.2 用户注册页面
会员注册页面要求：用户登陆名只能为数字和字母以及“_”“-”，不得使用其它字符。
并且用户登陆名不能少于4位，密码不能少于6位，最多不超过10
话都要进行有效性验证，除了地址和身份证号外，其他信息不能为空。
功则提示，如图1.3所示。
图1.3 注册成功提示信息
图1.5用户存在后显示用户和密码框界面
如果问题和答案都填写正确，则显示输入新密码部分，如图1.6所示。
图1.6 问题和答案完全正确提交后的新密码界面
输入新密码后提交，则显示：“恭喜您，重新设置密码成功，请牢记”，确定后，找回密码页自动关闭。
商品展示页面：（如图1.7所示）
图1.7商品展示页面
商品展示页面功能要求：用DataList展示所有商品，如图1.7所示，要求实现翻页和模糊查询功能，点“放入购物车”后报告“请登录后购买！！”，如图1.8所示。
图1.8放入购物车时提示
图1.9公告详细信息页面
公告详细信息页面功能要求：显示公告标题和内容，点“关闭”按钮可以关闭窗体。
2．后台管理主界面设计
个人基本信息
内容页部分
功能菜单部分
图2.1 后台管理主界面
主界面功能要求：
个菜单项，综合信息包括：销售统计、浏览投诉2个菜单项。
3．后台管理用例界面实现
用例1
图2.3修改个人资料界面
修改个人资料页面功能要求：显示用户基本信息如图2.3所示，修改资料时的限制如注册时相同。
用例2
审核操作界面：（如图2.4所示）
图2.4审核操作界面
审核操作页面功能要求：用两个GridView分别显示待审核的用户和汇款信息，如图2.4所示，都有“查看详细”功能。
点“通过审核”实现通过审核功能，如果汇款出现错误，点“撤回汇款”则以系统消息的形式通知用户。
用例3
图2.5 用户管理界面
用户管理页面功能要求：用GridView展示用户基本信息，点“查看详细”可以查看更详细的信息，如图2.4所示，选中用户后，点页面上的四个操作按钮，即可以实现把用户设置为普通会员、vip会员、管理员和删除选中用户功能。
另外添加全选功能，选择不同的用户角色，GridView重新绑定相应的用户信息。
用例4
角色管理页面：（如图2.6所示）
图2.6 角色管理界面
角色管理页面功能要求：用GridView展示角色基本信息，如图2.5 所示，要求实现添
图2.7 添加角色界面
添加角色页面功能要求：为模式对话框，角色名称不能为空，提交后自动关闭并刷新角色管理页面。
修改角色页面：（如图2.8 所示）
图2.8 修改角色界面
功能要求同添加页面。
分配角色权限页面：（如图2.9所示）
图2.9 分配角色权限
分配角色权限页面功能要求：用CheckBoxList列出所有子菜单权限名称，不要求列出父菜单名称，要求选中子菜单时，自动把父菜单分配给该角色，把选中的权限分配给对应的角色，点“提交”提示“权限已生效”，确定后关闭该模式对话框。
角色功能浏览页面：（如图2.10所示）
角色功能浏览界面功能要求：按角色展示它们被分配的权限，如图2.9所示。
设置会员优惠价页面：（如图2.11所示）
图2.11 设置会员优惠价页面
设置会员优惠价页面功能要求：会员类型又roleinfo表动态绑定，然后选择你要设置的会员类型，填写优惠价比（1~100之间的整数）后，点“提交”则更新选定会员类型的优惠价比例，如图2.12所示。
图2.12 设置会员优惠价比
能成功执行删除操作。
用例5
卡片类别管理界面：（如图2.13所示）
图2.13 卡片类别管理界面
卡片类别管理页面功能要求：卡片类别可以同名，用卡片类别和价格结合起来作为唯一标志，用ListBox列出所有卡片类别+价格。
商品价格部分可以自己定义，但菜单项要合理。
图片路径部分要求只保存图片的相对路径，并且输入框部分为只读，可以把所有的图片都放在项目中的“images”文件夹里，保存数据库时，路径保存为：“~/images/....gif”。
点“添加新类型后”卡片类别列表自动刷新，显示刚才添加的卡片类别，另外点“删除选中类型”按钮，删除该行记录，并自动刷新卡片ListBox。
用例6
图2.14 卡片管理界面
卡片管理页面功能要求：用GridView显示卡片基本信息，按卡片类别名称和价格排序，相同的部分尽量合并单元格，如图2.14所示。
实现添加、修改和删除功能。
添加卡片页面功能要求：为卡片管理页面弹出的模式对话框，如图2.15所示，要求所属类型部分为自动绑定的所有卡片类型+价格，默认编号是从数据库获取的当前默认种子最大值，卡号和密码部分要有有效性验证，比如卡号只能为10~20位整数，密码为3~10位数字。
点“提交”后保存卡片信息，并自动关闭模式对话框。
图2.15 添加卡片界面
修改卡片页面功能要求：初始时分别绑定卡片管理中选中的卡片信息，卡片类型也要自动绑定为该卡片对应的类型，修改卡片的内容，“提交”更新卡片信息，关闭模式对话框，自动刷新卡片管理页面。
图2.16 修改卡片界面
用例7
汇款审核界面：（如图2.17所示）
图2.17 汇款审核界面
汇款审核页面功能要求：用GridView显示汇款基本信息，添加查看详细信息和全选功能，“汇款信息选择”下拉菜单项如图2.18所示，点“通过审核”追加用户余额，点“撤回汇款”通知用户汇款失败，当改变“汇款信息选择”中的类型时，则重新绑定GridView，显示相关信息。
图2.18 汇款审核菜单展开界面
用例8
公告管理界面：（如图2.19所示）
图2.19 公告管理界面
公告管理页面功能要求：用GridView显示公告基本信息，有添加、修改、删除和发布功能，要求发布后，不能修改，但可以删除。
添加新消息页面功能要求：公告管理页面弹出的模式对话框，如图2.20所示。
填写消息标题和内容，提交后关闭该对话框，自动刷新公告管理页面，消息标题不能为空。
图2.20 添加新消息界面
修改消息页面功能要求：初始时显示该消息的基本信息，其他要求同添加新消息页面。
用例9
商品统计界面：（如图2.21所示）
用例10
图2.22 浏览投诉界面
浏览投诉页面功能要求：用DataList显示投诉建议基本信息。
4．前台操作主界面设计
个人基本信息
内容页部分
功能菜单部分
图4.1 前台操作主界面
前台操作主界面功能要求：
要求使用母版页设计主界面，如图4.1所示，使用TreeView展示用户功能菜单，内容首页展示所有可购商品信息，如图4.1所示。
会员菜单包括：个人管理、会员操作、
综合信息3个父级模块，个人管理包括：修改资料1个菜单，会员操作包括：商品列
表、投诉建议、汇款通知3个菜单项，综合信息包括：存款记录、购物记录和联系我
们3个菜单项。
5．前台操作用例界面实现
用例1
用例2
图4.2 商品列表界面
商品列表页面功能要求：用DataList显示可购商品基本信息，展示方式如图4.2所示。
可以按照商品名称模糊搜索，点“放入购物车”后，打开新的窗口，里面显示该会员已经选择的卡片信息，当选择另外的商品点“放入购物车”后，只刷新原来的窗口不打开新窗口，点“我的购物车”共用刚才打开的窗口。
如图4.3所示。
用例3
图4.5 投诉建议界面
投诉建议页面功能要求 :客户文本框部分默认为用户登陆时的id ，内容有非空验证。
用例4
汇款通知界面：（如图4.6所示）
图4.6 汇款通知界面
汇款通知页面功能要求：客户默认为登陆id，银行默认为工商银行，汇款金额只能为数字类型，除了附言外，其他输入框都要求非空。
用例5
存款记录界面：（如图4.7所示）
图4.7 汇款记录界面
汇款记录页面功能要求：用GridView显示汇款基本信息，相同的项要进行合并，如图
4.7所示。
用例6
图4.8 商品列表界面
购物记录页面功能要求：用GridView显示购物历史记录，如图4.8所示。
用例7
图4.9 联系我们界面
联系我们页面功能要求：静态页面，注意div布局。