基于SpringBoot2+vue2电商平台

1. 资源https://blog.xiaobias.com/article/52. 项目简介本项目是一个名为“电商平台”的综合性在线交易系统。系统提供了完整的电商业务流程包括商品浏览、购物车管理、在线下单、订单支付与退款、物流跟踪、商品评价以及个人中心等功能。项目同时支持管理员、商家和普通用户三种角色每种角色拥有不同的权限和操作界面。管理员负责后台管理包括管理员账户管理、商品和订单管理、公告管理、商家管理、用户管理以及轮播图等基础数据配置。商家可以管理自己发布的商品、处理相关订单、回复用户评价等。用户可以浏览商品、将商品加入购物车、下单购买、管理收货地址、查看订单状态、申请退款、对已完成订单进行评价等。3. 技术栈后端框架: Spring Boot (版本 2.2.2.RELEASE)持久层框架: MyBatis-Plus (版本 2.3) 与 MyBatis安全控制: Apache Shiro (版本 1.3.2) 用于权限管理数据库: MySQL (驱动版本 5.7.32-log)前端框架 (后台管理):Vue.js (版本 2.x)Element UI (组件库)ECharts (数据图表)前端框架 (用户前台):LayUI (UI框架)jQueryVue.js (辅助)其他工具库:Fastjson、Hutool、Commons Lang3 (Java工具库)Poi (Excel导入导出)百度地图API (地理位置服务)百度AI (人脸识别代码中有集成但未在前端页面体现)4. 详细介绍4.1 核心功能模块用户前台模块 (/src/main/resources/front/)首页: 展示轮播图、公告信息、热门商品和商家推荐。商品模块: 用户可按分类、关键词搜索商品查看商品详情并将商品加入购物车或立即购买。购物车模块: 用户可管理购物车中的商品增、删、改数量并进行结算。订单模块: 用户下单时需选择收货地址和支付方式支持余额支付。下单后订单状态会从“已支付”流转到“已发货”再到“已收货”。用户可以对“已收货”的订单进行评价或在“已支付”状态下申请退款。个人中心模块: 用户可以修改个人信息、管理收货地址、查看和管理自己的所有订单。公告模块: 查看平台发布的各类公告信息。商家模块: 浏览所有入驻商家信息并可进入商家主页查看其商品。后台管理模块 (/src/main/resources/admin/)管理员管理: 管理系统的管理员账户。基础数据管理: 维护各类字典数据如商品类型、公告类型、商家星级等。商品管理: 管理员可以管理全平台的所有商品增删改查查看商品评价和所有订单。公告信息管理: 发布和管理平台的公告。商家管理: 对入驻商家进行管理。用户管理: 管理所有注册用户。轮播图信息: 配置首页轮播图。商家模块 (后台)商家登录后可以管理自己的商品。查看和回复用户对自己商品的评价。查看与自己商品相关的订单并进行发货操作填写快递单号和快递公司。4.2 数据库设计用户表 (yonghu)存储用户账号、密码、联系方式、地址、余额等信息。商家表 (shangjia)存储商家账号、公司信息、联系方式、营业执照、星级等。商品表 (goods)存储商品名称、图片、类型、库存、价格、所属商家、上下架状态等。商品订单表 (goods_order)存储订单号、购买用户、购买商品、购买数量、实付价格、订单状态已支付、已发货、已完成、已评价、退款等、支付方式、物流信息等。购物车表 (cart)存储用户临时添加到购物车的商品及数量。收货地址表 (address)存储用户的多个收货地址并支持设置默认地址。商品评价表 (goods_commentback)存储用户对已购商品的评价内容及商家的回复。公告信息表 (news)存储系统公告内容及类型。字典表 (dictionary)用于存储系统中各种下拉选项的键值对如商品类型、订单状态、性别等。用户表 (users)存储后台管理员账户。4.3 角色与权限管理员 (users)拥有系统后台所有菜单的访问和管理权限如基础数据、商品、订单、商家、用户、轮播图等。商家 (shangjia)后台权限仅限于管理自己的商品、查看和回复自己商品的评价、查看和发运与自己商品相关的订单。用户 (yonghu)前台权限浏览商品、管理购物车、下单、支付、查看订单、申请退款、评价等。后台权限仅可查看个人信息和部分订单列表实际用户在后台无管理功能其管理操作在前端“个人中心”完成。5. 部分代码5.1. 后端 - 订单生成核心逻辑 (GoodsOrderController.java)该代码片段展示了用户从前端提交订单后后端处理订单的核心逻辑包括校验库存、计算金额、更新用户/商家余额、扣减库存、批量保存订单和清空购物车等。RequestMapping(/order)publicRadd(RequestParamMapString,Objectparams,HttpServletRequestrequest){// ... 日志记录// 获取当前登录用户的id和提交的地址、支付方式IntegeruserId(Integer)request.getSession().getAttribute(userId);IntegeraddressIdInteger.valueOf(String.valueOf(params.get(addressId)));IntegergoodsOrderPaymentTypesInteger.valueOf(String.valueOf(params.get(goodsOrderPaymentTypes)));// 解析前端传来的购物车商品列表 (JSON格式)StringdataString.valueOf(params.get(goodss));JSONArrayjsonArrayJSON.parseArray(data);ListMapgoodssJSON.parseObject(jsonArray.toString(),List.class);// 获取当前用户和要更新的数据集合YonghuEntityyonghuEntityyonghuService.selectById(userId);ListGoodsOrderEntitygoodsOrderListnewArrayList();ListShangjiaEntityshangjiaListnewArrayList();ListGoodsEntitygoodsListnewArrayList();ListIntegercartIdsnewArrayList();// 循环处理每件商品for(MapString,Objectmap:goodss){IntegergoodsIdInteger.valueOf(String.valueOf(map.get(goodsId)));IntegerbuyNumberInteger.valueOf(String.valueOf(map.get(buyNumber)));GoodsEntitygoodsEntitygoodsService.selectById(goodsId);StringidString.valueOf(map.get(id));if(StringUtil.isNotEmpty(id))cartIds.add(Integer.valueOf(id));ShangjiaEntityshangjiaEntityshangjiaService.selectById(goodsEntity.getShangjiaId());// 1. 检查库存if(goodsEntity.getGoodsKucunNumber()buyNumber){returnR.error(goodsEntity.getGoodsName()的库存不足);}else{goodsEntity.setGoodsKucunNumber(goodsEntity.getGoodsKucunNumber()-buyNumber);}// 2. 组装订单数据GoodsOrderEntitygoodsOrderEntitynewGoodsOrderEntity();goodsOrderEntity.setGoodsOrderUuidNumber(String.valueOf(newDate().getTime()));goodsOrderEntity.setAddressId(addressId);goodsOrderEntity.setGoodsId(goodsId);goodsOrderEntity.setYonghuId(userId);goodsOrderEntity.setBuyNumber(buyNumber);goodsOrderEntity.setGoodsOrderTypes(3);// 订单类型已支付goodsOrderEntity.setGoodsOrderPaymentTypes(goodsOrderPaymentTypes);goodsOrderEntity.setInsertTime(newDate());goodsOrderEntity.setCreateTime(newDate());// 3. 处理支付以余额支付为例if(goodsOrderPaymentTypes1){DoublemoneynewBigDecimal(goodsEntity.getGoodsNewMoney()).multiply(newBigDecimal(buyNumber)).doubleValue();if(yonghuEntity.getNewMoney()-money0){returnR.error(余额不足,请充值);}else{goodsOrderEntity.setGoodsOrderTruePrice(money);shangjiaEntity.setNewMoney(shangjiaEntity.getNewMoney()money);// 增加商家余额}}goodsOrderList.add(goodsOrderEntity);shangjiaList.add(shangjiaEntity);goodsList.add(goodsEntity);}// 4. 批量更新数据库订单、商家、商品、用户余额并清空购物车goodsOrderService.insertBatch(goodsOrderList);shangjiaService.updateBatchById(shangjiaList);goodsService.updateBatchById(goodsList);yonghuService.updateById(yonghuEntity);if(cartIds!nullcartIds.size()0)cartService.deleteBatchIds(cartIds);returnR.ok();}5.2. 后端 - MyBatis Plus 复杂查询 (GoodsDao.xml)该代码片段展示了如何使用 MyBatis Plus 的 XML 映射文件实现一个复杂的多表关联查询用于商品列表的检索。它关联了goods表和shangjia表并支持多种动态查询条件。selectidselectListViewparameterTypemapresultTypecom.entity.view.GoodsViewSELECTincluderefidBase_Column_List/,shangjia.shangjia_name as shangjiaName ,shangjia.shangjia_phone as shangjiaPhone ,shangjia.shangjia_email as shangjiaEmail FROM goods a left JOIN shangjia shangjia ON a.shangjia_id shangjia.idwhereiftestparams.ids ! nulland a.id inforeachitemitemindexindexcollectionparams.idsopen(separator,close)#{item}/foreach/ififtestparams.goodsName ! and params.goodsName ! null and params.goodsName ! nulland a.goods_name like CONCAT(%,#{params.goodsName},%)/ififtestparams.goodsTypes ! null and params.goodsTypes ! and a.goods_types #{params.goodsTypes}/if!-- 更多查询条件... --iftestparams.shangxiaTypes ! null and params.shangxiaTypes ! and a.shangxia_types #{params.shangxiaTypes}/ififtestparams.goodsDelete ! null and params.goodsDelete ! and a.goods_delete #{params.goodsDelete}/if!-- 商家相关查询条件 --iftestparams.shangjiaName ! and params.shangjiaName ! null and params.shangjiaName ! nulland shangjia.shangjia_name like CONCAT(%,#{params.shangjiaName},%)/if/whereorder by a.${params.orderBy} desc/select5.3. 前端 - 商品详情页逻辑 (goods/detail.html)该代码片段来自前台商品详情页面的 Vue.js 逻辑实现了商品详情展示、加入购物车和立即购买等核心交互功能。methods:{// 添加到购物车addGoodsCart(){// 库存限制if(this.detail.goodsKucunNumber0this.detail.goodsKucunNumberthis.buyNumber){layui.layer.msg(库存不足,{time:2000,icon:5});returnfalse;}// 查询是否已经添加到购物车layui.http.request(cart/list,get,{yonghuId:localStorage.getItem(userid),goodsId:this.detail.id,},(res){if(res.data.list.length0){layui.layer.msg(该商品已经添加到购物车,{time:2000,icon:5});returnfalse;}layui.http.requestJson(cart/add,post,{yonghuId:localStorage.getItem(userid),goodsId:this.detail.id,buyNumber:this.buyNumber,},(res){if(res.code0){layui.layer.msg(添加到购物车成功,{time:2000,icon:6});}else{layui.layer.msg(res.msg,{time:2000,icon:2});}});});},// 立即购买addGoodsOrder(){// 库存限制if(this.detail.goodsKucunNumber0this.detail.goodsKucunNumberthis.buyNumber){layui.layer.msg(商品库存不足,{time:2000,icon:5});returnfalse;}// 保存到storage中在确认下单页面中获取要购买的商品localStorage.setItem(goodss,JSON.stringify([{goodsId:vue.detail.id,// ... 其他商品信息buyNumber:this.buyNumber,yonghuId:localStorage.getItem(userid),}]));// 跳转到确认下单页面jump(../goodsOrder/confirm.html);},}6. 部分截图7. 项目总结功能全面覆盖了电商平台的核心业务流程从商品展示、交易到售后评价形成了一个完整的闭环。角色清晰通过基于Shiro的权限控制很好地隔离了管理员、商家和普通用户三种角色的操作权限结构合理。易于维护代码结构遵循经典的MVC模式使用MyBatis-Plus简化了数据访问层代码前端也实现了清晰的后台Vue和前台LayUI分离。扩展性强字典表的设计使得系统能够灵活地扩展下拉选项无需修改代码。总的来说该项目非常适合作为学习或快速开发电商类Web应用的起点和参考。部署时需注意配置好MySQL数据库、application.yml中的数据库连接信息并确保前后端端口配置一致。