【课程设计】基于spring boot和vue的美妆购物系统的设计与实现-计算机毕设 附源码83071

基于spring boot和vue的美妆购物系统的设计与实现第二章 相关技术介绍2.1 Spring BootSpring Boot是Java Web开发框架的工程化方案用约定优于配置的理念来组织项目结构减少样板化代码对业务开发的影响。其自动装配机制以依赖关系和运行环境为基础进行装配决策控制层、服务层和数据访问层之间就形成了稳定的协作边界接口输出以及权限控制具有相同的编程模型。美妆商城的查看、订单支付等业务对响应速度和可维护性有较高要求Spring Boot依靠内嵌容器和统一配置系统把部署形态、环境不同带来的影响控制在可以接受的程度之内。就该框架的启动流程、配置加载以及条件装配这些特性而言有关研究在工程实践中给出过可以被复用的创建手段[13]从而使得应用在迭代过程中拥有清晰的结构和扩展途径。工程治理上Spring Boot提供分层配置、Profile环境隔离和健康检查等特性可以将开发、测试和生产之间的差异集中到配置维度进行管理。与常见的认证授权组件、日志和审计组件集成的时候统一的拦截和过滤链条使得接口访问路径可以被追踪订单管理以及订单配送查看这些对于时效性和一致性的场景更易于创建端到端链路。配合标准化的异常处理、参数校验机制接口契约在前后端交互时就会稳定大大降低联调阶段返工的风险。2.2 VueVue是面向组件的前端框架重视数据驱动视图和声明式渲染用响应式系统把状态变化映射到界面更新上使得复杂的业务在页面交互中仍然保持清晰的依赖关系。其单文件组件把模板、脚本和样式放在同一个语义单元里有利于美妆资讯查看、我的购物车管理等页面产生可以复用的界面片段在路由切换的时候保持一致的交互体验。围绕虚拟DOM和响应式依赖收集的机制讨论给性能和可维护性提供理论支持[14]也使界面层在需求频繁变动的时候更容易找到改动范围。从工程化的角度来讲Vue同模块化构建工具相结合可以实现按需加载以及资源压缩从而减轻首屏负担并且加快页面切换的速度。状态管理方案给跨组件共享的数据赋予了清楚的更新入口订单支付以及我的订单管理这些流程型页面依靠统一的状态就可以开展渲染和校验从而防止出现多处维护造成的数据不一致状况。根据指令系统和表单绑定机制前端可以对输入的合法性以及交互提示在界面层进行初步的约束而把更多的业务校验和持久化工作交由后端接口来处理。2.3 MySQLMySQL是关系型数据库管理系统的一种具有较好的事务支持、索引系统、查询优化方案等适合用来承载商品、分类、订单、配送这些结构化数据。InnoDB存储引擎支持行级锁和崩溃恢复事务隔离级别可以控制并发读写时可见性和一致性从而使得订单管理在高并发提交和查询的时候更容易得到正确的结果。就执行计划、索引选择以及锁机制的技术讨论而言给在业务量不断增大时进行库表的设计以及性能的调整赋予了可实施的方法从而使得系统在查询延时和写入吞吐之间达成平衡[15]。数据建模上用外键约束和唯一约束来表达实体之间的关系以及数据的规则从而减少脏数据进入核心表的可能性。对于美妆商城的管理中商品上下架、库存变动等操作可以使用事务将多表更新作为原子操作防止中间状态对外暴露。利用视图、触发器、存储过程等手段一部分一致性校验和统计逻辑可以下沉到数据库层面执行但是仍然需要和应用层的职责边界保持清晰不能把业务规则固化在数据层上造成迭代成本上升。2.4 B/S架构B/S架构用浏览器作为统一的客户端利用HTTP协议和后端服务进行交互从而达到跨平台访问以及集中式部署管理的目的。本架构把界面呈现、交互大部分放在前端把业务处理、数据存储集中在服务器端从而使得客户端更新成本大大降低适合多角色访问模式。对于用户侧的美妆资讯查看、订单配送查看来说浏览器就可以完成访问和交互从而减少由于安装和版本碎片化而造成的维护压力。关于B/S架构网络通信、分层组织和安全边界方面的论述[16]提出用会话管理、接口鉴权和传输加密来限制访问路径使业务处在开放的网络环境中仍然可以控制。第三章 系统需求分析3.1 可行性分析3.1.1 技术可行性系统使用Spring Boot和Vue作为主要开发技术用MySQL数据库来实现前后端分离的建模方式。主流架构和主要技术的应用可以给数据传输和功能扩展提供可靠的保障。相关技术资料较多开发环境好可以支持高频率的访问、多用户并发。系统结构合理前后台功能区分清楚利于后期的维护和改进有较好的开发和运行条件。3.1.2 操作可行性系统为三类用户分别提供功能入口与对应操作界面保障不同类型用户在典型业务场景下的流畅交互体验。界面导航直观常用功能分布科学降低普通用户在下单、支付、信息管理等操作中的学习门槛。各类管理端操作简便易于信息发布与日常维护能够适应频繁、高效的使用需求提升整体人机交互友好度。3.1.3 经济可行性系统开发所需的软硬件资源大多可以得到开发环境不需要大量的资金投入主要功能可以利用现有的技术条件来实现。业务流程设计简单、维护成本低不会造成大量的资源浪费。后续升级和功能扩展可以依靠已有的结构逐步进行控制增量投入搭建起来的系统在保证实用性的同时能够达到较高的性价比在经济上具有较好的合理性。3.2 功能需求分析3.2.1 用户功能用户可以在系统中浏览美妆资讯的内容获取公告、产品等信息进入美妆商城查看商品详情和价格信息选择商品添加到购物车里对数量进行调整并完成结算下单时完成订单支付提交收货信息并维护我的地址管理在我的订单管理中查询订单列表、订单详情、订单状态在订单配送中查看配送进度、物流节点信息。用户角色用例图如图3-1所示。图3-1用户用例图3.2.2 商家用户功能商家用户在系统中对美妆商城进行管理完成商品信息的录入、编辑、上架、下架、展示内容的修改按照分类对商品进行分类整理创建商品分类的层级结构及对应关系在订单管理中查看用户下单信息、订单状态、支付情况处理发货相关事务在订单配送管理中更新配送信息处理发货、物流节点的状态更新以及配送进度、异常等形成订单履约日常处理流程。商家用户角色用例图如图3-2所示。图3-2商家用户用例图3.2.3 管理员功能管理员在系统中对最新公告进行管理发布、更新和下线公告内容对美妆资讯进行管理对美妆资讯的内容进行维护对美妆资讯的分类进行维护对美妆商城进行管理对美妆商城的全局商品信息进行监管对美妆商城的分类进行统一规范和调整在订单管理中查看全站订单信息及状态对订单数据进行维护在订单配送管理中查看和维护配送信息跟踪配送状态并处理相关记录。管理员角色用例图如图3-3所示。图3-3管理员用例图第四章 系统设计4.1 系统架构设计系统采用B\S架构从上到下分为用户界面层、应用服务层、数据持久层、系统支持层。界面层使用Vue进行用户端、商家端、管理员端页面的交互包含美妆资讯浏览、商城浏览、购物车、订单支付和配送查询等功能。应用服务层使用Spring Boot创建登录鉴权、商品和分类、订单和配送、公告和资讯等业务接口接口交互按照的约束[17]。数据持久层用MySQL来完成商品、订单、地址、配送、资讯等数据的读写。系统支持层给出权限控制、日志审计、异常处理、参数校验这些通用的功能。系统架构图如图4-1所示。图4-1系统架构图4.2 系统结构功能设计本美妆购物系统使用Spring Boot和Vue开发分为用户、商家用户和管理员三个角色。用户可以浏览美妆资讯、管理地址、查看商城、购物车、订单完成订单支付、配送查询。商家用户是美妆商城、分类、订单和订单配送的管理者可以完成商品经营和订单处理。管理员有公告、美妆资讯、资讯分类、美妆商城、分类、订单、配送管理等后台综合管理权限。各个角色的功能模块清晰互相配合来完成美妆购物平台的高效运转。该系统功能结构如图4-2所示。图4-2系统功能结构图4.3 业务流程设计4.3.1 美妆商城查看流程设计本流程用以指导用户浏览商品。用户进入商城之后系统会先判断用户是否选择了分类若是则根据分类筛选商品若否则显示所有商品。然后系统会判断是否需要搜索如果需要就返回匹配结果否则继续显示当前列表。流程结束之后用户得到可视化的商品清单为后面加入购物车、下单做准备美妆商城查看流程图如图4-3所示图4-3美妆商城查看流程图4.3.2 我的购物车管理流程设计本流程用于实现购物车的维护与校验。用户进入购物车后系统判断是否修改数量若是则更新数量与小计否则保持原状态。随后系统判断是否删除商品若是则移除条目并刷新列表否则保留当前清单。流程结束时购物车数据保持一致便于后续结算与订单生成我的购物车管理流程图如图4-4所示图4-4我的购物车管理流程图4.3.3 订单支付流程设计本流程用于规范用户支付的关键控制点。用户提交支付请求后系统判断订单状态是否可支付若是则进入支付渠道选择否则直接结束并提示处理。随后系统判断支付结果是否成功成功则更新订单为已支付并生成支付记录失败则保持未支付状态以便重试。流程确保资金与订单状态一致订单支付流程图如图4-5所示图4-5订单支付流程图4.3.4 商家订单发货与配送管理流程设计本流程用于商家对订单配送过程进行控制。商家进入订单管理后系统判断是否存在待发货订单若是则生成发货单并填写物流信息否进入结束。随后系统判断物流信息是否完整完整则更新配送状态并通知用户不完整则结束并提示补充。该流程保障发货信息准确可追溯订单配送管理流程图如图4-6所示图4-6订单配送管理流程图4.3.5 管理员美妆资讯管理流程设计本流程用于管理员对资讯内容进行审核发布。管理员提交资讯后进入审核环节系统判断内容是否合规合规则进入发布操作不合规则退回修改。修改完成后系统再次判断是否通过复审通过则发布并写入资讯列表未通过则结束并保留待改状态。流程实现内容管控与发布可追踪美妆资讯管理流程图如图4-7所示图4-7美妆资讯管理流程图4.4 数据库设计4.4.1 概念模型设计概念模型是把现实世界抽象成信息世界的抽象过程它从业务对象出发提取出业务对象的关键特征用结构化的语言对系统中各个实体、属性、联系进行描述为之后的逻辑和物理设计提供统一的基础。本系统以商品交易和履约流程为出发点将用户账户、普通用户、商家用户、商品信息、美妆商城、购物车、订单、物流配送、收货地址、评论等实体抽象出来并用主键和外键来表示购买、下单、发货、收货、评价之间的联系。E-R图能够清楚地体现实体间的关系结构可以检验业务闭环是否完备、数据是否一致并可给后面查询以及拓展设计赋予支撑。从概念上讲要保证联系的方向清楚没有孤立的实体还要和业务规则保持一致[18]。全局E-R模型如图4-8所示。图4-8全局ER图根据系统分析系统的主要实体有用户账户、普通用户、商家用户、商品信息、美妆商城、购物车、订单、物流配送、收货地址、评论各个实体具体的属性如下图所示。(1)用户账户实体主要包括用户账户id、账户状态、用户名、密码等。用户账户实体属性如图4-9所示。图4-9用户账户实体属性图(2)普通用户实体主要包括普通用户id、用户姓名、用户手机、审核状态等。普通用户实体属性如图4-10所示。图4-10普通用户实体属性图(3)商家用户实体主要包括商家用户id、商家姓名、商家手机、审核状态等。商家用户实体属性如图4-11所示。图4-11商家用户实体属性图(4)商品信息实体主要包括商品信息id、标题、卖价、商品库存等。商品信息实体属性如图4-12所示。图4-12商品信息实体属性图(5)美妆商城实体主要包括美妆商城id、商品规格、支付状态、商品库存等。美妆商城实体属性如图4-13所示。图4-13美妆商城实体属性图(6)购物车实体主要包括购物车id、用户ID、商品id、数量等。购物车实体属性如图4-14所示。图4-14购物车实体属性图(7)订单实体主要包括订单id、订单号、商品ID、订单状态等。订单实体属性如图4-15所示。图4-15订单实体属性图(8)物流配送实体主要包括物流配送id、订单号、配送状态、签收状态等。物流配送实体属性如图4-16所示。图4-16物流配送实体属性图(9)收货地址实体主要包括收货地址id、姓名、手机、地址等。收货地址实体属性如图4-17所示。图4-17收货地址实体属性图(10)评论实体主要包括评论id、评论人ID、内容、来源ID等。评论实体属性如图4-18所示。图4-18评论实体属性图4.4.2 数据库逻辑设计本系统数据库逻辑设计以概念E-R模型为基础把用户账户、用户类型、商品、商城发布、交易与履约等主要业务对象映射成关系表用主键保证记录的唯一性用用户ID、商品ID、订单号等外键建立实体间的关联支持注册登录、加购下单、发货签收、地址管理、评价互动等流程在字段上先保留关键标识、核心业务属性和必要的状态字段兼顾查询效率和数据的一致性为之后的索引和约束预留空间[19]。(1)用户账户表主要是用来存储系统登录与账户基础信息。主要包括用户账户id、用户名、密码、手机号码、邮箱、账户状态等字段。用户账户表如表4-1所示。第五章 系统实现5.1 用户功能实现5.1.1 美妆资讯查看功能实现美妆资讯查看功能主要是对美妆相关资讯内容进行信息展示系统能够根据存储的资讯内容进行动态加载展示用户可在该模块完成资讯内容的查阅操作系统对资讯访问进行记录与分类管理。美妆资讯查看界面如图5-1所示。图5-1美妆资讯查看界面5.1.2 我的地址管理功能实现我的地址管理功能主要是对用户个人地址信息进行维护管理该功能实现用户能够新增、修改或删除个人地址用户可在系统中有效管理个人收货信息系统对变更的地址信息进行自动保存和检索。我的地址管理界面如图5-2所示。图5-2我的地址管理界面5.1.3 美妆商城查看功能实现美妆商城查看功能主要是对美妆商品信息进行集中展示系统提供商品分类浏览、筛选等能力用户能够在该模块中查看各类商品的基础信息系统对显示内容进行实时刷新与更新。美妆商城查看界面如图5-3所示。图5-3美妆商城查看界面5.1.4 订单支付功能实现订单支付功能主要是对用户下单后支付流程进行集中处理该模块完成支付方式选择及支付操作用户可在下单后完成支付环节系统对支付信息进行状态校验与记录保存。订单支付界面如图5-4所示。图5-4订单支付界面5.1.5 我的订单管理功能实现我的订单管理功能主要是对用户历史订单信息进行集中管理系统支持订单查询、状态显示和必要的后续操作用户能够追踪自身订单的处理进度系统对订单数据信息持续维护。我的订单管理界面如图5-5所示。图5-5我的订单管理界面5.1.6 我的购物车管理功能实现我的购物车管理功能主要是对用户待购买商品列表进行整理系统支持商品增删与数量调整操作用户可灵活管理购物车内商品状态系统对购物车内容进行实时同步与保存处理。我的购物车管理界面如图5-6所示。图5-6我的购物车管理界面5.1.7 订单配送查看功能实现订单配送查看功能主要是对已生成订单的配送信息进行状态查询该功能实现用户能够随时掌握订单配送进度用户可获取订单派送过程的相关信息系统对配送进度进行周期性更新处理。订单配送查看界面如图5-7所示。图5-7订单配送查看界面5.2 商家用户功能实现5.2.1 美妆商城管理功能实现美妆商城管理功能主要是对商家上架商品信息进行系统化管理本模块能够支持商品录入、维护及下架商家用户可及时调整自身商品展示和销售内容系统对商品数据进行集中处理和关联管理。美妆商城管理界面如图5-8所示。图5-8美妆商城管理界面5.2.2 分类管理功能实现分类管理功能主要是对美妆商品分类进行结构化维护系统提供分类新增、修改和删除等操作商家用户能够灵活设置和调整商品所属类别系统完成分类结构的自动同步与存储。分类管理界面如图5-9所示。图5-9分类管理界面5.2.3 订单管理功能实现订单管理功能主要是对商家接收到的所有订单进行集中处理该模块实现订单审核、发货等功能商家用户可查询、处理每一笔订单系统对订单状态及相关信息持续管理和更新。订单管理界面如图5-10所示。图5-10订单管理界面5.2.4 订单配送管理功能实现订单配送管理功能主要是对商家负责订单的配送流程进行节点控制系统支持配送状态设定与数据反馈商家用户能够监督并调整订单配送进度系统对配送信息进行状态归档与进度追踪。订单配送管理界面如图5-11所示。图5-11订单配送管理界面5.3 管理员功能实现5.3.1 最新公告管理功能实现最新公告管理功能主要是对系统公告内容进行统一管理管理员可发布、修改、删除最新系统公告系统实现公告内容的快速调整与分发系统对公告发布时间和状态进行有效记录。最新公告管理界面如图5-12所示。图5-12最新公告管理界面5.3.2 美妆资讯管理功能实现美妆资讯管理功能主要是对平台内所有资讯内容实施集中管理该模块实现资讯的录入、更新及下线管理员能够对资讯内容周期维护系统对资讯数据同步与调整信息自动归档。美妆资讯管理界面如图5-13所示。图5-13美妆资讯管理界面5.3.3 资讯分类管理功能实现资讯分类管理功能主要是对平台所有资讯类别进行结构组织系统为管理员提供分类信息维护功能管理员可调整、增删资讯分类系统对分类层级与结构数据自动调整。资讯分类管理界面如图5-14所示。图5-14资讯分类管理界面5.3.4 美妆商城管理功能实现美妆商城管理功能主要是对平台全局商品信息进行综合管理该功能实现商品统一审核与调整管理员能够更新商品展现和销售内容系统对全局商品数据进行批量同步操作。美妆商城管理界面如图5-15所示。图5-15美妆商城管理界面5.3.5 分类管理功能实现分类管理功能主要是对系统内所有商品分类结构进行维护系统支持对商品分类的增删查改管理员可自主完善分类信息系统对分类关联数据进行统一管理和更新。分类管理界面如图5-16所示。图5-16分类管理界面5.3.6 订单管理功能实现订单管理功能主要是对平台全部订单状态进行统一调度管理管理员可筛查与维护各类订单信息系统对订单业务流转过程进行自动归档处理订单管理功能具备高效批量管理能力。订单管理界面如图5-17所示。图5-17订单管理界面5.3.7 订单配送管理功能实现订单配送管理功能主要是对全平台订单配送状态进行实时跟踪系统为管理员提供配送进度核查及记录维护管理员可实时监控各项配送节点系统完成配送信息的统一归档处理。订单配送管理界面如图5-18所示。图5-18订单配送管理界面第六章 系统测试6.1 系统测试目的系统测试的主要目的就是检验基于Spring Boot和Vue搭建起来的美妆购物系统在功能实现、模块配合以及全流程数据一致性的表现对业务逻辑和设计规范的契合程度进行全方位的检验。系统测试是对各个子模块的独立、协同工作进行检测保证每一个功能闭环满足设计要求。在测试过程中兼顾异常输入处理能力以及系统对错误边界控制能力按照平台上线风险管控要求用系统性压力和功能覆盖来排除潜在不稳定风险提高整体业务的可靠性以及用户体验[20]。6.2 系统测试的原则与方法美妆购物系统测试过程以黑盒测试为主对用户界面和交互流程进行全方位的检验用典型业务场景来覆盖测试。所有的核心功能都用手工和自动相结合的方式进行测试保证多角色操作路径下的关键业务闭环。测试用例严格按照系统需求文档中给出的功能模块进行测试各个子系统之间通过端到端链路模拟来保证正常流转和异常处理场景的覆盖可以有效地发现系统边界以及异常数据下存在的潜在漏洞。系统测试环节中加入安全、逻辑一致性检验保证各个业务规则执行正确、后端服务调用稳定。6.3 测试用例(1)美妆资讯查看功能美妆资讯查看功能用于为用户提供最新的美妆相关信息美妆资讯查看功能测试如表6-1所示。