3.环境搭建与配置文件4.创建实体类1.需求与系统分析2.数据库设计2.MyBatis下载与安装5.创建Dao接口6.创建Servic
e接口及实现类2.MyBatis下载与安装7.商品列表页8.商品详情页2.MyBatis下载与安装9.购物车页10.订单
提交2.MyBatis下载与安装第20章电商网站示例20.1需求与系统分析本章将基于Spring、Spring
MVC与MyBatis整合框架，结合前端Vue框架实现一个简单的电商网站。本章所实现的电商网站功能比较简单，主要包括商品列表显示、
商品详情显示、购物车管理、订单提交。20.2数据库设计本章所使用的数据库与第19章相同，数据库名为eshop，电商网站只使
用了商品信息表product_info、订单信息表order_info和订单明细表order_detail这三张表。20.3环
境搭建与配置文件本章实现的电商网站采用了前后台分离技术，可以参照第17章的Spring整合MyBatis完成电商网站后台框架
搭建及相关配置文件的编写，网站后台目录结构如图20-1所示。网站前端基于vue脚手架vue-cli快速构建而成，其目录结构
如图20-2所示。20.4创建实体类在com.eshop.pojo包中，依次创建实体类ProductInfo、Order
Info、OrderDetail和CartItem。20.5创建Dao在com.eshop.dao包中，创建数据访问层接口
ProductInfoDao和OrderInfoDao，使用MyBatis注解完成数据表的操作。20.6创建Service接口
及实现类在com.eshop.service包中，创建业务逻辑层接口ProductInfoService和OrderInfoS
ervice，并在接口中添加相应的方法。在com.eshop.service.impl包中，创建ProductInfoServic
e接口的实现类ProductInfoServiceImpl，OrderInfoService接口的实现类OrderInfoServ
iceImpl，实现接口中的方法。20.7商品列表页本章的电商网站实现了前后台分离，由于前端页面发送到后台服务器的AJAX请
求无法跨域，因此这里使用了Nginx?进行代理。Nginx?(enginex)是一个高性能的HTTP和反向代理服务器，也是一个
IMAP/POP3/SMTP服务器。配置并启动Nginx，然后在Windows命令窗口中通过npmrundev命令，启用前端项
目shopping。在浏览器地址栏中，输入http://localhost:8888/shopping/index.html这个u
rl，就可以看到商品列表页了，效果如图20-3所示。20.8商品详情页商品详情页为views目录下的product.vue
，页面效果如图20-7所示。20.9购物车页购物车主要用于暂存客户购买的商品，客户还可以删除购物车的商品、清空购物车和修改
购物车中商品数量，购物车页面效果如图20-8所示。20.10订单提交在购物车页面中，单击下单按钮，通过axios向后台服务
器发送请求，请求的url为/eshop/order/handlerOrder，这个请求将映射到控制器类OrderInfoContr
oller中的handlerOrder方法；data用于指定要传递的参数，这里将传递的参数封装在URLSearchParams类
型的对象param，param里存放的是购物车数据。然后，调用Vuex的emptyCart方法清空购物车。20.11小结本章基
于Spring、SpringMVC与MyBatis整合框架，采用注解方法并结合前端Vue框架，详细讲解了一个简单的电商网站具体实
现过程。电商网站实现的功能包括商品列表页显示、商品详情页显示、购物车页显示和订单提交，并按照三层架构开发每个功能模块。通过本章
的学习，希望读者能够熟练掌握Spring、SpringMVC与MyBatis框架整合开发的基本步骤、方法和技巧。 |
|
