当前位置： 首页 > news >正文

基于SpringBoot2+vue2电商平台

news 2026/6/8 16:27:23

1. 资源

https://blog.xiaobias.com/article/5

2. 项目简介

本项目是一个名为“电商平台”的综合性在线交易系统。系统提供了完整的电商业务流程，包括商品浏览、购物车管理、在线下单、订单支付与退款、物流跟踪、商品评价以及个人中心等功能。项目同时支持管理员、商家和普通用户三种角色，每种角色拥有不同的权限和操作界面。

  • 管理员：负责后台管理，包括管理员账户管理、商品和订单管理、公告管理、商家管理、用户管理以及轮播图等基础数据配置。
  • 商家：可以管理自己发布的商品、处理相关订单、回复用户评价等。
  • 用户：可以浏览商品、将商品加入购物车、下单购买、管理收货地址、查看订单状态、申请退款、对已完成订单进行评价等。

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框架)
    • jQuery
    • Vue.js (辅助)
  • 其他工具库:
    • Fastjson、Hutool、Commons Lang3 (Java工具库)
    • Poi (Excel导入导出)
    • 百度地图API (地理位置服务)
    • 百度AI (人脸识别，代码中有集成但未在前端页面体现)

4. 详细介绍

4.1 核心功能模块

  1. 用户前台模块 (/src/main/resources/front/)：

    • 首页: 展示轮播图、公告信息、热门商品和商家推荐。
    • 商品模块: 用户可按分类、关键词搜索商品，查看商品详情，并将商品加入购物车或立即购买。
    • 购物车模块: 用户可管理购物车中的商品（增、删、改数量），并进行结算。
    • 订单模块: 用户下单时需选择收货地址和支付方式（支持余额支付）。下单后，订单状态会从“已支付”流转到“已发货”再到“已收货”。用户可以对“已收货”的订单进行评价，或在“已支付”状态下申请退款。
    • 个人中心模块: 用户可以修改个人信息、管理收货地址、查看和管理自己的所有订单。
    • 公告模块: 查看平台发布的各类公告信息。
    • 商家模块: 浏览所有入驻商家信息，并可进入商家主页查看其商品。

  2. 后台管理模块 (/src/main/resources/admin/)：

    • 管理员管理: 管理系统的管理员账户。
    • 基础数据管理: 维护各类字典数据，如商品类型、公告类型、商家星级等。
    • 商品管理: 管理员可以管理全平台的所有商品（增删改查），查看商品评价和所有订单。
    • 公告信息管理: 发布和管理平台的公告。
    • 商家管理: 对入驻商家进行管理。
    • 用户管理: 管理所有注册用户。
    • 轮播图信息: 配置首页轮播图。

  3. 商家模块 (后台)：

    • 商家登录后，可以管理自己的商品。
    • 查看和回复用户对自己商品的评价。
    • 查看与自己商品相关的订单，并进行发货操作（填写快递单号和快递公司）。

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(@RequestParamMap<String,Object>params,HttpServletRequestrequest){// ... 日志记录// 获取当前登录用户的id和提交的地址、支付方式IntegeruserId=(Integer)request.getSession().getAttribute("userId");IntegeraddressId=Integer.valueOf(String.valueOf(params.get("addressId")));IntegergoodsOrderPaymentTypes=Integer.valueOf(String.valueOf(params.get("goodsOrderPaymentTypes")));// 解析前端传来的购物车商品列表 (JSON格式)Stringdata=String.valueOf(params.get("goodss"));JSONArrayjsonArray=JSON.parseArray(data);List<Map>goodss=JSON.parseObject(jsonArray.toString(),List.class);// 获取当前用户和要更新的数据集合YonghuEntityyonghuEntity=yonghuService.selectById(userId);List<GoodsOrderEntity>goodsOrderList=newArrayList<>();List<ShangjiaEntity>shangjiaList=newArrayList<>();List<GoodsEntity>goodsList=newArrayList<>();List<Integer>cartIds=newArrayList<>();// 循环处理每件商品for(Map<String,Object>map:goodss){IntegergoodsId=Integer.valueOf(String.valueOf(map.get("goodsId")));IntegerbuyNumber=Integer.valueOf(String.valueOf(map.get("buyNumber")));GoodsEntitygoodsEntity=goodsService.selectById(goodsId);Stringid=String.valueOf(map.get("id"));if(StringUtil.isNotEmpty(id))cartIds.add(Integer.valueOf(id));ShangjiaEntityshangjiaEntity=shangjiaService.selectById(goodsEntity.getShangjiaId());// 1. 检查库存if(goodsEntity.getGoodsKucunNumber()<buyNumber){returnR.error(goodsEntity.getGoodsName()+"的库存不足");}else{goodsEntity.setGoodsKucunNumber(goodsEntity.getGoodsKucunNumber()-buyNumber);}// 2. 组装订单数据GoodsOrderEntitygoodsOrderEntity=newGoodsOrderEntity<>();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(goodsOrderPaymentTypes==1){Doublemoney=newBigDecimal(goodsEntity.getGoodsNewMoney()).multiply(newBigDecimal(buyNumber)).doubleValue();if(yonghuEntity.getNewMoney()-money<0){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!=null&&cartIds.size()>0)cartService.deleteBatchIds(cartIds);returnR.ok();}

5.2. 后端 - MyBatis Plus 复杂查询 (GoodsDao.xml)

该代码片段展示了如何使用 MyBatis Plus 的 XML 映射文件实现一个复杂的多表关联查询，用于商品列表的检索。它关联了goods表和shangjia表，并支持多种动态查询条件。

<selectid="selectListView"parameterType="map"resultType="com.entity.view.GoodsView">SELECT<includerefid="Base_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.id<where><iftest="params.ids != null">and a.id in<foreachitem="item"index="index"collection="params.ids"open="("separator=","close=")">#{item}</foreach></if><iftest="params.goodsName != '' and params.goodsName != null and params.goodsName != 'null'">and a.goods_name like CONCAT('%',#{params.goodsName},'%')</if><iftest="params.goodsTypes != null and params.goodsTypes != ''">and a.goods_types = #{params.goodsTypes}</if><!-- 更多查询条件... --><iftest="params.shangxiaTypes != null and params.shangxiaTypes != ''">and a.shangxia_types = #{params.shangxiaTypes}</if><iftest="params.goodsDelete != null and params.goodsDelete != ''">and a.goods_delete = #{params.goodsDelete}</if><!-- 商家相关查询条件 --><iftest="params.shangjiaName != '' and params.shangjiaName != null and params.shangjiaName != 'null'">and shangjia.shangjia_name like CONCAT('%',#{params.shangjiaName},'%')</if></where>order by a.${params.orderBy} desc</select>

5.3. 前端 - 商品详情页逻辑 (goods/detail.html)

该代码片段来自前台商品详情页面的 Vue.js 逻辑，实现了商品详情展示、加入购物车和立即购买等核心交互功能。

methods:{// 添加到购物车addGoodsCart(){// 库存限制if(this.detail.goodsKucunNumber>0&&this.detail.goodsKucunNumber<this.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.length>0){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.code==0){layui.layer.msg('添加到购物车成功',{time:2000,icon:6});}else{layui.layer.msg(res.msg,{time:2000,icon:2});}});});},// 立即购买addGoodsOrder(){// 库存限制if(this.detail.goodsKucunNumber>0&&this.detail.goodsKucunNumber<this.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. 项目总结

  1. 功能全面：覆盖了电商平台的核心业务流程，从商品展示、交易到售后评价，形成了一个完整的闭环。
  2. 角色清晰：通过基于Shiro的权限控制，很好地隔离了管理员、商家和普通用户三种角色的操作权限，结构合理。
  3. 易于维护：代码结构遵循经典的MVC模式，使用MyBatis-Plus简化了数据访问层代码，前端也实现了清晰的后台（Vue）和前台（LayUI）分离。
  4. 扩展性强：字典表的设计使得系统能够灵活地扩展下拉选项，无需修改代码。

总的来说，该项目非常适合作为学习或快速开发电商类Web应用的起点和参考。部署时，需注意配置好MySQL数据库、application.yml中的数据库连接信息，并确保前后端端口配置一致。

http://www.jsqmd.com/news/908781/

相关文章：

  • 别再手动拖控件了！用Qt的QHBoxLayout搞定复杂界面布局（附完整代码）
  • ACM下学期第六次周赛
  • 终极指南：如何用ncmdumpGUI轻松转换网易云音乐NCM格式，实现跨设备音乐自由
  • 2026年最新宜城市黄金回收白银回收铂金回收靠谱店铺权威排行榜：纯金+金条+银条+钯金 门店地址及联系方式推荐 - 亦辰小黄鸭
  • 如何彻底清理显卡驱动：Display Driver Uninstaller 完整使用指南
  • Windows驱动管理终极指南：用DriverStore Explorer释放C盘20GB空间
  • 费米悖论五层拆解：从德雷克方程到大过滤器，探寻宇宙寂静之谜
  • 3个实战技巧解锁音乐自由：用ncmdump破解网易云NCM格式限制
  • 别再硬啃文档了！Vue-Codemirror 实战：手把手教你配置一个媲美VSCode的在线代码编辑器
  • [智能体-108]：彻底搞懂大模型输出随机性：为什么相同输入，每次回答却不一样？
  • 终极AMD处理器深度调试指南：5分钟掌握Ryzen SDT精准控制技术
  • 无人机航拍向日葵识别数据集｜智慧农业作物检测｜出苗率监测｜YOLO目标检测数据集
  • BMS四层板层叠架构设计与核心逻辑
  • 别再死记硬背了！用‘信号旅行团’的故事，轻松搞懂幅频和相频特性
  • Hitboxer：终极键盘按键重映射和SOCD工具提升游戏操作体验
  • 别再只盯着LOF了！盘点5种更高效的异常检测算法（附Python代码与适用场景指南）
  • 如何高效配置WarcraftHelper：魔兽争霸III优化工具实用快速入门指南
  • Agent角色设计的艺术：专业化与通用化的平衡
  • 从2.1%到8.9%：Gemini对话转化率飙升背后的4层漏斗重构，仅限首批内测团队掌握
  • 别再只会用数组了！Halcon向量与字典的5个实战场景，效率翻倍
  • 终极指南：如何在Windows系统免费获取macOS风格鼠标指针
  • 别再死磕有限元了！用Python和PyTorch快速上手PINN，搞定偏微分方程反问题
  • 艾尔登法环帧率解锁终极指南：3步突破60FPS限制的完整教程
  • 3小时从零掌握：哔哩下载姬DownKyi的完整免费下载方案
  • PySide6信号槽的5个高效使用技巧与3个常见‘坑’（从QThread到自定义信号实战）
  • 3分钟掌握QQ音乐解码神器：qmcdump让你的加密音乐重获自由
  • 从设计器到生产环境：手把手教你同步帆软FineReport的ES和TDengine数据连接配置
  • Android插件化深度解析：资源冲突的终极解决方案
  • DeepSeek 大模型本地部署与云端部署全指南：从环境搭建到生产化实践
  • PS2026移除工具不可用怎么办？用 Banana 修图在 PS 里一样能去除杂物