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应用开发的流程、方法和技术，还应该熟悉电子商务平台的业务需求、设计以及实现。