小区鲜菜在线订购系统

摘要网购已经成为人们生活的新常态，鲜菜在线订购系统作为一种便利的购物方式，在人们的日常生活中得到了广泛的应用。本论文旨在设计和实现一套小区鲜菜在线订购系统，以提供方便快捷的在线订购服务，并为商家提供更为高效的管理和配送服务。该系统分为管理员端和顾客端两部分，管理员端采用了Vue.js框架和ElementUI组件库，顾客端使用Uniapp框架进行开发，采用响应式Web设计技术，以支持移动用户。后端使用SpringBoot、MybatisPlus框架进行开发，使用SpringSecurity安全框架保护程序的安全性，使用MySQL数据库存储数据，同时使用Redis数据库存储临时数据，并使用Nginx部署静态资源。本论文重点介绍了该系统的需求分析、概要设计、详细设计与实现以及系统测试。在需求分析部分，本文对系统进行了模块的划分。在概要设计部分，本文介绍了数据库表设计和数据库连接方面的设计方案。在详细设计与实现部分，展开论述了管理员端和顾客端的各个模块的设计与实现，管理员端包括用户管理、商品管理、订单管理、推广管理和数据统计等模块，管理员通过这些模块维持商城的运作；顾客端包括首页浏览、地址管理、购物车、订单、支付和联系商家等模块，顾客通过这些模块在商城中进行下单订购。最后，本文对系统测试部分进行了详细的论述，测试结果表明该系统具备较好的可靠性，并具有较好的用户体验。该系统可以为小区内的居民提供方便快捷的在线订购服务，该平台将提供新鲜、健康、方便的蔬菜产品，并且为消费者提供更加便捷和安全的购买体验，同时也可以为商家提供更为高效的管理和配送服务。关键词：Vue.js框架；Uniapp框架；SpringBoot框架；小区鲜菜；在线订购AbstractOnlineshoppinghasbecomeanindispensablepartofpeople`sdailylives.Asaconvenientshoppingmethod,onlinevegetableorderingsystemshavegainedwidespreadpopularityinpeople'sdailylives.Thispaperaimstodesignandimplementacommunityonlinefreshvegetableorderingsystemtoprovideconvenientandefficientonlineorderingservicesforresidents,atthesametime,offermoreefficientmanagementanddeliveryservicesformerchants.Thesystemconsistsoftwoparts:theadministratorendandthecustomerend.TheadministratorendisdevelopedusingtheVue.jsframeworkandElementUIcomponentlibrary,whilethecustomerendisdevelopedusingtheUniappframework,employingresponsivewebdesigntechniquestosupportmobileusers.Onthebackend,thesystemisdevelopedusingtheSpringBootframeworksandMybatisPlusframeworks.UsingSpringSecurityframeworktoprotectthesecurityoftheapplication.UsingMySQLdatabasetostoredata，simultaneouslyusingRedisdatabasetostoretemporarydata,andNginxisusedtodeploystaticresources.Thispaperprimarilyfocusesontherequirementanalysis,high-leveldesign,detaileddesignandimplementation,andsystemtestingoftheproposedsystem.Intherequirementanalysissection,thepaperdelineatesthesystemmodules.Thehigh-leveldesignsectionpresentsthedesignsolutionsfordatabasetabledesignanddatabaseconnectivity.Thedetaileddesignandimplementationsectiondelvesintothedesignandimplementationofvariousmodulesforboththeadministratorandcustomerend.Theadministratorendmoduleincludesfeaturessuchasusermanagement,goodsmanagement,ordermanagement,promotionmanagement,anddatastatistics,whichenableadministratorstomaintaintheoperationofthesystem.Thecustomerendmoduleincludesfeatureslikehomepagebrowsing,addressmanagement,shoppingcart,order,payment,andcontactingmerchants,enablingcustomerstoplaceorderswithinthesystem.Finally,thepaperprovidesacomprehensivediscussiononsystemtesting,revealingfavorablereliabilityanduserexperiencebasedonthetestresults.Cometotheconclusion,thesystemfacilitatesconvenientonlinefreshvegetableorderingforresidentsinthecommunity,offeringfresh,healthy,andconvenientvegetableproducts,andprovidingconsumerswithamoreconvenientandsecurepurchasingexperience.Moreover,itenablesmerchantstostreamlinetheirmanagementanddeliveryservicesmoreefficiently.Keywords：Vue.jsframework;Uniappframework;SpringBootframework;Freshvegetableofcommunity;Onlineordering

目录引言 [16]。4.4.1数据库逻辑结构设计接的下来在数据库逻辑结构设计阶段，需要定义每个实体的属性和约束，并确定它们之间的关系。对于小区鲜菜在线订购系统，主要有以下几个实体：（1）员工，该实体是由员工编号、姓名、性别、手机号、邮箱号、住址、密码、职位、薪资、角色编号、入职时间、状态等几个属性组成的。（2）商品，该实体是由商品编号、商品名称、进货价、进货单位、所属分类编号、销量等几个属性组成的。（3）商品分类，该实体是由分类编号、分类名称、分类图标、分类级别、父类编号等几个属性组成的。（4）库存，该实体是由库存编号、商品编号、库存量、上架单位、上架价格、是否上架等几个属性组成的。（5）订单，该实体是由订单编号、会员编号、收货地址编号、订单消费金额、支付方式、是否已支付、是否已完成、是否已取消、支付渠道交易号、订单创建时间、支付时间、预约时间、是否售后等几个属性组成的。（6）订单详情，该实体是由订单详情编号、订单编号、商品编号、商品价格、数量、总价等几个属性组成的。（7）配送，该实体是由配送编号、订单编号、员工编号、收货地址编号、预约配送时间、是否配送完成等几个属性组成的。（8）售后，该实体是由售后编号、订单编号、会员编号、售后类型、申请原因、详细原因、是否已受理、商家回复、是否退款等几个属性组成的。（9）推广，该实体是由推广编号、商品编号、商品名称、推广内容、推广图片等几个属性组成的。（10）会员，该实体是由会员编号、名称、性别、生日、手机号、邮箱号、密码、城市、头像、角色编号等几个属性组成的。（11）收货地址，该实体是由收货地址编号、会员编号、收货人姓名、收货地址、详细地址、是否默认地址、手机号、标签等几个属性组成的。（12）购物车，该实体是由购物车编号、会员编号、商品编号、数量等几个属性组成的。（13）聊天记录，该实体是由聊天记录编号、会员编号、聊天内容、未读数量等几个属性组成的。4.4.2系统E-R图设计在设计数据库的过程中，E-R图能将系统的实体和它们之间的关系以图形化的方式表示出来，用于描述数据库中实体之间的联系和约束条件。小区鲜菜在线订购系统的E-R图如下图4-6所示。图4-6系统E-R图4.4.3数据库表设计为满足系统需求，设计了用户表、商品表、订单表等多个数据库表，用于存储系统所需的数据。下面对重要的几个表进行详细设计的说明，如下：（1）员工表，表名为employee，其中employee_id作为表的主键，结构如下表4-2所示。表4-2员工表列名字段类型长度是否为空备注employee_idbigintNO主键Idemployee_namevarchar24YES员工姓名employee_phonevarchar11YES员工手机号employee_emailvarchar32YES员工邮箱号employee_passwordvarchar16YES员工密码employee_positionintYES员工职位0管理员1普通职员2配送员employee_salarydecimalYES员工薪水role_idbigintYES角色idcreate_timebigintYES行创建时间update_timebigintYES行更新时间is_deletedintYES1删除0未删除versionvarchar10YES乐观锁employee_statusintYES1启用0禁用employee_addressvarchar32YES家庭住址employee_sexintYES1男0女（2）商品表，表名为goods，其中goods_id作为表的主键，结构如下表4-3所示。表4-3商品表列名字段类型长度是否为空备注goods_idbigintNO主键Idgoods_namevarchar20YES商品名称goods_descriptionvarchar64YES商品描述goods_in_pricedecimalYES进货价goods_unitvarchar10YES商品计量单位category_idbigintYES分类idgoods_salesintYES商品销量goods_statusintYES1禁用0未禁用create_timebigintYES行创建时间update_timebigintYES行更新时间is_deletedintYES1已删除0未删除versionvarchar10YES乐观锁（3）订单表，表名为orders，其中orders_id作为表的主键，结构如下表4-4所示。表4-4订单表列名字段类型长度是否为空备注order_idbigintNO主键Iduser_idbigintNO用户Idreceive_idbigintYES收货idorder_pictruevarchar2550YES订单封面图片order_costdecimalYES订单总金额order_pay_methodintYES1支付宝0微信order_is_payintYES1已支付0未支付order_is_completeintYES1完成0未完成is_cancelintYES1已取消0未取消order_alipay_trade_novarchar20YES支付宝支付编号order_wechat_trade_novarchar20YES微信支付编号order_create_timevarchar20YES订单生成时间order_pay_timevarchar20YES订单支付时间create_timebigintYES行创建时间update_timebigintYES行更新时间is_deletedintYES1已删除0未删除versionvarchar10YES乐观锁delivery_appointment_timevarchar20YES预约时间is_serviceintYES1售后中0未售后（4）会员表，表名为user，其中user_id作为表的主键，结构如下表4-5所示。表4-5会员用户表列名字段类型长度是否为空备注user_idbigintNO主键Iduser_namevarchar10YES用户名称user_sexintYES1男0女用户性别user_birthdaybigintYES用户生日user_phonevarchar11YES用户手机号user_emailvarchar32YES用户邮箱号user_passwordvarchar16YES用户密码user_cityvarchar32YES用户城市user_levelvarchar1YES用户会员等级user_avatarvarchar127YES用户头像urlrole_idbigintYES角色iduser_statusvarchar1YES1已禁用0未禁用user_register_timebigintYES用户注册时间create_timebigintYES行创建时间update_timebigintYES行更新时间is_deletedbigintYES1删除0未删除versionvarchar10YES乐观锁open_idvarchar20YES第三方登录给的id4.5本章小结本章介绍了系统的概要设计，包括总体架构、功能模块结构、开发环境与实现方案以及数据库设计。通过合理的设计和选型，系统能够提供全面的功能，并确保高效的开发和可靠的数据管理。通过系统的概要设计，为后续章节的详细设计与实现奠定了基础。下一章将进一步详细设计和实现各功能模块，通过系统的详细设计与实现，将逐步完善系统，确保其具备良好的性能和功能，满足用户的需求。5系统详细设计与实现本章主要介绍的是系统的详细设计与实现部分，分别说明了后端服务框架的搭建、管理员端和顾客端的具体设计与实现过程，介绍了这两个端各个功能模块的具体实现方式。5.1后端服务框架的搭建5.1.1Mysql数据库的连接系统使用MySQL数据库存储和管理数据。配置数据库连接参数后，系统可以与MySQL数据库建立连接，并执行SQL语句进行数据的读写操作。利用MyBatis持久层框架，配置数据源和连接池的相关参数，实现了数据库连接的获取和释放。图5-1展示了连接数据库的YAML配置文件代码。图5-1连接数据库5.1.2MyBatis-plus的配置系统使用MyBatis-plus进行数据持久层的业务处理，它提供了许多便捷的功能和增强特性，简化了MyBatis的配置和使用过程。首先需要添加依赖，通过Maven引入相应的依赖来获取MyBatis-Plus的核心功能。接着需要根据项目的需求在YAML文件中配置MyBatis-plus的相关选项，在本系统中，需要配置“map-underscore-to-camel-case”使得在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射。其次需要配置主键的生成策略，使用“ASSIGN_ID”作为数据库表主键的生成策略，即每次使用插入语句时MyBatis-plus都会自动生成一个不重复的雪花ID作为主键。并且本系统采用MyBatis-plus的逻辑删除功能，逻辑删除是一种在数据库中标记数据为已删除状态而不是物理删除的策略。逻辑删除的优势在于保留了被删除数据的历史记录和相关信息，并且可以在需要的时候进行恢复。这需要在配置文件中设置“logic-delete-value”为“1”，这样就会在原本要使用delete语句时候转而使用update语句把表中的is_deleted字段的值设置为1，标记为已删除。MyBatis-plus的配置如下图5-2所示。图5-2MyBatis-plus的配置接着，创建Mapper接口，使用MyBatis-Plus提供的通用Mapper接口，并配置Mapper接口的扫描路径，让MyBatis-Plus自动扫描并注册Mapper接口。最后，根据系统的实际需求，在MyBatisPlusConfig配置类中配置了分页插件和乐观锁插件，分页插件提供了简单、灵活和高效的分页功能，使得在数据库查询中进行分页操作变得更加便捷和直观。通过合理配置和使用分页插件，可以轻松地实现分页查询需求，提升开发的效率和用户的体验。乐观锁插件用于解决并发操作下的数据一致性问题，通过使用乐观锁插件，可以确保并发操作下的数据一致性，提升系统的稳定性和可靠性。5.1.3Redis数据库的配置在小区鲜菜在线订购系统中，采用的是前后端分离模式进行开发的传统SSM项目开发过程中使用Session存储用户信息的操作已无法实现，所以本系统采用Redis的主要作用是存储用户的临时登录信息，配合SpringSecurity框架实现鉴权认证功能，同时实现了更为安全的验证码登录方式。为了正确使用Redis数据库，需要进行相应的配置。首先，在项目的构建文件中引入Redis依赖，并在配置文件中设置Redis的连接信息，包括主机名、端口号、数据库号和密码。其次，为了高效地管理与Redis服务器的连接，可以配置缓存数据的过期时间。连接Redis数据库的YAML代码如下图5-3所示。图5-3Redis配置最后，通过配置RedisTemplate来操作Redis数据库，设置连接工厂、键和值的序列化方式等。RedisTemplate封装了与Redis数据库的交互细节，隐藏了底层的连接管理和数据序列化过程，使开发者可以更专注于业务逻辑的实现。它提供了一种类型安全的方式来操作Redis数据，支持各种数据类型的存储和读取，如字符串、哈希、列表、集合和有序集合等。RedisTemplate配置如下图5-4所示。图5-4RedisTemplate配置5.1.4SpringSecurity安全框架的搭建对于一个Web应用程序而言，保护系统的安全是至关重要的。通过使用SpringSecurity，我们可以在应用程序中实现强大的安全功能，确保只有经过授权的用户才能访问敏感的URL和操作。这可以有效地防止未经授权的用户获取敏感信息、执行危险操作或对系统造成破坏。为了达到这样的一个目的，首先，需要在项目的构建文件中添加SpringSecurity的依赖项，确保能够引入所需的库文件。然后配置安全规则，创建一个安全配置类，该类需要继承自SpringSecurity提供的安全配置类WebSecurityConfigurerAdapter。。WebSecurityConfigurerAdapter配置类如下图5-5所示。图5-5WebSecurityConfigurerAdapter配置类在本系统中，定义了两种身份的用户，分别为会员用户和管理员，所以相应的在用户认证方面也相应的定义了两种不同的身份认证逻辑，从上图5-3可以看到，分别是frontAuthenticationProvider会员用户认证类和employeeAuthenticationProvider管理员认证类，最后在configure方法中配置好这两种不同的身份认证逻辑。这两个身份认证类，其主要作用是在对应的用户进行登录操作时对其身份进行认证，例如校验密码是否正确，在校验密码正确后会把用户的身份信息封装起来，其中包括了用户的基本信息和用户的角色身份。同时配置了JWTAuthenticationTokenFilter过滤器，在该过滤器是本系统进行授权管理的关键。在开发过程中通过配置访问控制规则，可以定义不同角色或权限的用户可以访问哪些URL或执行哪些操作。在需求分析的过程中已经细分了系统中的所有角色，分别是游客、会员用户和管理员，而在详细设计时候，管理员又将细分为普通店员、店长管理员、配送员、老板root等角色，使用注解或配置方式进行授权管理，确保系统中的资源和功能只能被授权角色访问。JWTAuthenticationTokenFilter过滤器会对每一个请求进行拦截，判断其是否携带token字段，若是拦截到一个携带token字段的请求，会把该token在Redis数据库中对应的用户身份信息取出，SpringSecurity框架会根据用户身份信息中的角色信息判断该请求是否具备权限进行访问，从而实现访问控制。与此同时，在configure方法中配置了允许跨域访问，使得前端的请求不会因为跨域问题而收不到响应的结果，接着配置了服务端中不需要任何权限就能访问的接口，把这些接口设置为允许匿名访问和允许所有人访问，例如登录、获取商品和分类信息等接口。最后，还自定义了AccessDeniedHandlerImpl和AuthenticationEntryPointImpl处理器，AccessDeniedHandlerImpl处理器会捕获到发送请求的用户所具备的权限不足时所抛出的异常，AuthenticationEntryPointImpl会捕捉到与登录相关的异常，当捕获到异常，会设置请求状态码401并返回具体的请求失败原因给前端。5.1.5Nginx部署静态资源本系统作为一个面向大众的购物系统，将会有很多图片文件需要展示给各种不同的角色用户，此时需要对这些图片进行一个统一的管理，并制定一个合理的访问方式，使用Nginx作为图片服务器可以有效地改善图片服务的效率和用户体验。其部署流程如下：(1)安装Nginx，首先需要安装Nginx软件，本系统采用的版本为1.22.1。(2)部署图片文件，将需要访问的图片文件放置到指定的图片目录中，确保Nginx可以读取到这些文件，本项目中的所有图片存储在Nginx安装目录的static目录中。(3)编辑Nginx配置文件，进入配置文件目录，编辑配置文件nginx.conf，在里面配置了端口号8091作为图片访问的端口号，配置了资源访问URL“/static/pictures/”映射Nginx目录下存放图片的“static/pictures/”文件夹。配置文件如下图5-6所示。图5-6nginx.conf配置文件5.1.6支付宝API的接入接入支付宝API能够为电商平台提供多种支付方式、支付安全保障、支付功能和工具、交易记录和结算服务，以及营销和推广工具，提升用户体验、促进交易完成和增加销售额。因此，本系统接入了支付宝的官方API，接入支付宝的流程如下：(1)注册支付宝开发者账号，访问支付宝开放平台（）注册一个开发者账号，并创建应用获取相应的AppID、密钥等信息。(2)引入相关依赖，在pom.xml文件中添加支付宝支付相关的依赖。(3)配置支付宝参数，在YAML文件中配置支付宝的相关参数，包括AppID、密钥、公钥、网关地址、异步通知回调地址等。具体的YAML代码如下图5-7所示。图5-7支付宝YAML代码(4)创建AlipayConfig配置类并实现ApplicationRunner接口初始化支付宝客户端。在项目中创建支付接口，用于处理支付请求。调用相关接口进行支付操作，如生成支付链接、发起支付等。(5)在项目中创建接收支付结果通知的接口，支付宝支付成功后，会向这个接口异步通知回调地址发送支付结果通知，处理支付结果并进行相应的业务逻辑处理。同时，创建另一种获取支付结果的接口，用于前端在进入支付页面后，主动轮询调用该接口进行查询支付进度。5.2管理员端管理员端是小区鲜菜在线订购系统的核心管理界面，它包含了用户管理、商品管理、订单管理、推广管理、数据统计和联系买家等多个功能模块。每个模块都实现了特定的功能和操作，与后端API交互完成相应的业务逻辑。下面将详细介绍每个功能模块的实现过程。管理员端是供给小区鲜菜在线订购的员工所使用的，而系统的设计过程中定义了每个员工都具备不同的角色身份，不通的角色具备不同的权限，当员工的角色为店员时，该员工仅仅具备查看信息的权限，不允许进行修改信息，当员工的职位为管理员时，才具备在本系统中的所有权限。管理员端的系统总体流程图如下图5-8所示。图5-8管理员端系统总体流程图5.1.1登录模块本系统的一个重要功能模块是登录模块，它负责用户身份验证和登录控制。该模块主要实现了用户账号验证、密码验证和登录状态管理等功能。管理员端的登录方式主要是通过手机号/邮箱号与数据库中的密码进行匹配校验。登录流程如下图5-9所示。图5-9管理员登录流程图管理员前端登录逻辑如下图5-10所示。图5-10管理员前端登录逻辑图5-3所示的是管理员在前端页面的登录逻辑，当管理员在填充登录信息后提交，会调用adminLogin()方法，方法内首先对输入的手机号/邮箱号进行合法性校验，校验通过向后端发送请求，请求体为手机号/邮箱号和密码，然后拿到后端响应的数据，判断是否登录成功，登录成功则把响应数据中的用户信息存入vuex进行状态管理，并跳转至管理员界面。后端具体的业务处理流程如下图5-11所示。图5-11管理员登录时序图从图5-4的时序图可以看出，当请求来到后端，会先经过在SpringSecurity配置类中事先配置好的过滤器JWTAuthenticationTokenFilter，这个过滤器的作用是对每个请求进行鉴权和认证，方法是通过token记录用户的登录状态和角色信息。当请求来到过滤器，会执行doFilterInternal()方法，这个方法会收到请求，并且会查看请求头中是否存在Authorizaion字段，是因为Authorization中会携带token信息，未携带token信息的请求，分为两种情况，一种是普通游客请求，无需鉴权，另一种则是登录请求。当请求判定为登录请求，则执行filterChain.doFilter()放行该请求。随即请求会来到LoginController控制器类，进入正常的请求流程，根据请求的url执行对应的adminLogin()方法。在该方法中拿到用户登录时发送的登录信息，通过自定义的手机/邮箱校验工具类校验前端传入的手机/邮箱格式是否正确，若校验通过，把会把登录信息封装进SpringSecurity框架的UsernamePasswordAuthenticationToken类型变量，并把该变量作为参数传入并调用employeeAuthenticaionProvider.authenticate()方法，在该方法中会进而调用employeeUserDetailService.loadUserByUsername()方法，在方法中会查询数据库，查询该账户是否存在、判断该用户是否为禁用状态、检验用户是否具备足够的权限登录系统，若这三者皆通过，则获取该用户的角色权限信息并封装进EmployeeUserDetail中返回。回到上一级，通过BCryptPasswordEncoder.matches()将前端传入的未加密的密码与EmployeeUserDetail中数据库查询出来的已加密的密码进行比对，若匹配失败则抛出BadCredentialsException异常，通过全局异常处理捕获到异常，判断其为密码校验失败并把登陆结果响应给前端，若匹配成功，则把员工登录信息返回给上一级。最后，adminLogin()方法会获取员工登录信息，并用员工Id生成token字段，然后把员工登录信息以键值对的形式存储到Redis缓存数据库，键是员工id，值是员工登录信息，最后把用户信息和token发送给前端，接下来的每一次前端请求都将携带该token信息，用于鉴权校验。后端的具体实现如下图5-12所示。图5-12管理员登录代码5.1.2用户管理模块在小区鲜菜在线订购系统中，用户管理模块分为会员用户管理和员工管理，以下分为两点展开：（1）会员用户管理会员用户是系统中已经注册了的用户，会员用户管理是小区鲜菜在线订购系统中用户管理模块的一个子模块，管理员可以通过这个子模块管理会员的基本信息，包括获取全部会员用户列表、搜索用户、添加用户、编辑用户基本信息、启用/禁用用户、删除用户和重置用户密码。①获取全部会员用户列表，当管理员进入该页面，会向后端发送请求，请求携带的请求体有关键字query、页码值pageNum、每页大小pageSize。后端的userController控制类的getUserList()方法会处理这个请求，在这个方法中会根据请求体中的页码值和每页大小构造分页构造器，最终得到的结果会分好页并返回给前端。②搜索用户，其业务逻辑和获取全部会员列表一样，只需把搜索框中的值赋值给关键字query，在后端中把关键字当查询条件注入sql语句，即可查询出关键字相关数据。③添加用户，打开添加用户的对话框，管理员在对话框中的表单输入用户的基本信息，基本信息包括用户名、手机、邮箱、密码，点击添加即可向后端发送请求，后端会查询数据库判断手机号和邮箱号是否已被绑定，若已绑定提示前端添加失败，若未绑定则通过INSERT语句插入数据库。④编辑用户基本信息，打开编辑用户信息对话框，对话框中的表单显示用户的基本信息，管理员可以修改表单中的信息，修改完成后发送请求，同理后端会判断手机号和邮箱号是否已被绑定，随后通过UDDATE语句更新数据。⑤启用/禁用用户，通过UPDATE语句修改用户表中的user_status的值为0，代表该用户已被禁用，修改为1则为已启用。⑥删除用户，向后端发送删除用户的请求，携带的参数为用户的id，后端并不会把用户的数据从物理意义上真正的删除，而是使用逻辑删除字段is_deleted标记某条数据是否删除，若该字段为1则代表已删除，若为0则代表未删除。⑦重置用户密码，在小区鲜菜在线订购系统中，用户注册时的默认密码为“12345678”，管理员点击重置密码，即可把用户的密码修改为“12345678”。会员用户管理的前端页面如下图5-13所示。图5-13会员用户管理前端页面（2）员工用户管理管理员可以通过这个子模块，对店内的所有员工的信息进行管理。包括获取所有员工列表、搜索员工、编辑员工基本信息、启用/禁用员工、删除员工和重置密码。因为该子模块的业务逻辑与会员用户管理的业务逻辑基本一致，所以不做过多赘述。5.1.3商品管理模块商品管理模块可分为三个部分，分别为商品管理、商品分类管理、货架库存管理，该模块的流程图如下所示。（1）商品管理管理员可通过该模块管理商城内的所有商品信息。下面展开细说添加商品和编辑商品的具体业务逻辑。添加商品的流程图如下图5-14所示。图5-14添加商品流程图①添加商品，管理员点击添加商品按钮，进入添加商品模块，在添加商品模块中，需要填写商品基本信息表单，包括商品进货价、商品计量单位、商品名称、商品分类和商品描述，填写完基本信息可以进入下一步填写商品属性，属性的形式为键值对，键为属性名，值为属性值，最后一步为上传商品的图片。当管理员点击添加按钮，会调用addGoods()方法，在方法中会依次校验添加商品模块中的基本信息表单和商品属性表单的合法性，当这两个表单都符合要求时，会依次向后端三次请求。第一次请求，添加商品的基本信息，后端会把商品的基本信息插入商品表中，并返回这个商品的雪花id给前端。第二次请求，添加商品的属性信息，携带参数为当前端拿到商品id。最后会发起第三次请求，这次请求为上传商品的图片列表。前端添加商品具体业务逻辑如下图5-15所示。图5-15前端添加商品业务逻辑代码图5-16为上传商品图片的后端业务逻辑。图5-16上传商品图片后端业务逻辑从图5-16可以看出，当前端发起上传图片请求，后端会调用uploadGoodsPicture()方法，在该方法中会收到前端上传的文件和对应商品的id，然后调用自定义工具类UploadFields的upload()方法，在该方法中会使用UUID重新生成文件名，防止文件名称重复造成文件覆盖，同时把文件存入本地磁盘，并把新的文件名返回。上一级收到文件名后，通过INSERT语句把图片id和文件名插入数据库保存。②编辑商品，管理员点击编辑商品按钮后会弹出一个对话框，在此对话框可编辑商品的基本信息、商品属性和商品图片。可以对商品的名称、描述、进货价、单位、分类、属性和图片进行编辑。（2）商品分类管理管理员可通过该模块管理商城内的所有商品分类信息，包括获取分类列表、添加分类、编辑分类和删除分类。下面展开细说添加分类的具体实现细节。①添加分类，管理员点击添加分类按钮后会弹出一个对话框，在此对话框可以填写分类信息，为系统添加一个商品分类。商城中分类有一级分类和二级分类，若在添加分类的时候，在父级分类下拉框中选中了某一项，则添加的分类为二级分类，若不选，则添加的分类为一级分类。②货架库存管理在小区小菜在线订购系统中，每样商品都有与之对应的库存信息，商品信息与库存信息分开管理，可以更好的统计商品的售卖情况。管理员可以通过该模块管理商城的货架库存信息，包括获取库存信息列表、查询库存信息、上下架商品和编辑上架信息。5.1.4订单管理模块订单管理模块分为三个子模块，分别为订单管理、配送管理和售后管理。（1）订单管理管理员可以通过该模块管理订单信息，包括获取订单信息列表、搜索订单信息、修改订单收货地址和取消订单。下面从修改订单收货地址和取消订单展开这两个功能的实现细节。①修改收货地址，管理员点击修改收货地址按钮后，弹出对话框，编辑收货地址表单，发起请求，请求体为新的收货地址信息，后端收到请求后通过UPDATE语句修改配送信息中的地址信息。修改收货地址前端页面如下图5-17所示。②取消订单，管理员点击取消按钮后，向后端发送取消订单的请求，请求参数为订单id。后端收到请求后，首先查询数据库，判断该订单信息是否存在、该订单是否未完成、该订单是否未被取消，若都满足条件，则通过UPDATE语句把该订单信息的is_cancel字段设为1并保存，代表该订单已被取消。其次还要判断该订单是否已支付，若未支付，则会直接把订单取消，若已支付，则需要进入该订单的支付渠道的退款流程。图5-17修改订单收货地址（2）配送管理管理员可以通过该模块管理配送信息，该模块的主要功能有获取配送信息列表、查询配送信息、确认送达。下面将展开对确认送达功能的实现细节。①确认送达，管理员可以对已支付并且未完成配送的订单进行配送进度上的操作，在配送员安全平稳地把商品送到顾客手上后，可以在配送管理模块中点击确认送达按钮，把配送信息和订单信息设置为已完成状态。当管理点击确认送达后，将把配送id当做参数向后端发送请求，后端收到请求后，从数据库中获取到对应的配送信息，把该配送信息的delivery_is_completed字段设为1，代表配送已完成，并且把当前系统时间的时间戳赋值给delivery_completed_time，同时还要从数据库获取与该配送信息对应的订单信息，把该订单的order_is_completed设为1，最后通过UPDATE语句更新两个表的数据。（3）售后管理管理员可以通过该模块管理用户发起的售后申请信息，主要功能有获取售后信息列表、搜索售后信息、处理售后申请。下面将展开处理售后申请的实现细节。①处理售后申请，管理员可以通过点击去处理按钮，对用户发起的售后申请进行处理。当用户点击去处理按钮后，将弹出处理售后请求的对话框，对话框中的表单有退款处理的下拉框，管理员可以通过此下拉框决定是否同意退款，表单中还有回复买家的文本框，管理员可在此文本框输入对于该售后申请的处理意见。当管理员把表单填写完整，点击确定即可发起请求，后端收到请求后，首先判断是否同意退款，若同意退款，则走该订单的支付渠道的退款流程。接着，需要把该售后信息的service_is_completed字段设为1，以及把当前系统时间的时间戳赋值给售后信息的service_completed_time字段，代表该售后已处理完成。其次还需要判断，该订单的配送情况，若该订单属于上门配送，则需要把配送信息的is_cancel字段设为1，代表为已取消。最后判断该订单是否已完成，如若未完成，则需要把下单时扣除的库存数量返还给对应的商品库存信息。5.1.5推广管理模块管理员可以通过该模块管理小区鲜菜在线订购系统的推广信息，主要功能有获取推广信息列表、搜索推广信息、添加推广信息、编辑推广信息和删除推广信息。①添加推广信息，管理员可以点击新增推广信息按钮后，会弹出新增推广信息的对话框，在对话框中，需要填写推广信息表单，商品id、推广名称、推广内容、上传图片，在填写完整表单信息后点击确定，即可向后端发送添加推广信息请求，后端拿到数据，会判断前端传入的商品id是否存在，若存在则通过INSERT语句向数据库插入一条推广信息。5.1.6数据统计模块管理员可以通过该模块查看小区鲜菜在线订购系统在近期的销售情况，主要展示的数据有本月新订单、新订单销售额、总销售额、本月收款、累计收款和新订单销量TOP10。其数据来源于请求后端的getReport方法，在该方法中分为两步获取数据报表数据。第一步获取当月数据的销售数据，具体实现为获取当月1日凌晨0点的时间戳，把该时间戳当做条件，把数据库中所有订单生成时间大于该时间戳的订单查询出来。第二步直接获取全部订单的数据。并把查询出来的数据封装成前端报表所需的格式传给前端。数据统计模块的前端页面如图5-18所示。图5-18数据统计模块前端页面5.1.7联系买家联系买家功能提供了一种便捷的方式，使顾客能够与商家进行沟通和交流。通过联系买家功能，顾客可以向商家提出问题、咨询商品信息、确认订单细节或者反馈意见和建议等。这种双向的沟通机制有助于解决顾客在购物过程中遇到的问题，增加顾客的满意度并提升购物体验。同时，对于商家而言，联系买家功能也提供了一个与顾客建立良好关系、加强客户服务的机会。通过及时回复顾客的疑问和需求，商家可以提高顾客的信任度，增加转化率和忠诚度。因此，联系买家功能在电商系统中起到了重要的沟通桥梁作用，对于促进交易和满足顾客需求具有积极意义。当顾客在顾客端的联系商家模块向商家发送信息时，管理员可在管理员的该模块接收到来自顾客的消息，双方可进行实时的对话，形式为文字和图片。该模块是通过WebSocket网络协议实现的，WebSocket是一种让客户端和服务器能够全双工通信的网络协议，它对实现聊天功能很有帮助。传统的HTTP协议只能单向通信，即客户端请求服务器，服务器返回数据。而聊天应用需要实时的双向通信，即服务器也能主动推送消息给客户端，而不是等待客户端的请求和频繁地给服务器发送请求。通过该WebSocket实现实时在线聊天，主要分为三个部分，其一是与服务器进行连接，其二为发送信息，其三为接收信息。接下开将展开实现联系买家功能的具体实现细节。联系买家模块的前端页面如下图5-19所示。图5-19联系买家前端页面（1）连接服务器当管理员登录成功进入到管理员端首页，首页Home.vue组件的created()函数会调用初始化WebSocket的方法，进行管理员端与后端基于WebScocket协议的连接。前端发起连接请求的实现如图5-20所示。图5-20初始化WebSocket通过上图可以看出，在initWebSocket()方法中，首先会判断浏览器是否支持WebsSocket网络协议，若不支持则提示，若支持则判断是否已存在一个未断开连接的WebSocket请求，若存在则关闭并赋空值。进行完以上两个判断后，使用newWebSocket()与服务端的WebSocket服务进行连接，在构造方法中传入与后端WebSocket服务连接的url，若连接成功，则会调用socket.open()提示连接已打开。后端接收前端的WebSocket连接请求的服务具体实现如下图5-21所示。图5-21后端WebSocket服务具体实现从上图可以看出，WebSockerServer类就是用于处理WebSocket请求的服务类，在这个类中，定义了变量Session，用于接收每个用户连接上WebSocket服务所产生的Session会话，并且定义一个类型为ConcurrentHashMap的静态变量websocketMap，ConcurrentHashMap是Java中的一个线程安全的哈希表实现，它继承自HashMap并添加了并发访问的支持。它在多线程环境下提供了高效的并发操作，可以被多个线程同时读取和写入而不会引发数据不一致或线程安全问题。websocketMap变量用于存储每个用户的id及其的session会话，session将用于服务端推送消息给session所归属的用户。在这个类中，onOpen()方法则用于监听每一个连接WebSocket服务的连接状态，若连接成功则onOpen()方法会被调用。在这个方法中会拿到两个参数，一个是每个用户专属的Session会话，另一个则是用户id。在这个方法被调用时，首先会判断websocketMap中是否已存在该用户的Session会话，若存在则移除，若不存在，则以userId作为键，session作为值存入websocketMap当中。然后通过该用户的session给用户发送一个信息，代表已连接成功。（2）发送消息在发送消息之前，已经与后端的WebSocket服务连接成功，此时只需调用WebSocket实例的send()方法方法即可给服务端发送消息，本系统支持文字和图片两种形式的对话，两种方式的具体实现有一定差异。发送消息的流程图如下图5-22所示。图5-22发送消息流程图发送文字：前端具体实现如下图5-23所示。图5-23前端发送文字的具体实现当管理员点击发送的时候，会获取文本框中的内容，判断其是否为空串，然后把文本消息封装成结构为“from”、“type”、userId”、“content”、“time”的形式，其中“from”代表消息来自于谁，“type”代表消息的类型，“content”为消息的内容，“time”为消息发送的时间，接着会调用WebSocket实例的send()方法，并把消息转成JSON字符串作为参数发送给后端。后端接收前端发送的消息的业务逻辑如下图5-24所示。图5-24后端接收消息的业务逻辑从上图可以看出，当用户向后端发送消息，会被WebSocketService服务类的onMessage()方法接收到，在这个方法中首先会对前端发送来的消息进行非空判断。随后会通过消息的“from”属性判断消息的来源，若消息来自于用户，则在websocketMap中把管理员的session会话取出，若消息来自于管理员，则从消息中取出“userId”属性，并把websocketMap中键为该userId的session会话取出。接着，会判断取出的session是否存在，也就是判断当前发消息给的对象是否在线，如果在线则使用session向该用户发送消息，但是无论发消息给的对象是否在线，都会往数据库更新聊天记录。②发送图片：当管理员点击发送图片按钮时，会弹出本地资源管理器选择图片文件，选中图片后会自动上传至服务端，服务端接收到图片后会保存至服务器本地磁盘，并把文件名存入数据库，然后把文件url返回给前端。上图中的onSucess()方法则是图片上传成功的回调函数，在这个回调函数中会拿到后端返回来的图片url，调用sendPicture()方法，并把该url当做消息的内容，同时把“type”赋值为“image”，调用socket.send()方法把消息传给后端，接下来的流程和发送图片的业务逻辑保持一致。前端的具体实现如下图5-25所示。图5-25前端发送图片的具体实现逻辑（3）接收消息在前端进行WebSocket连接初始化的时候，会同时把接收消息的函数定义好。当管理员在线时，会直接收到来自于会员用户的消息，若不在线，则在下一次登录系统时会看到消息未读提醒。在后端中WebSocket服务会把取出的session会话用于消息的发送，在前端定义的socket.onMessage()方法则会收到服务端发送的消息，收到消息后，会把消息从JSON字符串格式转化为对象格式，并把消息对象插入聊天记录数组的尾部。如果此时管理员端的聊天窗口没有打开，则会弹出消息提示管理员有新消息，并且会请求后端获取未读的消息数量显示出来。具体的前端接收消息的实现如图5-26所示。图5-26前端接收消息的具体实现5.3顾客端顾客端是小区鲜菜在线订购系统的一个重要组成部分，主要面向小区内的居民和消费者，旨在提供给他们一个便捷的购物平台，让他们可以方便地浏览、选择和购买各类新鲜蔬菜产品。顾客端负责提供给顾客使用的功能和界面。具体包括首页浏览模块、商品搜索模块、商品分类模块、商品详细信息模块、登录注册模块、个人信息模块、地址管理模块、购物车模块、支付模块、订单模块以及联系商家模块。通过这些功能模块，顾客可以方便地浏览商品、搜索商品、管理个人信息和地址、进行购物和支付，并与商家进行沟通。顾客端的设计和实现旨在提供良好的用户体验，简化购物流程，并确保顾客的需求得到满足。5.2.1首页浏览模块顾客端的首页浏览模块是用户进入系统后首先接触到的界面，是顾客端的核心功能之一，它为用户提供了浏览和查找商品的界面。通过首页浏览模块，用户可以快速浏览系统中的商品，了解商品的基本信息，并进行筛选和搜索，以找到符合自己需求的商品。主要用于展示商品信息、商品推广等内容。在该模块中主要分为四个部分，分别为顶部navBar、swipper推广轮播图、商品一级分类列表、商品列表和底部tarBar，下面展开这五个部分的具体实现细节。顾客端首页如下图5-27所示。图5-27顾客端首页①顶部navBar：在顶部navBar的左边为搜索图标，点击图标可以进入搜索界面，中间为该系统的门店名称，右边为联系商家按钮，点击可以进入联系商家页面。②Swipper推广轮播图：在顶部navBar的下方为Swipper推广轮播图，此轮播图可循环展示参与推广的商品图片，点击图片可进入该商品的详细信息界面。③商品一级分类：在Swipper下方为商城的商品一级分类列表，每一个一级分类都对应着一个图标，点击图标可以进入对应的分类的商品列表。④商品列表：在该区域显示小区鲜菜在线订购系统的所有商品，每一个商品占据着一个块区域，点击商品块区域可以进入该商品的详细信息界面。并且具有筛选条件功能，分别为默认排序、销量优先、价格升序和只看有货，默认排序是按照数据库的默认顺序显示，销量优先则是按照商品的销量进行降序排序，价格升序则是按照商品的价格进行升序排序，只看有货是筛选商品库存表中的库存数量大于0的所有商品。⑤底部tarBar：底部为小区鲜菜在线订购系统顾客端的底部栏，用于切换系统的模块，在用户未登录时可以访问首页和分类模块，点击“购物车”和“我的”则会默认跳转至登录界面并提示用户需要登录才能访问。5.2.2商品搜索模块商品搜索模块是顾客端的一个重要功能模块，旨在帮助用户快速查找和筛选所需的商品。具体实现方案可以包括设计搜索框和搜索按钮，让用户输入关键词并点击搜索按钮触发搜索操作。系统会对输入的关键词进行匹配，并从数据库中查询符合条件的商品信息进行展示。当用户来到该模块时，可以在最上方为搜索的输入框输入希望搜索的关键，点击搜索按钮，即可对该关键字进行搜索，同时把该关键字存入浏览器的localStorage中。在搜索框的下方为最近搜索的历史记录，点击搜索记录再一次触发该关键字的搜索行为，点击删除按钮，会把浏览器的localStaorage中存储的搜索记录清除掉，实现删除搜索记录功能。5.2.3商品分类模块商品分类模块是顾客端的一个重要功能模块，它提供了商品按照一定规则和属性进行分类和组织的功能，旨在为顾客提供方便的商品分类浏览功能。通过该功能，顾客可以根据商品的不同分类进行浏览，以便更好地找到感兴趣的商品。在该模块分别呈现商城的一级分类和二级分类，用户点击一级分类列表，会在右侧显示相应的该一级分类下的所有二级分类图标列表，接着用户可以点击二级分类图标，就可以进入该二级分类对应的商品信息列表界面。5.2.4商品详细信息模块商品详细信息模块是顾客端的关键功能之一，它提供了商品的详细信息和更多细节，帮助用户做出购买决策。当用户在商品列表中点击某一个商品时，即可进入该商品的详细信息界面。在该界面中，提供了详细的商品信息展示，让用户了解和评估商品的特性、性能、价格等重要信息。在该模块中，用户可以清除地浏览该商品的所有详细信息，包括商品的高清图片轮播图、商品价格、商品销量、商品名称、商品描述、库存数量、计量单位以及一些自定义属性。通过这些信息，顾客可以更好地了解商品的特点、优势和适用场景。该模块还有一些交互功能，比如加购、立购、联系商家等。用户可以用这些功能把商品放到购物车，或者直接下单，从而快速完成购物。为了提供良好的用户体验，设计了清晰的布局和导航，使用户能够方便地浏览和阅读商品详细信息。商品详细信息模块如下图5-28所示。图5-28商品信息信息模块5.2.5登录注册模块顾客端的登录注册模块是用户进行身份验证和账号管理的关键模块。在小区鲜菜在线订购系统中，用户可以选择使用手机号或者邮箱号进行登录和注册，本系统支持验证码登录和密码登录两种登录形式。当用户使用验证码形式登录时，填写手机号或邮箱号完后，点击下方的发送验证码按钮，等待用户收到系统发的手机短信或邮箱验证码，填写在输入框，点击登录按钮，系统校验验证码是否正确，正确的话，判断该用户是否已注册，未注册的用户则会为其自动注册，并跳转至个人信息界面，提示登录成功。当用户使用密码登录时，需要用户使用已经注册过的手机号或者邮箱号，在填写完手机号/邮箱和密码后，点击登录按钮，系统会判断该账户是否已注册，再判断账号和密码是否匹配，匹配成功后提示登录成功跳转至个人信息界面。顾客端登录/注册的流程如下图5-29所示。图5-29顾客端登录/注册流程图密码登录：顾客端使用密码方式登录的时序图如下图5-30所示。图5-30顾客端密码登录时序图上图为顾客端使用密码登录方式的时序图，可以看到，当顾客的登录请求来到后端的JWTAuthenticationTokenFilter()类，需要判断是否为登录请求，若请求中没有携带token字段则使用filterChain.doFilter()放行。接着请求进入到LoginController()控制器，调用userLonginByPassword()方法，在这个方法中会校验账号密码格式是否正确，通过后调用authenticate()进行账户密码的校验，若账户密码错误则抛出异常，若登录成功则生成token信息，并把用户个人信息和角色权限信息存入redis数据库，并响应登陆结果给前端。验证码登录：顾客端使用验证码方式登录的时序图如下图5-31所示。图5-31顾客端验证码登录时序图从上图可以看出，验证码登录与使用密码登录方式的业务逻辑不同。当用户使用验证码登录方式时，首先会发送一个请求进入LoginController()，在这个方法里面首先会校验手机号和邮箱号格式是否正确，根据判断的结果判定用户使用的是手机号登录还是邮箱登录，随后调用sendCode()方法，通过该方法发送验证码，若为手机号，调用自定义发送验证码工具类的sendByPhone()方法，若为邮箱号，则调用sendByEmail()方法。在sendByPhone()方法中，接入了阿里云的短信服务，在该方法中，配置相关参数，然后通过调用官方的发送短信的API，即可向目标手机号发送验证码信息。在sendByEmail()方法中，同理需要配置好发送邮箱的相关配置，方法会调用SpringBoot的发送邮箱的方法，最后在配置好的邮箱模板中拼接验证码字符串发送给指定邮箱。在前端部分，当用户登录成功之后，会得到后端响应的用户个人信息和token字段，同时把用户个人信息和token字段使用vuex状态管理临时存储起来，并且接下来的每一次请求都将携带vuex中存储的token字段。顾客端的登录/注册模块如下图5-32所示。图5-32顾客端登录/注册模块5.2.6个人信息模块个人信息模块是顾客端的一个重要功能模块，它允许用户管理和维护他们的个人资料和账户信息。在个人信息模块中的“个人信息管理”页面，用户可以查看和编辑他们的头像、姓名、性别和城市等信息。用户可以通过该模块更新他们的个人信息，确保信息的准确性和最新性。此外，在“账户安全”页面中，还提供了修改密码的功能，用户可以在这里更改他们的登录密码，增加账户的安全性。在个人信息和账户安全模块中，它们的数据都是来自于此前登录模块中登录成功后所调用vuex中user模块的login()方法，login()方法会暂时的把后端响应回来的用户信息存储在vuex中的userInfo对象中。不仅是这两个模块会使用到userInfo对象，几乎全局所有会使用到userId字段作为参数请求后端接口的模块都会使用到它。每当用户个人信息经历过更改，都会向后端重新请求一次获取新的userInfo对象。个人信息模块的前端页面如下图5-33所示。图5-33个人信息模块前端页面5.2.7地址管理模块顾客端的地址管理模块用于用户管理收货地址和配送地址等信息。该模块的功能有添加收货地址、编辑收货地址、删除收货地址、设地址为默认地址。地址管理模块的前端页面如下图5-34所示。图5-34地址管理模块前端页面5.2.8购物车模块购物车模块是顾客端的一个功能，它可以帮助用户管理他们的购物车信息。用户在首页浏览商品的时候，如果看到心仪的商品，可以点击把它添加到购物车里。然后，用户可以用购物车模块来对购物车里的商品进行统一的管理，比如增加或减少商品的数量，或者对选中的商品进行结算购买或删除操作。购物车前端页面如下图5-35所示。图5-35购物车前端页面5.2.9支付模块当用户在商品详细信息页面点击“立即支付”或者在购车中勾选商品点击结算，会进入确认订单页面，在这里用户可以根据自己的需要修改订单的相关信息。用户确认订单信息正确无误后，便可以提交订单了。后端接收到提交订单的请求后，会先生成订单信息，并把订单信息返回给前端，前端拿到响应数据后进入收银台页面，用户可在此页面进行支付。支付的流程图如下图5-36所示。图5-36支付流程图提交订单的时序图如下图5-37所示。图5-37提交订单时序图从上图可以看到，当用户在点击提交订单后，后端的OrderController控制器的generateOrder()方法会拿到前端的请求。在该方法中，首先会调用stockServiceImpl类的validateNumber()方法校验订单中所有商品的库存信息，判断库存数量是否足够，如若库存充足，则通过INSERT语句把订单信息保存至数据库orders表，接着会保存订单详细信息保存至数据库ordersDetail表，当订单信息和详细信息均保存成功后，会将购物车中对应的商品信息删除，同时会调用stockServiceImpl的changeStock()方法减少订单中商品所对应的库存信息的库存数量。最后把该订单加入自定义的工具类OrderDelayQueueJob的延迟队列DelayQueue中，该类中DelayQueue用于存放用户提交的每一个订单，每个订单倒计时30分钟，同时开启一个线程用户监听DelayQueue中每一个过期的订单，当捕捉到有订单过期时会把订单修改为已取消。在顾客端会收到后端响应的订单数据，用户确认后端生成的订单信息无误后，即可点击立即支付发起支付请求，请求会来到后端的paymentController控制类的payByAlipay()方法，在这个方法会再次对订单信息进行校验，校验无误后调用支付宝的支付接口，该接口会返回一个表单信息，在该表单中会拿到一个支付宝生成的交易号，并把该表单和交易号响应给前端。前端拿到表单后解析成HTML代码并在新窗口打开，该新窗口就是支付宝的支付窗口，用户可以通过扫描支付二维码或者输入支付宝账号密码进行支付。而此时前端的收银台页面会不断轮询请求后端getAliPayStatus()方法查询支付结果，在该方法中会调用支付宝官方接口查询支付进度，支付成功后，后端会更新订单的相关字段，并创建该订单的配送信息，同时分配一名配送员负责该配送单。最后，后端会把支付结果通知给前端，前端会跳转到显示支付结果的页面。支付模块的前端页面如下图5-38所示。图5-38支付模块前端页面5.2.10订单模块顾客端的订单模块用于用户管理订单信息和查看订单状态。在用户提交订单后，会生成一个订单信息，用户可以在“我的”页面点击进入订单页面查看订单列表，分别可以查看“所有订单”、“待付款”、“待确认”、“已完成”、“退款/售后”的订单。其中“所有订单”会获取该用户所有未经删除的订单，“待付款”会获取该用户已提交但是未付款的订单，“待配送”会获取用户已付款但是未确认收货的订单，“已完成”会获取该用户所有已支付并且已确认收货的订单，“退款/售后”会获取用户申请取消订单或申请售后的订单。订单模块可以分为两个部分，第一部分为订单管理模块，第二部分为售后申请模块，接下来将分为两个部分展开订单模块的实现细节。（1）订单管理用户可以在“待付款”订单列表里，选择“去付款”或“取消订单”的操作。用户可以在“待配送”订单列表里，选择“确认收货”或“取消订单”的操作。在“已完成”订单列表，用户可以对订单进行“申请售后”和“删除订单”操作。订单管理模块的前端页面如下图5-39所示。图5-39订单管理前端页面（2）售后申请用户可以对已付款的订单进行售后的申请，售后的申请主要分为两类，一类为已付款但未确认收货，此时可以点击“取消订单”申请退款，另一类为已付款且已完成的订单，但是对收到的商品不满意，可以对订单进行“申请售后”操作，此时需要填写申请售后的类型、售后的原因、详细原因。申请成功后，可以在“退款/售后”列表查看已申请的售后列表。其中，“取消订单”会进入OrderController()控制类的applyCancelOrder()方法，方法中会校验订单信息是有误，已确认收货的订单不能取消订单，接着通过订单中的字段orderIsPay判断该订单是否已付款，若未付款则直接把订单中的orderIsCancel字段设置为1，代表为已取消，若已付款则需要把订单的orderIsService字段设置为1，代表为该订单进入售后状态，售后状态的订单需要管理员在管理员端中的售后管理对该售后进行处理，若管理员同意退款，则会调用orderServiceController()中的refund()方法，refund()方法会调用支付宝官方的退款API，进入正常的退款流程。另外，已确认收货的订单需要通过“申请售后”操作向后端发起售后请求，该操作会进入OrderServiceController()控制类的submitService()方法，这个方法同样需要校验订单信息是否有误，同时需要把该订单的orderIsService字段设置为1标记为售后状态，使管理员能在售后单中对该售后请求进行处理。对于用户发起的售后请求，用户可以选择取消售后申请，该操作会把订单的orderIsService字段从1改为0，若是有需要用户可以再次申请售后。对于售后单的处理结果和退款进度，用户可以在“售后/退款”列表查看，退款的金额可以通过支付宝查看到账情况。售后申请的前端页面如下图5-40所示。图5-40售后申请前端页面5.2.11联系商家模块顾客端的联系商家模块用于用户与商家进行沟通和咨询。用户可以通过该模块与商家进行售前或者售后的必要沟通，形式为文字或图片。该模块的核心功能逻辑，主要分为三个部分，分别为初始化连接WebSocket服务、发送信息、接收信息。当用户进入到联系商家页面，会请求后端获取与商家在之前聊天记录，同时初始化WebSocket服务，判断浏览器是否支持WebSocket服务，在初始化的时候会定义好接收消息的回调函数，当在收到消息时候把消息对象插入聊天记录数组的尾部。当在发送消息时候会把消息封装为对象，并转为JSON字符串发送给后端，后端根据消息的from属性判断消息的去向，最终把消息发给目标用户。因该模块的业务流程与管理员的联系买家模块基本一致，所以不做过多赘述。联系商家模块的前端页面如下图5-41所示。图5-41联系商家模块前端页面5.4本章小结本章主要介绍了小区鲜菜在线订购系统的详细设计与实现。主要工作明确了每个模块的功能、接口和数据结构，对各个功能模块进行了详细设计。通过分点的形式分别说明了管理员端和顾客端的具体设计与实现过程。在管理员端，着重描述了登录模块、添加商品模块和联系买家模块的具体实现，其中不乏对代码块和图片的解释与分析。在顾客端，通过图文并茂的详细论解，着重描述了登录/注册模块、支付模块和订单模块的具体实现。下一章将对系统进行测试，以验证系统的功能是否满足实际需求，并提出一些建议和改进措施。6系统测试在本章中，将介绍系统测试的整体策略和方法，并进行功能测试和性能测试。将针对系统的各个功能模块进行测试，验证其是否按照设计要求正常工作。将编写测试用例，模拟用户操作，检查系统的响应和输出是否符合预期。通过功能测试，可以发现和修复系统中的潜在问题，确保系统的功能正常可用。通过性能测试，检验系统的运行是否足够稳定快速。本章的测试结果将对系统进行全面评估，以确保系统在实际应用中能够稳定运行、高效响应用户请求，并具备良好的扩展性和可靠性。通过测试过程中的发现和改进，将为后续的系统优化和改进提供依据。6.1功能测试6.1.1管理员端功能测试（1）登录模块管理员登录模块是系统的核心功能之一，对于保障系统安全性和用户体验至关重要。管理员登录模块功能测试用例如下表6-1所示。表6-1管理员端登录模块测试用例表编号1001类型功能测试目的检测管理员端登录功能是否正常角色员工条件管理员进入后台系统场景输入数据预期效果最终测试效果登录时使用店内已入职的员工的手机号/邮箱号店内的员工手机号/邮箱号、密码正常登录，并提示登录成功正常登录且正确提示登录时使用非店内员工的手机号/邮箱号非店内员工的手机号/邮箱登录失败，提示该用户不存在登录失败且正确提示（2）用户管理模块管理员端的用户管理模块是系统中重要的功能之一，它涉及到对用户信息的增删改查等操作。为了确保该模块的功能正常运行和数据安全性，进行充分的测试是必要的。管理员用户管理模块功能测试用例如下表6-2所示。表6-2管理员端登录模块测试用例表编号1002类型功能测试目的检测编辑会员用户信息功能是否正常角色员工条件员工已登录系统，且职位为管理员以上场景输入数据预期效果最终测试效果编辑会员用户信息时把手机号设置为未注册会员的手机号未注册的会员的手机号修改成功，提示修改成功修改成功且正确提示编辑会员用户信息时把手机号设置为另一个已注册会员的手机号另一个已注册的会员的手机号修改失败，提示该手机号已被注册或绑定修改失败且正确提示（3）商品管理模块管理员端商品管理模块功能测试用例如下表6-3所示。表6-3管理员端商品管理模块测试用例表编号1003类型功能测试目的检测添加商品功能是否正常角色员工条件员工已登录系统，且职位为管理员以上场景输入数据预期效果最终测试效果添加商品时正常输入商品的基本信息和商品属性商品基本信息、商品属性添加