01、系统设计

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

1●系统功能需求

1．后台管理子系统

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

2．电子商务子系统

1）非注册用户

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

2）用户

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

2●系统模块划分

1．后台管理子系统

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

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 所示。

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

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

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

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

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

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

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

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

1●后台管理子系统

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

2●电子商务子系统

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

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

1●管理员登录

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

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

2●类型管理

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

3●添加商品

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

■ 9.9  添加商品

4●查询商品

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

8●用户管理

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

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

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 所示。

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

2●推荐商品及最新商品

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

3●用户注册

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

4●用户登录

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

5●商品详情

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

6●收藏商品

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

7●购物车

单击商品详情页面中的“加入购物车”按钮或导航栏中的“我的购物车”超链接，打开购物车页面 cart.html，如图 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.21 所示。

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

9●个人信息

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

10●我的收藏

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

11●我的订单

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

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

06、小结

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