基于Springboot+Vue实现前后端分离商城管理系统

Posted 编程指南针

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Springboot+Vue实现前后端分离商城管理系统相关的知识，希望对你有一定的参考价值。

作者主页：编程指南针

作者简介：Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助

文末获取源码 

一，项目简介

 新新商城，一款基于 Springboot+Vue 的电商项目，前后端分离项目。完整的实现了一个商城系统应有的基本功能，包括但不限于以下主要功能模块：

前端商城用户

  1. 用户注册登陆
  2. 商品信息分类和品牌浏览
  3. 全文搜索
  4. 添加购物车管理
  5. 在线购买商品：使用支付宝沙箱在线支付
  6. 个人信息管理
  7. 个人订单管理
  8. 在线退换货功能
  9. 退款功能

后台用户管理功能

  1. 商品分类管理
  2. 商品品牌管理
  3. 商品规格管理
  4. 商品采购管理
  5. 供应商管理
  6. 订单管理
  7. 退货退款管理
  8. 轮播图设置管理
  9. 用户管理
  10. 权限角色管理
  11. 个人信息管理

      项目后台基于Springboot+MybatisPlus开发实现，前端使用VUE+Element开发实现，前后端分离开发，前端通过调用后台接口来进行相应的交互处理。

      亮点技术：短信发送验证码、阿里云OSS云存储商品图片、邮箱自动发邮件验证操作权限，Shiro权限管理，数据加密处理，支付宝沙箱技术应用，Redis数据缓存处理。

    项目功能完整，界面优雅大方，人机交互流畅，是一个难得的毕业设计作品。

二，环境介绍

语言环境：Java:  jdk1.8

数据库：mysql: mysql5.7  Redis:5.0.10

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

技术应用：

后端技术

技术

说明

官网

SpringBoot

容器+MVC框架

https://spring.io/projects/spring-boot

Shiro

认证和授权框架

Apache Shiro Simple. Java. Security.

MyBatis

ORM框架

http://www.mybatis.org/mybatis-3/zh/index.html

MySQL

数据库

https://www.mysql.com/

Redis

分布式缓存

https://redis.io/

Druid

数据库连接池

https://github.com/alibaba/druid

前端技术

技术

说明

官网

Vue

前端框架

https://vuejs.org/

Vue-router

路由框架

https://router.vuejs.org/

Vuex

全局状态管理框架

https://vuex.vuejs.org/

Element

前端UI框架

https://element.eleme.io

Axios

前端HTTP框架

https://github.com/axios/axios

vue-clipboard2

将内容复制到剪贴板

https://github.com/Inndy/vue-clipboard2

vuex-persistedstate

vuex持久化

https://www.npmjs.com/package/vuex-persistedstate

nprogress

进度条控件

https://github.com/rstacruz/nprogress

开发环境

工具

版本号

下载

JDK

1.8

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Mysql

5.7

https://www.mysql.com/

Redis

5.0.10

https://redis.io/download

第三方技术

工具

官网

支付宝沙箱技术

沙箱环境 ｜ 开放平台

OSS 存储

阿里云-为了无法计算的价值

阿里云短信服务

阿里云-为了无法计算的价值

QQ邮箱服务

登录QQ邮箱

三，系统展示

下面展示一下项目的主要核心功能：

前端用户操作

用户注册：会对邮箱发验证码验证，要求必须真实有效邮箱

用户登陆

首页

商品购买

购物车

结算付款

我的订单：可以申请退款、收货后可以申请退货等操作

后台管理用户功能

后台首页

商品管理：可以实现商品添加、编辑、删除、下架、查询等，另可以对商品分类、品牌、规则、采购信息进行管理，以及对供应商进行管理，不再一一展示。菜单上的功能都是齐全的。

订单管理：可以进行发货、退货、退款等相关操作

营销管理

主要对前端展示的广告轮播图进行管理

用户和权限管理：可以对管理员、顾客、角色进行管理操作

四，核心代码展示

package com.qiu.controller;

import com.alibaba.fastjson.JSON;
import com.qiu.entity.Logistics;
import com.qiu.entity.Order;
import com.qiu.entity.Product;
import com.qiu.service.LogisticsService;
import com.qiu.service.OrderService;
import com.qiu.service.ProductService;
import com.qiu.util.general.CommonResult;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.TimeUnit;

/**
 * @author ZNZ
 * @email 469603589@qq.com
 * @date 2022/12/28 18:11
 * @description 订单相关业务
 */

@RestController
@CrossOrigin
public class OrderController 
    private static final String VIP = "Vip";
    private static final String COLLECT_GOODS_STATE = "已收货";

    @Autowired
    private OrderService orderService;

    @Autowired
    private ProductService productService;

    @Autowired
    private LogisticsService logisticsService;

    @Autowired
    private RedisTemplate<String, String> redisTemplate;

    @RequestMapping(value = "/order/findById")
    public CommonResult findOrderById(Integer orderId) 
        Order order = orderService.selectById(orderId);
        if (orderId != null) 
            return CommonResult.success("订单信息查询成功", order);
        
        return CommonResult.error("订单信息查询失败");
    

    @RequestMapping(value = "/order/findOrderInfo")
    public CommonResult findOrderInfo(String userAccount) 
        List<Map<String, Object>> orderMap = orderService.selectAllOrder(userAccount);
        if (orderMap != null) 
            return CommonResult.success("订单信息查询成功", orderMap);
        
        return CommonResult.error("订单信息查询失败");
    

    @RequestMapping(value = "/order/findAll")
    public CommonResult findAllOrder() 
        List<Order> orders = orderService.selectAll();
        if (orders != null) 
            return CommonResult.success("订单信息查询成功", orders);
        
        return CommonResult.error("订单信息查询失败");
    

    @RequestMapping(value = "/order/findCount")
    public CommonResult findCount() 
        Integer count = orderService.selectCount();
        if (count != null) 
            return CommonResult.success("订单数量查询成功", count);
        
        return CommonResult.error("订单数量查询失败");
    


    @RequestMapping(value = "/order/add")
    public CommonResult addOrder(Order order) 
        if (order != null) 
            if (order.getProductNo().contains(VIP)) 
                return handleMemberOrders(order);
            
            return handleMerchandiseOrders(order);
         else 
            return CommonResult.error("订单数据不完整");
        
    

    @RequestMapping(value = "/order/cartOrder")
    public CommonResult cartOrder(String orderNo, String ordersInfo, String cartIds) 
        List<String> cartIdList = JSON.parseArray(cartIds, String.class);
        List<Order> orders = JSON.parseArray(ordersInfo, Order.class);
        if (orders != null) 
            ArrayList<String> orderInfo = new ArrayList<>();
            ArrayList<String> productInfo = new ArrayList<>();
            for (Order order : orders) 
                Product product = productService.selectByKey(order.getProductNo());
                Integer productStock = product.getProductStock();
                Integer payAmount = order.getPayAmount();
                if (productStock >= payAmount) 
                    Product newProduct = new Product();
                    newProduct.setProductId(product.getProductId());
                    int newStock = productStock - payAmount;
                    newProduct.setProductStock(newStock);
                    newProduct.setIsStockOut(newStock < product.getLowestStock());
                    // 如果库存小于等于0，自动下架
                    newProduct.setIsSale(newStock > 0);
                    if (productService.updateById(newProduct) && orderService.insertData(order)) 
                        orderInfo.add(order.getOrderNo());
                        productInfo.add(order.getProductNo());
                    
                
            
            if (!orderInfo.isEmpty()) 
                String cartIdsInfo = StringUtils.join(cartIdList.toArray(), ",");
                String orderNoInfo = StringUtils.join(orderInfo, ",");
                String productNoInfo = StringUtils.join(productInfo, ",");
                redisTemplate.opsForValue().set(orderNo, orderNoInfo, 24, TimeUnit.HOURS);
                redisTemplate.opsForValue().set("cartId" + orderNo, cartIdsInfo, 24, TimeUnit.HOURS);
                return CommonResult.success("创建订单成功", productNoInfo);
            
            return CommonResult.error("创建订单失败，请查看商品库存是否满足购买数量");
         else 
            return CommonResult.error("订单数据不完整");
        
    

    @RequestMapping(value = "/order/update")
    public CommonResult updateOrder(Order order) 
        if (orderService.updateById(order)) 
            return CommonResult.success("修改订单成功", order);
        
        return CommonResult.error("修改订单失败");
    

    @RequestMapping(value = "/order/delete")
    public CommonResult deleteOrder(Integer orderId) 
        if (orderService.deleteById(orderId)) 
            return CommonResult.success("删除订单成功", "订单id：" + orderId);
        
        return CommonResult.error("删除订单失败");
    

    @RequestMapping(value = "/order/receipt")
    public CommonResult updateOrder(Integer orderId) 
        Order order = new Order();
        order.setOrderId(orderId);
        order.setOrderState(COLLECT_GOODS_STATE);
        if (orderService.updateById(order)) 
            return CommonResult.success("商品收货成功", order);
        
        return CommonResult.error("商品收货失败");
    

    @RequestMapping(value = "/orderDetail/orderInfo")
    public CommonResult orderInfo(String orderNo) 
        ArrayList<Object> resultList = new ArrayList<>();
        Order order = orderService.selectByKey(orderNo);
        Logistics logistics = logisticsService.selectOrderNo(orderNo);
        if (order != null) 
            resultList.add(order);
        
        if (logistics != null) 
            resultList.add(logistics);
        
        return CommonResult.success("订单详情查询成功", resultList);
    

    /**
     * 处理会员订单
     *
     * @param order 订单信息
     */
    private CommonResult handleMemberOrders(Order order) 
        if (orderService.insertData(order)) 
            return CommonResult.success("创建订单成功", order);
         else 
            return CommonResult.error("创建订单失败");
        
    

    /**
     * 处理商品订单
     *
     * @param order 订单信息
     */
    private CommonResult handleMerchandiseOrders(Order order) 
        Product product = productService.selectByKey(order.getProductNo());
        Integer productStock = product.getProductStock();
        Integer payAmount = order.getPayAmount();
        boolean isOk = productStock >= payAmount;
        if (isOk) 
            Product newProduct = new Product();
            newProduct.setProductId(product.getProductId());
            int newStock = productStock - payAmount;
            newProduct.setProductStock(newStock);
            newProduct.setIsStockOut(newStock < product.getLowestStock());
            // 如果库存小于等于0，自动下架
            newProduct.setIsSale(newStock > 0);
            if (productService.updateById(newProduct)) 
                if (orderService.insertData(order)) 
                    redisTemplate.opsForValue().set(order.getOrderNo(), order.getOrderNo(), 24, TimeUnit.HOURS);
                    return CommonResult.success("创建订单成功", order);
                 else 
                    return CommonResult.error("创建订单失败");
                
             else 
                return CommonResult.error("创建订单失败");
            
         else 
            return CommonResult.error("商品库存不足");
        
    


package com.qiu.controller;

import com.qiu.util.general.CommonResult;
import com.qiu.util.oss.AliyunOssUtil;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * @author ZNZ
 */
@Slf4j
@CrossOrigin
@RestController
public class OssController 
    @Autowired
    private AliyunOssUtil ossUtil;

    @RequestMapping("/uploadImage")
    public CommonResult upload(@RequestParam("name") String folderName,
                               @RequestParam("file") MultipartFile file) throws IOException 
        if (file != null) 
            String fileName = file.getOriginalFilename();
            if (StringUtils.isNotBlank(fileName)) 
                File newFile = new File(fileName);
                try (FileOutputStream os = new FileOutputStream(newFile)) 
                    os.write(file.getBytes());
                    file.transferTo(newFile);
                    String path = ossUtil.upload(folderName, newFile);
                    log.info("文件上传成功，路径：", path);
                    return new CommonResult(200, "上传成功", path);
                 catch (Exception e) 
                    log.error("文件上传失败", e);
                    return CommonResult.error("上传失败");
                 finally 
                    if (newFile.exists()) 
                        FileUtils.forceDelete(newFile);
                    
                
            
        
        return CommonResult.error("文件不存在");
    



package com.qiu.controller;

import com.qiu.entity.ShoppingCart;
import com.qiu.service.ShoppingCartService;
import com.qiu.util.general.CommonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

/**
 * @author ZNZ
 * @email 469603589@qq.com
 * @date 2022/12/31 16:23
 * @description 购物车业务类
 */
@RestController
@CrossOrigin
public class ShoppingCartController 

    @Autowired
    private ShoppingCartService shoppingCartService;

    /**
     * 新增商品到购物车
     *
     * @param shoppingCart 购物车商品信息
     */
    @RequestMapping(value = "/shoppingCart/add")
    public CommonResult addShoppingCart(ShoppingCart shoppingCart) 
        if (shoppingCartService.insertData(shoppingCart)) 
            return CommonResult.success("购物车添加成功", shoppingCart);
        
        return CommonResult.error("购物车添加失败");
    

    /**
     * 更新购物车商品
     *
     * @param shoppingCart 购物车商品信息
     */
    @RequestMapping(value = "/shoppingCart/update")
    public CommonResult updateShoppingCart(ShoppingCart shoppingCart) 
        if (shoppingCartService.updateById(shoppingCart)) 
            return CommonResult.success("购物车修改成功", shoppingCart);
        
        return CommonResult.error("购物车修改失败");
    

    /**
     * 购物车移除商品
     *
     * @param cartId 购物车商品编号
     */
    @RequestMapping(value = "/shoppingCart/deleteById")
    public CommonResult deleteShoppingCart(Integer cartId) 
        if (shoppingCartService.deleteById(cartId)) 
            return CommonResult.success("购物车删除成功", "cartId: " + cartId);
        
        return CommonResult.error("购物车删除失败");
    

    /**
     * 根据用户移除购物车
     *
     * @param account 用户账户
     */
    @RequestMapping(value = "/shoppingCart/deleteByUser")
    public CommonResult deleteByUser(String account) 
        if (shoppingCartService.deleteByUser(account)) 
            return CommonResult.success("购物车删除成功", account);
        
        return CommonResult.error("购物车删除失败");
    


    /**
     * 查询用户账号下的购物车信息
     *
     * @param account 用户账户
     */
    @RequestMapping(value = "/shoppingCart/findAll")
    public CommonResult findAllShoppingCart(String account) 
        List<Map<String, Object>> shoppingInfo = shoppingCartService.selectAll(account);
        if (shoppingInfo != null) 
            return CommonResult.success("购物车查询成功", shoppingInfo);
        
        return CommonResult.error("购物车查询失败");
    

    /**
     * 根据购物车商品编号查询购物车商品信息
     *
     * @param cartId 购物车商品编号
     */
    @RequestMapping(value = "/shoppingCart/findById")
    public CommonResult findById(Integer cartId) 
        ShoppingCart shoppingCart = shoppingCartService.selectById(cartId);
        if (shoppingCart != null) 
            return CommonResult.success("购物车查询成功", shoppingCart);
        
        return CommonResult.error("购物车查询失败");

五，项目总结

 项目后台基于Springboot+MybatisPlus开发实现，前端使用VUE+Element开发实现，前后端分离开发，前端通过调用后台接口来进行相应的交互处理。

      亮点技术：短信发送验证码、阿里云OSS云存储商品图片、邮箱自动发邮件验证操作权限，Shiro权限管理，数据加密处理，支付宝沙箱技术应用，Redis数据缓存处理。

    项目功能完整，界面优雅大方，人机交互流畅，是一个难得的毕业设计作品。

以上是关于基于Springboot+Vue实现前后端分离商城管理系统的主要内容，如果未能解决你的问题，请参考以下文章

前后端分离第7期的基于Vue+Springboot精简版仿小米商城系统

基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统

基于Java springboot+vue+redis前后端分离家具商城平台系统设计和实现

基于Java+SpringBoot+vue+element实现前后端分离玩具商城系统

基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计

基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计