蛋糕网上销售系统|基于Springboot+Vue开发实现网上蛋糕系统

作者主页：编程指南针

作者简介：Java领域优质创作者、多年架构师设计经验、腾讯课堂常驻讲师

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

文末获取源码 

项目编号：BS-SC-051

前言：

伴随着互联网的“低门槛”和人们金钱消费的数字化转变，网络购物奕然已经成为了时代主流。在相关文献以及部分资料和考察当下市场中的电商平台研究中，发现以往的蛋糕销售场所和门店都缺乏专业且专门的线上销售平台而错失许多机会。结果表明，现今的电商平台依旧存在着UI界面的老式化、服务端响应慢以及访问量激增而导致的系统瘫痪等许多可以改善的问题，也无法处理用户反馈等更多更细致的需求和管理。

蛋糕网上销售系统是一个网络购物平台系统，不仅具备以往电商平台的基础，还对UI界面以及服务器进行的优化。用户在线选购蛋糕等产品后，通过下单来完成订单的支付和反馈的填写，同时系统会对用户的订单信息和反馈信息进行实时更新，并将订单和用户信息反馈至后台管理中，是一个真正帮助蛋糕销售行业管理发展的有力工具。

基于研究结论，本文主要采用Spring Boot与Vue框架技术实现前后端分离，其中后端模块使用沙箱支付来完成产品的购买，前端则利用ElementUI组件实现页面效果展示，使用MyBatis Plus、MySQL数据库来管理存储系统，而用JWT来管理前后端分离的案登录权限认证的问题，并且该系统可以提供三种角色的使用：用户、店员和管理员，每个角色对应着不同的权限的功能模块。

前后台分离的实现大大提高了系统的可维护性，使其前台系统在功能模块上对接用户，因此，实现了个人信息管理、订单管理、购物车管理、蛋糕展示管理和支付管理等功能。而后台系统对接店员和管理员，实现了数据报表、蛋糕管理、用户管理、蛋糕分类管理、订单管理和订单流水管理等功能。

一，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

后台开发：springboot+mybatis

前台开发：Vue+ElementUI+Nodejs

二，项目功能简介

本项目是基于Spring Boot框架搭建的蛋糕网上销售系统，主要研究的内容包括如何整合使用Spring Boot+Vue+Mybatis plus+ElementUI+MySQL+JWT来完成该次设计等。不仅要克服服务端响应等问题，还应具备数据统计分析功能灵活完善，稳定安全、使用方便、界面友好和操作简单等优势，在帮助客户了解蛋糕的同时，也能以较低的价格购买到心仪的蛋糕，还能为客户提供一个购买、讨论和学习制作蛋糕的平台，能成为一个真正帮助蛋糕销售行业管理发展的有力工具。本次设计存在三个角色：用户、店员、管理员，并且分为前后台两套不同页面的展示。其中前台系统中包括用户模块、订单模块、搜索模块、蛋糕展示模块、支付模块、购物车模块和积分模块等；后台管理模块包含用户管理模块、蛋糕管理模块、蛋糕分类管理模块、订单管理模块、订单流水管理模块等。

本系统设计了三种用户角色，分别是普通用户、店员和管理员。普通用户对应的是前台系统，而管理员和店员则对应的是后台的管理系统。前台系统包括用户的个人信息管理、用户自身订单和购物车管理、蛋糕的移动支付模块和蛋糕的展示以及搜索模块；后台管理系统包含用户管理模块、蛋糕管理模块、蛋糕分类管理模块、所有用户订单信息模块和订单流水模块等。其主要的功能模块划分如下图3-1所示。

图3-1 功能模块图

普通用户可以使用该系统前台所有基础功能，如用户中心、购物车的修改、订单查询与更改，提交订单后的在线支付，蛋糕展示页面的查看，利用关键字或类型名搜索功能，积分的查看与换购等具体如下图3-2用户前台功能用例图所示。

图3-2 用户前台功能用例图

店员通过管理员给予的账号进行登录，店员账号无法使用普通用户的所有功能，但能进入到后台管理系统中，并对订单、订单和数据报表进管理。店员功能用例图如下图3-3所示。

图3-4 店员功能用例图

管理员通过系统内置的账号登录，管理员账号对应着管理员账户，管理员除了拥有店员的管理权限外，还能对蛋糕和分类信息进行管理，管理员功能用例图如下图3-5所示。

图3-5 管理员功能用例图

本系统有用户模块、订单模块、搜索模块、蛋糕展示模块、支付模块、购物车模块、积分模块、支付模块和后台管理模块等9个功能模块，其主要功能分析如下：

1.用户模块功能

表3-1 用户模块功能描述

2.订单模块功能

表3-2 订单模块功能描述

3.搜索模块功能

表3-3 搜索模块功能描述

4.蛋糕展示模块功能

表3-4 蛋糕展示模块功能描述

5.支付模块功能

表3-5 支付模块功能描述

6.购物车模块功能

表3-6 购物车模块功能描述

7.积分模块功能

表3-7 积分模块功能描述

8.后台管理模块功能

表3-8 后台管理模块功能描述

三，系统展示

3.1  前台系统实现

3.1.1  用户首页和注册实现

首页界面实现效果如下图5-1、5-2和5-3所示。注册页面如图5-4所示，在为登录状态下，可以正常查看首页的蛋糕展示、蛋糕分类展示、最新活动和银行活动内容，但是无法点击加入购物车的样式，会员中心和购物车也无法进入。需要购买蛋糕的用户必须登录账户或注册一个新的账户；如果没有登录在状态下选择进入到这些页面，会有请登录的提示信息弹出。如果拥有账户可以直接登录页面，否则需先前往注册页面进行注册。

用户注册页面的密码输入框内，可以通过点击显示按钮，查看目前输入的密码，使用户对密码有更深层次的记忆。注册信息填写完成时，需要先短信验证，然后验证码正确才能再进行用户注册。

图5-1 首页界面(1)

图5-2 首页界面(2)

图5-3 首页界面(3)

图5-4 用户注册实现

3.1.2  用户登录实现

用户登录实现页面如下图5-5所示。当用户需要进行蛋糕的购买或查看自身购物车中，需要用户在登录页面输入账户和密码，以此获得后台传输的token信息，确保每次用户的请求在有效期内；如果有效期过了，则下一次用户请求将会取消并跳转至首页。

图5-5 用户登录实现

3.1.3  购物车实现

当用户需要购买蛋糕时，点击蛋糕图片旁的购物车小标，就会加入到购物车中，进入购物车页面中，用户根据自己想要购买的数量进行数量改变；当购物车中的蛋糕不需要购买的时候，用户可以通过点击删除按钮，删除对应的蛋糕；当用户勾选蛋糕时，可以同时勾选用户积分来抵消部分订单金额，然后在下方会出现对应的结算金额，点击结算，则进入到订单的提交页面。

图5-6 购物车实现

3.1.4  蛋糕分类展示实现

用户在首页可以通过点击上方的蛋糕来跳转到蛋糕分类展示的页面。在蛋糕分类展示页面中，用户可以根据不同的想法和需求来选择蛋糕不同的分类标签。从而达到选择不同标签，展示的蛋糕对应着标签的效果，使用户能更好的找到心仪的蛋糕。

图5-7 蛋糕分类展示

3.1.5  订单提交实现

在购物车中提交订单后，会跳转到订单信息页面。在该页面中，用户可以添加或修改地址信息，也可以决定收货日期和具体的时间点。如果对订单中的某个蛋糕或有什么要求，也可以在订单备注中填写。用户在做完所有后，支付订单。

图5-8 订单提交页面

3.1.6  用户中心实现

用户可以点击上方的会员中心，进入到用户在个人中心。在个人中心中，用户可以修改自己的账户密码，也可以查看订单信息和消费积分。在个人中心，有对应消费金额的等级，用户可以通过不断消费，从而提升自己的等级来获得更多的优惠。

图5-11 用户中心（1）

图5-12 用户中心（2）

3.2  后台管理实现

3.2.1  后台登录实现

管理员和店员可以进入到后台登录页面，输入对应的账号和密码，如果登录成功，后端会将token发送至前端，存储token，利用token来判断当前登录的是管理员还是店员，两者权限不同，对应的可实现的功能的也不同。登录页面如下图所示。

图5-13 管理员登录页面

3.2.2  数据报表实现

管理员登录成功后会在3s内进入到后台的主页面，并在主页面可以根据清晰的数据报表而看出该系统今日和本月的各类信息数据，并在大量的整合数据中找到未来系统的发展方向和售卖方向，这样可以更加科学、更快捷的看出问题和优势。在数据报表旁，权限等级高的管理员可以查看其余店员信息，并对其进行管理。数据报表详情页面如下图所示。

图5-14 数据报表实现

3.2.4  蛋糕管理实现

该功能是方便管理员对蛋糕实现可控性，不仅是实现了蛋糕的新增、修改、删除的基础上，还为了防止以后蛋糕数量的激增，做了模糊查询，能更快捷、便利的找到对应的蛋糕信息。效果实现入下图所示。

图5-16 蛋糕管理实现

四，核心代码展示

package cn.zjjjsu.cake.controller;


import cn.zjjjsu.cake.entity.User;
import cn.zjjjsu.cake.service.IUserService;
import cn.zjjjsu.cake.util.JwtUtils;
import cn.zjjjsu.cake.util.Result;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;

/**
 * <p>
 * 用户表 前端控制器
 * </p>
 *
 * @since 2022-08-25
 */
@Api(tags = "用户信息控制器类")
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private IUserService userService;

    //用户注册
    @ApiOperation(value = "用户注册")
    @PostMapping("/register")
    public Result register(User user) throws Exception {
        System.out.println(user);
        return userService.register(user);
    }

    //触发，验证码获取
    @ApiOperation(value = "获取验证码")
    @GetMapping("/code")
    public Result code() throws Exception {
        return userService.code();
    }

    //用户登录
    @ApiOperation(value = "用户登录")
    @GetMapping("/login")
    public Result userlogin(String uName,String uPassword){
        return userService.userlogin(uName,uPassword);
    }

    //用户中心--修改密码+token判断
    @ApiOperation(value = "修改密码",notes = "修改密码+token判断")
    @PutMapping("/updatpwd")
    public Result updateUserPwd(String newUpassword, String OldUpassword, HttpServletRequest request){
        if(!JwtUtils.checkToken(request)){   //判断请求中token是否有效
            return Result.tokenError();
        }
        String uName = JwtUtils.getMemberUnameByJwtToken(request);
        Result rtu = userService.updatePassword(uName,newUpassword,OldUpassword);
        if (rtu.getMsg()=="true"||(rtu.getMsg()).equals("true")){
            UpdateWrapper<User> uw = new UpdateWrapper<>();
            uw.set("u_password",newUpassword);
            uw.eq("u_name",uName);
            userService.update(uw);
            return rtu;
        }else {
            return rtu;
        }
    }

    /**
     * 管理员查询所有的用户信息
     * @return  Result对象
     */
    @ApiOperation(value = "用户信息",notes = "管理员查询所有的用户信息")
    @GetMapping("/selAllUser")
    public Result selAllUser(Integer cartCurrent){
        return userService.adminSelAllUser(cartCurrent);
    }

    /**
     * 用户积分
     * @param request   请求
     * @return  Result对象
     */
    @ApiOperation(value = "用户积分")
    @GetMapping("/getIntegral")
    public Result getIntegral(HttpServletRequest request){
        if(JwtUtils.checkToken(request)){   //判断请求中token是否有效
            String uid = JwtUtils.getMemberIdByJwtToken(request);
            return userService.selIntegral(uid);
        }else { //无效则返回300的失败码
            return Result.tokenError();
        }
    }

    @ApiOperation(value = "更新积分")
    @GetMapping("/setIntegral")
    public Result setIntegral(HttpServletRequest request,String surplus){
        if(JwtUtils.checkToken(request)){   //判断请求中token是否有效
            String uid = JwtUtils.getMemberIdByJwtToken(request);
            return userService.updataIntegral(uid,surplus);
        }else { //无效则返回300的失败码
            return Result.tokenError();
        }
    }

    @ApiOperation(value = "查询号码")
    @GetMapping("/getPhone")
    public Result getPhone(HttpServletRequest request){
        String uid = JwtUtils.getMemberIdByJwtToken(request);
        return userService.selPhone(uid);
    }

    @ApiOperation(value = "修改用户信息",notes = "修改用户姓名、电话")
    @PutMapping("/setUser")
    public Result setUser(String uid,String uName,String uPhone){
        return userService.updataUName(uid,uName,uPhone);
    }

    @ApiOperation(value = "重置密码")
    @PutMapping("/updateUserPwd")
    public Result updateUserPwd(String uid){
        return userService.ResetPwd(uid);
    }

}

package cn.zjjjsu.cake.controller;

import cn.zjjjsu.cake.conf.PayMentConig;
import cn.zjjjsu.cake.entity.Order;
import cn.zjjjsu.cake.service.IOrderService;
import cn.zjjjsu.cake.util.Result;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePagePayRequest;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.UUID;

/**

 * @title PaymentController
 * @projectName MyWalking_Fashion
 * @description：TODO
 * @create 2022/8/8 19:48
 */
@Api(tags = "沙箱信息控制器类")
@RestController
@CrossOrigin
@RequestMapping("/payMent")
public class PaymentController {
    @Autowired
    private IOrderService service;

    @ApiOperation(value = "支付操作")
    @GetMapping("/payPage")
    public Result showPayment(Integer orderId, HttpServletRequest request, HttpServletResponse
            response) {
        Order byId = service.getById(orderId);
        //可以在这里进行订单状态的设置，对数据库操作
            //获得初始化的AlipayClient
        AlipayClient alipayClient = new
                DefaultAlipayClient(PayMentConig.gatewayUrl,
                PayMentConig.APP_ID,
                PayMentConig.APP_PRIVATE_KEY,
                "json", PayMentConig.CHARSET,
                PayMentConig.ALIPAY_PUBLIC_KEY,
                PayMentConig.sign_type);
        //设置请求参数
        AlipayTradePagePayRequest alipayRequest = new
                AlipayTradePagePayRequest();
        //同步回调，如果本地调度只会走同步，这里的界面就是你付款后跳转的界面
//        String return_url = "http://localhost:8090/payMent/returnUrl?orderId="+byId.getoId();
        alipayRequest.setReturnUrl(PayMentConig.return_url);
        //异步回调，没有服务器实际上我们用不到
        alipayRequest.setNotifyUrl(PayMentConig.notify_url);
        //订单名称，必填
        String subject = "网上蛋糕销售"+orderId+"号订单";
        //商户订单号，商户网站订单系统中唯一订单号，必填
        String out_trade_no = UUID.randomUUID().toString();
        //付款金额，必填 ShopName
        String total_amount = byId.getoAmount()+"";
        //商品描述，可空
        String body = "网上蛋糕销售订单支付";
        // 该笔订单允许的最晚付款时间，逾期将关闭交易。取值范围：1m～15d。m-分钟，h-小时，d天，1c-当天（1c-当天的情况下，无论交易何时创建，都在0点关闭）。 该参数数值不接受小数点， 如1.5 h，可转换为 90 m。
        String timeout_express = "1h";
        alipayRequest.setBizContent("{\"out_trade_no\":\"" + out_trade_no +
                "\"," + "\"total_amount\":\"" + total_amount + "\"," + "\"subject\":\"" + subject + "\","
                + "\"body\":\"" + body + "\"," + "\"timeout_express\":\"" + timeout_express + "\","
                + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
        String form = "";
        try {
            form = alipayClient.pageExecute(alipayRequest).getBody(); //调用SDK生成表单
            System.out.println(form.toString());
            response.setContentType("text/html;charset=" + PayMentConig.CHARSET);
            response.getWriter().write(form);//直接将完整的表单html输出到页面
            response.getWriter().flush();
            response.getWriter().close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        //更新订单状态
//        service.updateState(String.valueOf(byId.getoId()));
        return Result.success(orderId,"支付页面成功");

    }

    /**
     * 回调，更改订单状态
     * @param orderId   订单id
     */
    @GetMapping("/returnUrl")
    public Result returnUrl(String orderId){
        System.out.println(orderId);
        service.updateState(String.valueOf((service.getById(orderId)).getoId()));
        return Result.success("支付成功");
    }
}

五，项目总结

在新冠疫情的影响下，“带货”行业的兴起，网络电商行业再次成为主导生活发展的主要方向之一，而对于现今网上销售平台已经大肆普及的情况下，蛋糕等糕点类产品的网络销售平台却少之又少，也正因如此网上销售平台的完善也是该课题的重要研究领域之一。众所周知，蛋糕等糕点类产品无论是在销价上还是成本上都呈现着高昂的品态，而对于大部分的客户，以及参考淘宝和美团外卖平台的数据显示，发现互联网对蛋糕的说法和界定都存在着模棱两可的状况，这也是致使客户缺乏对蛋糕认知的主要原因。

通过调查市场上与课题相关的上线项目和其项目对应的用户反馈所形成的数据进行分析，实际情况是市面上的该类系统都不能满足于课题需求，都存在着操作繁琐、UI界面的老式化、服务端响应慢、交互感差和支付的繁杂等问题；对比市场同类型商城系统，它们始终无法摆脱传统销售管理系统的枷锁，从注册完成到选购都太过于复杂、繁琐，使得用户的体验感下降，UI布局甚至有待优化。而且前期调研结果的展示，无不都暴露着现有的系统功能的劣汰，整体系统趋向于单一，缺少交互模块，用户的体验缺少系统交互感，同时当下最流行的支付方式，微信和支付宝的支付功能也大多数未能实现，这极大程度的降低了用户的体验；并且部分系统的服务器端处理用户请求的方式是将部分功能的消息存储、转发过程中应用消息队列的机制，但这些模块处理用户请求的速度仍然有挖掘的空间。