基于SpringBoot2+vue2电商平台

1. 资源

认真读完全文可以获取

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")
public R add(@RequestParam Map<String, Object> params, HttpServletRequest request){
    // ... 日志记录

    // 获取当前登录用户的id和提交的地址、支付方式
    Integer userId = (Integer) request.getSession().getAttribute("userId");
    Integer addressId = Integer.valueOf(String.valueOf(params.get("addressId")));
    Integer goodsOrderPaymentTypes = Integer.valueOf(String.valueOf(params.get("goodsOrderPaymentTypes")));

    // 解析前端传来的购物车商品列表 (JSON格式)
    String data = String.valueOf(params.get("goodss"));
    JSONArray jsonArray = JSON.parseArray(data);
    List<Map> goodss = JSON.parseObject(jsonArray.toString(), List.class);

    // 获取当前用户和要更新的数据集合
    YonghuEntity yonghuEntity = yonghuService.selectById(userId);
    List<GoodsOrderEntity> goodsOrderList = new ArrayList<>();
    List<ShangjiaEntity> shangjiaList = new ArrayList<>();
    List<GoodsEntity> goodsList = new ArrayList<>();
    List<Integer> cartIds = new ArrayList<>();

    // 循环处理每件商品
    for (Map<String, Object> map : goodss) {
        Integer goodsId = Integer.valueOf(String.valueOf(map.get("goodsId")));
        Integer buyNumber = Integer.valueOf(String.valueOf(map.get("buyNumber")));
        GoodsEntity goodsEntity = goodsService.selectById(goodsId);
        String id = String.valueOf(map.get("id"));
        if(StringUtil.isNotEmpty(id)) cartIds.add(Integer.valueOf(id));

        ShangjiaEntity shangjiaEntity = shangjiaService.selectById(goodsEntity.getShangjiaId());

        // 1. 检查库存
        if(goodsEntity.getGoodsKucunNumber() < buyNumber){
            return R.error(goodsEntity.getGoodsName()+"的库存不足");
        } else {
            goodsEntity.setGoodsKucunNumber(goodsEntity.getGoodsKucunNumber() - buyNumber);
        }

        // 2. 组装订单数据
        GoodsOrderEntity goodsOrderEntity = new GoodsOrderEntity<>();
        goodsOrderEntity.setGoodsOrderUuidNumber(String.valueOf(new Date().getTime()));
        goodsOrderEntity.setAddressId(addressId);
        goodsOrderEntity.setGoodsId(goodsId);
        goodsOrderEntity.setYonghuId(userId);
        goodsOrderEntity.setBuyNumber(buyNumber);
        goodsOrderEntity.setGoodsOrderTypes(3); // 订单类型：已支付
        goodsOrderEntity.setGoodsOrderPaymentTypes(goodsOrderPaymentTypes);
        goodsOrderEntity.setInsertTime(new Date());
        goodsOrderEntity.setCreateTime(new Date());

        // 3. 处理支付（以余额支付为例）
        if(goodsOrderPaymentTypes == 1){
            Double money = new BigDecimal(goodsEntity.getGoodsNewMoney()).multiply(new BigDecimal(buyNumber)).doubleValue();
            if(yonghuEntity.getNewMoney() - money <0 ){
                return R.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);
    return R.ok();
}

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

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

<select id="selectListView" parameterType="map" resultType="com.entity.view.GoodsView" >
    SELECT
    <include refid="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>
        <if test="params.ids != null">
            and a.id in
            <foreach item="item" index="index" collection="params.ids" open="(" separator="," close=")">
            #{item}
            </foreach>
        </if>
        <if test=" params.goodsName != '' and params.goodsName != null and params.goodsName != 'null' ">
            and a.goods_name like CONCAT('%',#{params.goodsName},'%')
        </if>
        <if test="params.goodsTypes != null and params.goodsTypes != ''">
            and a.goods_types = #{params.goodsTypes}
        </if>
        <!-- 更多查询条件... -->
        <if test="params.shangxiaTypes != null and params.shangxiaTypes != ''">
            and a.shangxia_types = #{params.shangxiaTypes}
        </if>
        <if test="params.goodsDelete != null and params.goodsDelete != ''">
            and a.goods_delete = #{params.goodsDelete}
        </if>
        <!-- 商家相关查询条件 -->
        <if test=" 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 });
            return false;
        }
        // 查询是否已经添加到购物车
        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 });
                return false;
            }
            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 });
            return false;
        }
        // 保存到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中的数据库连接信息，并确保前后端端口配置一致。

自助获取：https://fifteen.xiaobias.com/source/219