基于SpringBoot + Vue的商城购物

1 引言

1.1 编写目的

根据需求分析文档确定的需求，为系统开发提供更为详细、精确、可行的设计方案。在该文档中，我们将具体阐述系统各个阶段的设计方案，包括系统架构、模块划分、数据库设计、界面设计等细节内容，以确保开发人员能够准确理解和实现每一个阶段的开发。同时，该文档也需要提供详细的系统运行流程，通讯协议，算法实现、数据结构的说明等，以方便开发人员写出可靠的代码。另外，在系统维护时，该文档也作为重要依据，提供系统各模块的设计原则、开发要求、版本升级策略等，以确保系统可维护、可扩展、可重用性、安全性等方面要求得以满足。因此，该文档的编写应该全面考虑因素，并尽可能确保其具有清晰性、可读性和易于理解性，以便于开发人员理解、协作和实现。

1.2 项目背景

该电子商城系统是针对线上购物市场的一款应用系统，通过结合Spring Boot和Vue技术实现了商品管理、商品分类、订单管理、用户管理、购物车管理等相关功能。系统旨在为买家提供一个方便快捷、高效、可靠的购物服务。

1.3 参考资料

[1] 林晓斌. Java企业级开发实战[M]. 第二版. 北京: 人民邮电出版社, 2017.

[2] 邓俊辉. 数据结构[M]. 北京: 清华大学出版社, 2018.

[3] 刘伟. SpringBoot企业级应用开发实战[M]. 北京: 电子工业出版社, 2017.

[4] 张磊, 马俊昭, 王丽华, 等. Vue.js实战[M]. 北京: 人民邮电出版社, 2017.

[5] 郑海波, 金丹华, 张曼. 电子商务系统设计[M]. 北京: 清华大学出版社, 2009.

1.4项目所用的技术栈

本系统采用了SpringBoot+Vue框架，使用Java语言进行开发，Web界面的设计与实现使用了常用的HTML、Vue、CSS、JavaScript等技术，数据管理方面则是采用了MySQL数据库工具，为了实现服务器端的功能，使用了SpringBoot内置的Tomcat Web服务器工具。 

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化Spring应用的创建、运行、调试、部署等。使用Spring Boot可以做到专注于Spring应用的开发，而无需过多关注XML的配置。Spring Boot使用“习惯优于配置”的理念，简单来说，它提供了一堆依赖打包，并已经按照使用习惯解决了依赖问题。使用Spring Boot可以不用或者只需要很少的Spring配置就可以让企业项目快速运行起来。

Spring Boot是开发者和Spring 本身框架的中间层，帮助开发者统筹管理应用的配置，提供基于实际开发中常见配置的默认处理（即习惯优于配置），简化应用的开发，简化应用的运维；总的来说，其目的Spring Boot就是为了对Java web 的开发进行“简化”和加“快”速度，简化开发过程中引入或启动相关Spring 功能的配置。这样带来的好处就是降低开发人员对于框架的关注点，可以把更多的精力放在自己的业务代码上。

Spring MVC是SpringFrameWork的后续产品，融入到了Spring Web Flow之中。Spring MVC将传统的模型层进行了拆分，成了业务层和数据访问层。在业务层中可以通过Spring的声明式事务操作数据访问层。

MyBatis 是 对JDBC 的封装，使得数据库底层操作更加透明。MyBatis 的所有操作都基于 SQLSessionFactory 实例开展。借由配置文件，MyBatis 可以与各个实体类的 Mapper 文件关联，Mapper 文件中配置了每个类与数据库之间的 SQL 语句映射。每次跟数据库进行交互时，先借助 SQLSessionFactory 获取一个 SQLSession，然后执行 SQL 命令。

JavaScript 是一种高级的网页开发和 Web 应用程序开发语言。它可以轻松地在浏览器上运行，提升网页的动态效果和交互程度。JavaScript 极具动态性和灵活性，以便开发者实时修改网页内容、响应用户交互、处理数据验证以及与后端服务器进行通信。它可以用于创建动画效果、表单验证、异步数据获取、网页游戏等各种丰富的功能。JavaScript 还支持面向对象编程的概念，允许定义对象、类和继承关系。具有丰富的函数和方法库，可用于处理字符串、数组、日期、浏览器事件等。同时，JavaScript 也有很多流行的框架和库，如 React、Vue.js、Angular 等，它们提供了更高效的开发方式和复杂功能的实现。

Vue 是一个前端开发的 JavaScript 框架，其作用是设计系统的界面，实现了数据和视图的绑定，从而实现视图的动态更新。Vue 能够有效地将页面拆分为多个独立的组件，提高了代码重用性和维护性。与 JSP 不同的是，Vue 不需要依赖服务器端的技术，它可以在客户端直接运行。Vue 的模板语法更加简洁易懂，使得编写视图更加方便。同时，Vue 也提供了丰富的生命周期钩子和组件通信方式，方便开发者进行状态管理和数据交互。Vue 是一种轻量级、灵活的、方便学习和使用的框架，擅长于各类的Web 应用程序的构建。Vue注重产品的性能，可以达到的开发效率和良好的交互效果。

开发工具

IntelliJ IDEA 是受欢迎程度广的开发环境，尤其适用于 Java 项目开发。借助其各项功能，如代码自动补全、代码分析、调试工具和版本控制集成等，明显提高了开发的效率。IntelliJ IDEA支持许多程序设计语言，主要有 Python、JavaScript 和 Go 等编程语言，并且具有良好的可扩展性，可以通过安装插件来扩展其功能。它的用户界面简洁美观，易于使用，也支持多种操作系统。IntelliJ IDEA 提供了一套全面的工具和功能，涵盖代码编辑、调试、版本控制等各个方面，支持完整的软件开发工作流程，有效提升开发效率。它具有出色的跨平台性，兼容多种编程语言，并且拥有丰富的插件系统，可以灵活满足各种开发需求。

Tomcat是开源的Web服务器和Servlet容器，由Apache集团开发。Tomcat的源代码对于公众是保持完全开放的。同时Tomcat对外提供了许多开发过程中通用的组件以及功能，其中就包括了数据库连接池等。

Tomcat 的主要特点有：开源免费、轻量级、支持 JSP 和 Servlet。具体来说，Tomcat 作为开源软件，可供所有人免费使用、修改和分发。此外，它非常轻巧，核心代码仅几百 KB，占用系统资源少，启动速度快。同时，Tomcat 还是支持 JSP 和 Servlet 规范的 Web 容器，可用于运行基于 Java 技术的 Web 应用程序。

MySQL数据库在目前非常受程序员的欢迎。在最好的关系数据库应用的排名榜单中，MySQL无疑是榜上有名的。MySQL还未问世的时候，人们就期望拥有一个速度快、具有健壮性以及灵活易用的数据库工具。MySQL与其他数据库管理系统不一样的点在于MySQL会把获取的数据保存到每一个不同的表单中，不会像其他工具一样将所有数据保存到一张表中。

MySQL 具有成本低、性能好、简单易用等特性。它是开源软件，处理数据速度快，且容易安装和使用。

2 总体设计

2.1 需求概述

（1）商品管理模块：实现了商品的基本信息录入、图片上传、状态管理等相关功能。

（2）商品分类模块：实现了分类的增删改查、分类层级管理、商品分类的关联等功能。

（3）订单管理模块：实现了订单的查询、创建、删除、退货等功能。

（4）用户管理模块：实现了用户的注册、登录、密码找回、个人信息修改和查询等功能。

（5）购物车管理模块：实现了添加商品、删除商品、调整数量、结算等功能。

2.2 软件结构

描述：以上的软件结构图，采用了四层架构设计，不同层之间通过依赖关系进行交互。展示层采用Vue.js框架来实现，应用层处理各种请求并调用服务层来处理具体业务逻辑，领域层负责封装业务逻辑，基础设施层负责管理底层资源，如数据库和缓存等。该软件结构图体现了高内聚低耦合的设计原则，有利于系统的可维护性和可扩展性。

3 模块设计

3.1 模块基本信息

3.1.1 商品管理模块

模块描述：负责对商品进行增删改查等基本操作，包括商品信息的录入、维护和展示，商品图片的上传、展示和删除，商品状态的管理等功能。

3.1.2 商品分类模块

模块描述：负责商品分类的管理，包括商品分类的层级关系维护、新增、修改、删除等基本操作。

3.1.3 订单管理模块

模块描述：负责订单相关的基础操作，包括订单的查询、创建、删除等功能。

3.1.4用户管理模块

模块描述：负责用户信息相关功能，包括用户注册、登录、个人信息维护等操作。

3.1.5 购物车管理模块

模块描述：负责购物车的管理，包括加入购物车、调整商品数量、删除商品、结算等基本操作。

3.2 模块处理逻辑

以上流程图是用户在购物车界面添加商品的操作流程。首先查询该商品是否已经在购物车中，若已存在，则调整该商品的数量，否则添加该商品至购物车。最后返回添加或调整的结果信息。这个流程设计简洁，易于理解。

以上流程图是用户提交订单的操作流程。首先检查所有商品的库存是否充足，若充足则创建订单并扣除库存，否则返回库存不足错误信息。然后生成订单号和支付信息，完成支付，返回支付结果，更新订单状态为已支付，最后生成返回信息。这个流程设计清晰明了，覆盖了电商系统中订单的基本操作。

以上流程图是用户在购物车中删除商品的操作流程。首先查询该商品是否在购物车中，若存在则从购物车中删除该商品，否则返回未找到商品错误信息。最后生成删除结果信息并返回给用户。这个流程设计简洁明了，有效实现了购物车中删除商品的功能。

以上流程图是用户上传商品图片的操作流程。用户上传图片后，服务器接受到上传请求并根据图片大小和格式生成存储路径。然后将图片存储至指定路径，并生成存储成功信息返回给用户。这个流程设计简单清晰，有利于实现图片上传的功能。

5 数据库设计

5.1 ER图表

6 接口设计

6.1 外部接口

6.1.1 登录界面

<div class="title">

        <b>登录在线商城</b>

      </div>

      <div style="margin-top: 30px">

        <el-form label-width="70px">

          <el-form-item label="用户名">

            <el-input v-model.trim="user.username" aria-required="true"></el-input>

          </el-form-item>

          <el-form-item label="密码" style="margin-top: 25px">

            <el-input v-model.trim="user.password" show-password aria-required="true"></el-input>

          </el-form-item>

          <el-form-item style="margin: 30px 80px">

            <el-button type="success" @click="onSubmit">登录</el-button>

            <el-button @click="$router.push('/register')">注册</el-button>

          </el-form-item>

        </el-form>

      </div>

6.1.2 注册界面

<div class="title">

        <b>注 册</b>

      </div>

      <div style="margin-top: 30px">

        <el-form label-width="70px">

          <el-form-item label="用户名">

            <el-input v-model.trim="user.username" aria-required="true"></el-input>

          </el-form-item>

          <el-form-item label="密码" style="margin-top: 25px">

            <el-input v-model.trim="user.password" show-password aria-required="true"></el-input>

          </el-form-item>

          <el-form-item label="确认密码" style="margin-top: 25px">

            <el-input v-model.trim="user.confirmPassword" show-password aria-required="true"></el-input>

          </el-form-item>

          <el-form-item style="margin: 30px 80px">

            <el-button type="success" @click="onSubmit">注册</el-button>

            <el-button @click="$router.push('/login')">返回</el-button>

          </el-form-item>

        </el-form>

      </div>

6.1.3 商城首页

  <el-container style="height: 100%;width:100%;