01、系统设计

电子商务平台分为两个子系统，一是后台管理子系统，一是电子商务子系统。下面分别说明这两个子系统的功能需求与模块划分。

1●系统功能需求

1．后台管理子系统

后台管理子系统要求管理员登录成功后，才能对商品进行管理，包括添加商品、查询商品、修改商品以及删除商品。除商品管理外，管理员还需要对商品类型、注册用户以及用户的订单等进行管理。

2．电子商务子系统

1）非注册用户

非注册用户或未登录用户具有的功能如下：浏览首页、查看商品详情以及搜索商品的功能。

2）用户

成功登录的用户除具有未登录用户具有的功能外，还具有购买商品、查看购物车、收藏商品、查看订单、查看收藏以及查看用户个人信息的功能。

2●系统模块划分

1．后台管理子系统

管理员登录成功后，进入后台管理主页面（selectGoods.html）可以对商品、商品类型、注册用户以及用户的订单进行管理。后台管理子系统的模块划分，如图9.1所示。

■ 图9.1 后台管理子系统

2．电子商务子系统

非注册用户只可以浏览商品、搜索商品，不能购买商品、收藏商品、查看购物车、查看用户中心、我的订单和我的收藏。成功登录的用户可以完成电子商务子系统的所有功能，包括购买商品、支付等功能。电子商务子系统的模块划分，如图9.2所示。

■ 图9.2  电子商务子系统

02数据库设计

系统采用加载纯Java数据库驱动程序的方式连接MySQL5.5数据库。在MySQL5.5中创建数据库ch9，并在ch9中创建8张与系统相关的数据表：ausertable、busertable、carttable、focustable、goodstable、goodstype、orderdetail和orderbasetable。

1●数据库概念结构设计

根据系统设计与分析，可以设计出如下数据结构：

1．管理员

包括管理员ID、用户名和密码。管理员的用户名和密码由数据库管理员预设，不需要注册。

2．用户

包括用户ID、邮箱和密码。注册用户的邮箱不能相同，用户ID唯一。

3．商品类型

包括类型ID和类型名称。商品类型由数据库管理员管理，包括新增和删除管理。

4．商品

包括商品编号、名称、原价、现价、库存、图片以及类型。其中，商品编号唯一，类型与“3．商品类型”关联。

5．购物车

包括购物车ID、用户ID、商品编号以及购买数量。其中，购物车ID唯一，用户ID与“2．用户”关联，商品编号与“4．商品”关联。

6．收藏商品

包括ID、用户ID、商品编号以及收藏时间。其中，ID唯一，用户ID与“2．用户”关联，商品编号与“4．商品”关联。

7．订单基础信息

包括订单编号、用户ID、订单金额、订单状态以及下单时间。其中，订单编号唯一，用户ID与“2．用户”关联。

8．订单详情

包括订单编号、商品编号以及购买数量。其中，订单编号与“7．订单基础信息”关联，商品编号与“4．商品”关联。

根据以上的数据结构，结合数据库设计的特点，可以画出如图9.3所示的数据库概念结构图。

■ 图9.3  数据库概念结构图

2●数据库逻辑结构设计

将数据库概念结构图转换为MySQL数据库所支持的实际数据模型，即数据库的逻辑结构。

管理员信息表（ausertable）的设计，如表9.1所示。

 ■ 表9.1  管理员信息表

用户信息表（busertable）的设计，如表9.2所示。

■ 表9.2  用户信息表

商品类型表（goodstype）的设计，如表9.3所示。

■ 表9.3  商品类型表

商品信息表（goodstable）的设计，如表9.4所示。

■ 表9.4  商品信息表

购物车表（carttable）的设计，如表9.5所示。

■ 表9.5  购物车表

商品收藏表（focustable）的设计，如表9.6所示。

■ 表9.6  关注表

订单基础表（orderbasetable）的设计，如表9.7所示。

■ 表9.7  订单基础表

订单详情表（orderdetail）的设计，如表9.8所示。

■ 表9.8  订单详情表

03、HTML页面及静态资源管理

1●后台管理子系统

管理员在浏览器的地址栏中输入http://localhost:8080/eBusiness/admin/toLogin访问登录页面，登录成功后，进入后台商品管理主页面（adminGoods.html），adminGoods.html的运行效果如图9.4所示。

■ 图9.4  后台商品管理主页面

2●电子商务子系统

注册用户或游客在浏览器的地址栏中输入http://localhost:8080/eBusiness可以访问电子商务子系统的首页（index.html），index.html的运行效果如图9.5所示。

■ 图9.5  电子商务子系统的首页

04、后台管理子系统的实现

1●管理员登录

管理员输入用户名和密码后，系统将对管理员的用户名和密码进行验证。如果用户名和密码同时正确，则成功登录，进入后台商品管理主页面（adminGoods.html）；如果用户名或密码有误，则提示错误。

login.html页面提供登录信息输入的界面。效果如图9.6所示。

 ■ 图9.6  管理员登录界面

2●类型管理

管理员登录成功后，管理商品类型。类型管理分为添加类型和删除类型，如图9.7所示。

■ 图9.7  类型管理

3●添加商品

单击图9.4中“添加商品”超链接打开如图9.9所示的“添加商品”页面。

 ■ 9.9  添加商品

4●查询商品

管理员登录成功后，进入如图9.4所示的后台管理子系统主页面，在主页面中单击“详情”链接，显示如图9.10所示的详情页面。

■ 图9.10  商品详情

5●修改商品

单击图9.4中的“修改”超链接（goods/detail(id=${gds.id},act=update)）打开修改商品信息页面updateAGoods.html，如图9.11所示。在图9.11中输入要修改的信息后，单击“提交”按钮，将商品信息提交给goods/addGoods?act=update处理。

■ 图9.11  修改商品页面

6●删除商品

单击图9.4中“删除”超链接（'javascript:deleteGoods(' + ${gds.id} +')'）可实现单个商品的删除。成功删除（关联商品不允许删除）后，返回删除商品管理主页面。

7●查询订单

单击后台管理主页面中“查询订单”超链接（selectOrder?currentPage=1），打开查询订单页面allOrder.html，如图9.12所示。

■ 图9.12  查询订单页面

8●用户管理

单击后台管理主页面中“用户管理”超链接（selectUser?currentPage=1），打开用户管理页面allUser.html，如图9.13所示。

单击图9.13中“删除”超链接（'javascript:deleteUsers('+ ${u.id} +')'）可删除未关联的用户。

■ 图9.13  用户管理页面

9●安全退出

在后台管理主页面中，单击“安全退出”超链接（loginOut），将返回后台登录页面。系统根据@RequestMapping注解找到对应控制器类com.ch.ebusiness.controller.admin.UserAndOrderAndOutController的loginOut方法处理请求。在loginOut方法中执行session.invalidate()将session失效，并返回后台登录页面。具体代码如下：

05、前台电子商务子系统的实现

游客具有浏览首页、查看商品详情和搜索商品等功能。成功登录的用户除具有游客具有的功能外，还具有购买商品、查看购物车、收藏商品、查看我的订单以及用户信息的功能。

1●导航栏及首页搜索

在前台每个HTML页面中，都引入了一个名为header.html的页面，引入代码如下：

<div th:include="user/header"></div>

header.html中的商品类型以及广告区域的商品信息都是从数据库中获取。header.html页面的运行效果如图9.14所示。

■ 图9.14  导航栏

在导航栏的搜索框中输入信息，单击“搜索”按钮，将搜索信息提交给search请求处理，系统根据@RequestMapping注解找到com.ch.ebusiness.controller.before.IndexController控制器类的search方法处理请求。并将搜索到的商品信息转发给searchResult.html。searchResult.html页面的运行效果如图9.15所示。

■ 图9.15  搜索结果

2●推荐商品及最新商品

推荐商品是根据商品表中的字段isRecommend值判断的。最新商品是以商品ID排序的，因为商品ID是用MySQL自动递增产生的。

3●用户注册

单击导航栏的“注册”超链接（user/toRegister），将打开注册页面register.html，如图9.16所示。

■ 图9.16  注册页面

4●用户登录

用户注册成功后，跳转到登录页面login.html，如图9.17所示。

■ 图9.17  登录页面

5●商品详情

可以从推荐商品、最新商品、广告商品以及搜索商品结果等位置处，单击商品图片进入商品详情页面goodsDetail.html，如图9.18所示。

■ 图9.18  商品详情页面

6●收藏商品

登录成功的用户可以在商品详情页面、首页以及搜索商品结果页面，单击“加入收藏”按钮收藏该商品。此时，请求路径为cart/focus（Ajax实现）。系统根据@RequestMapping注解找到com.ch.ebusiness.controller.before.CartController控制器类的focus方法处理请求。

7●购物车

单击商品详情页面中的“加入购物车”按钮或导航栏中的“我的购物车”超链接，打开购物车页面cart.html，如图9.19所示。

■ 图9.19  购物车

与购物车有关的处理请求有cart/putCart（加入购物车）、cart/clearCart（清空购物车）、cart/selectCart（查询购物车）和cart/deleteCart（删除购物车）。系统根据@RequestMapping注解分别找到com.ch.ebusiness.controller.before.CartController控制器类的putCart、clearCart、selectCart、deleteCart等方法处理请求。

8●下单

在购物车页面单击“去结算”按钮，进入订单确认页面count.html，如图9.20所示。

■ 图9.20  订单确认

在订单确认页面单击“提交订单”按钮，完成订单提交。订单完成时，提示页面效果如图9.21所示。

■ 图9.21  订单提交完成页面

单击图9.21中“去支付”完成订单支付。

9●个人信息

成功登录的用户，在导航栏的上方，单击“个人信息”超链接（cart/userInfo），进入用户修改密码页面userInfo.html，如图9.22所示。

■ 图9.22  用户修改密码页面

10●我的收藏

成功登录的用户，在导航栏的上方，单击“我的收藏”超链接（cart/myFocus），进入用户收藏页面myFocus.html，如图9.23所示。

■ 图9.23  用户收藏页面

11●我的订单

成功登录的用户，在导航栏的上方，单击“我的订单”超链接（cart/myOder），进入用户订单页面myOrder.html，如图9.24所示。

■ 图9.24  用户订单页面

单击图9.24中的“查看详情”超链接（'cart/orderDetail?id=' + ${order.id}），进入订单详情页面orderDetail.html，如图9.25所示。

■ 图9.25

06、小结

本篇讲述了电子商务平台通用功能的设计与实现。通过我们的学习，不仅掌握Spring Boot应用开发的流程、方法和技术，还应该熟悉电子商务平台的业务需求、设计以及实现。