Java网上图书商城,项目基于MVC设计模式,采用B/S结构
首页模块包括3个主要的部分,采用内嵌框架技术。位置分别为上、左、中。
上部包含两大部分内容:
- 网站标题;
- 菜单;
菜单部分就是一系列的超链接,用户在未登录时看到的是"登录"和"注册"链接;在登录后看到的是"我的购物车"、"我的订单"、"修改密码"、"退出"超链接,以及当前用户名称。
左部显示所有分类,包含所有1级、2级分类。左部使用了Javascript的Q6Menu组件来完成显示所有分类。当用户点击某个1级分类名称时会展示当前1级分类的所有2级分类。
中部是网站的骨干,点击任何超链接都会在中部显示。默认只是使用纯文本显示欢迎信息。
注册用户是构成网站主体的一个重要组成部分,网站设置注册用户的目的之一在于方便网站信息的管理。
用户在登录之前需要先进行注册,在首页中点击"注册"链接就可以到达注册页面。
注册页面使用JQuery对用户输入的数据进行校验:
- 用户名:
- 不能为空;
- 长度必须在2-15之间;
- 不能是已注册过的;
- 登录密码:
- 不能为空;
- 长度必须在2-15之间;
- 确认密码:
- 不能为空;
- 必须与登录密码相同;
- Email:
- 不能为空;
- 必须是正确的Email格式;
- 不能是注册过的Email;
- 验证码:
- 不能为空;
- 必须与图片上的验证码相同。
表单校验中,用户名是否被注册过、Email是否被注册过、验证码是否正确这三项都需要请求服务器,所以这里使用的是JQuery的ajax()来完成对服务器的访问。
当用户注册成功后还需要激活成功后才能登录。在注册成功后,系统给用户的邮箱发送一份激活邮件。当用户登录自己的邮箱后,在激活邮件中点击激活链接完成激活后,才可以去登录。
在首页点击"登录"链接就可以来到登录页面。
- 用户名:
- 不能为空;
- 长度必须在2-15之间;
- 用户名是否存在;
- 密码:
- 不能为空;
- 长度必须在2-15之间;
- 验证码:
- 不能为空;
- 是否正确。
登录表单校验使用的JQuery完成,其中用户名是否存在,以及验证码是否正确需要使用JQuery的ajax()向服务器发送异步请求。
用户登录成功后,会回到首页。这时在首页会显示当前用户的名称,以及"我的购物车"、"我的订单"、"修改密码"、"退出"链接。也就是说,这几个功能只能登录用户才能使用,而游客是无法使用的。
用户在登录成功后,点击修改密码链接就会到达修改密码页面。
- 原密码:
- 不能为空;
- 长度必须在2-15之间;
- 是否正确;
- 新密码:
- 不能为空;
- 长度必须在2-15之间;
- 确认密码:
- 不能为空;
- 必须与新密码相同;
- 验证码:
- 不能为空;
- 是否正确。
表单校验使用JQuery完成。其中原密码和验证码是否正确,需要异步访问服务器,这里使用的是JQuery的ajax()完成的。
当用户登录后,点击退出链接可以完成退出。退出成功后会到达登录页面!
在首页左部点击某个2级分类,会在首页的中部显示图书列表页面。图书列表使用分页显示。
可以在图书列表上方输入关键字进行搜索。
点击某本图书,会到达图书详细页面。
在图书列表页面点击高级搜索到达搜索页面。
高级搜索有三个条件:书名、作者、出版社,三个条件的关系是并列的。而且三个条件都是模糊查询。
购物车使用数据库来保存数据,也就是说添加到购物车中的图书,不会因为关闭浏览器,或者是关闭电脑而消失。而且修改数量,是通过异步请求来操作数据库的。
在图书详细页面,给出数量,然后点击"购买"就可以把图书添加到购物车中,并且会到达购物车列表页面。
也可以在首页上部点击"我的购物车"链接查询购物车。购物车列表页面会显示所有车中所有条目,每个条目会显示图书图片、图书名称、图书当前价、数量,以及小计。
在购物车列表页面中,点击某个条目上的数量来完成修改数量。这项操作会修改底层数据库。所以这里需要使用JQuery的异步处理访问服务器,完成对数据库表的修改。
当数量为1时,如果把数量减1,会弹出确认对话框,提示是否删除该条目。
在购物车列表页面中,点击某个条目后面的"删除"链接会删除当前条目。
也可以勾选N个条目,然后点击"批量删除"链接,完成一次删除多个条目。
对订单的操作,对应数据库中的两张表,即订单表和订单条目表(t_order和t_orderitem)。
而且订单模块的功能比较多:
- 生成订单:通过购物车中勾选的条目来生成订单;
- 我的订单:显示当前用户的所有订单,每个订单所包含的订单条目也需要显示;
- 订单支付:使用易宝的第三方支付平台完成,对"在线支付"的理解也是一个挑战;
- 订单详细:显示指定的某个订单;
- 订单取消和订单的确认收货:这两个功能都是对订单状态的修改。
在购物车列表页面中,勾选要购买的条目,然后点击"结算"按钮,完成选中条目,准备生成订单,这会到达订单准备页面。
在订单准备页面,输入收货地址,然后点击"提交订单"按钮,完成下单(生成订单)。这时会到达"下单成功"页面。
这时订单已经生成,但状态为"未付款"。可以在"下单成功"页面点击"支付"按钮到达"支付"页面。
在首页上部点击"我的订单"链接,就会到达订单列表页面。该页面会显示当前用户的所有订单信息。该页使用分页显示订单!
在"下单成功"页面,或者"订单列表"页面中点击"支付"按钮都可以到达"支付"页面。在"支付"页面中选择银行,后点击下一步就会跳转到银行的支付页面了。这里使用的是"易宝"第三方支付平台!
在订单列表页面中,点击某个订单的"查看"、"取消"、"确认收货"都会到达"订单详细"页面。其中点击"查看"到达"订单详细"页面后没有按钮;点击"取消"到达"订单详细"页面有"取消按钮"按钮;点击"确认收货"按钮到达"订单详细"页面有"确认收货"按钮。
订单的状态分为5种:
- 1:未付款状态。当订单刚刚生成时,就是1状态;
- 2:已付款状态,但未发货。当订单刚刚支付之后,就是2状态;
- 3:已发货,但未消确认收货。当订单刚刚发货之后,就是3状态;
- 4:交易成功。当订单确认收货之后,就是4状态。一旦订单为4状态后,就不能再改变状态;
- 5:已取消。当订单被取消后,就是5状态。只有1状态(未付款状态)的订单可以取消,其他状态的订单是不可以取消的。一旦订单为5状态后,就不能再改变状态。
书城后台的设计是为管理员方便管理系统而设计的,其中包括分类管理、图书管理,以及订单管理。
后台管理员登录页面,登录成功后到达后台主页。
管理员登录成功后,到达主页。主页是框架页,由上、下两部分构成。
- 上部显示标题和菜单,分别为:"退出"、"分类管理"、"图书管理"、"订单管理",以及当前用户名称;
- 中部默认显示欢迎图片,当点击上部链接后,都在中部显示。
当点击首页上部的"分类管理"链接到达分类列表页面。
在分类列表页面中有"添加一级分类"链接,点击该链接直接"添加一级分类页面"。
列表中每个一级分类后面都存在"添加二级分类"链接,添加可以到达"添加二级分类页面"。
添加二级分类需要指定父分类。
在分类列表中,每个一级分类,以及二级分类后都存在"修改"链接。点击一级分类后的"修改"链接进入"修改一级分类页面";点击二级分类后的"修改"链接进入"修改二级分类页面"。
在分类列表中,每个一级分类,以及二级分类后都存在"删除"链接。点击一级分类后的"删除"链接完成删除一级分类;点击二级分类后的"删除"完成删除二级分类。
注意,如果一级分类下存在子分类,那么不能删除。
注意,如果一级分类下存在图书,那么不能删除。
后台图书管理这一部分,很多地方都与前台的图书操作相同,例如:分页显示所有图书、按分类查询图书、高级查询图书、查看图书详细信息。后台图书管理还包括前台所没有的功能,例如:添加新图书、编辑和删除图书。
图书列表页面分为两个部分:
- 左部:显示所有分类,与前台是相同的,用来通过指定分类来查询图书;
- 中部:默认显示"添加图书"和"高级查询"两项功能,当管理员点击某一分类后,中部显示图书列表。
点击"图书管理"链接后,在中部会出现"添加图书"链接,点击后会进入添加图书表单页面。
表单使用了JQuery进行校验,如果校验无误,添加图书会成功!
点击"图书管理"链接后,在中部会出现"高级搜索"链接,点击后会进入高级搜索表单页面。
这个高级搜索与前台是相同的,只需要在表单中输入条件后搜索,即可在图书列表中显示结果。
在图书列表中点击某一本图书后会进入图书详细页面。
图书详细页面上方有一个名为"编辑或删除"的复选框,如果管理员勾选它,那么页面会显示表单,并多出两个按钮:"编辑"和"删除"。
点击"订单管理"链接会到达订单列表页面。该页面会分页显示所有订单!
订单列表页面上包含按状态查询的链接,分别为:未付款、已付款、已发货、交易成功、已取消,管理员可以点击这几个链接按状态查询显示订单。
在订单列表页面中,点击某个订单后面的:查看、取消、发货链接会进入到订单详细页面。订单详细页面会显示当前订单的信息,而且会根据点击的链接显示不同的按钮。
点击发货或取消按钮完成相应操作即可。