AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

全栈（Java + Vue + MySQL）开发商城系统教程（二）

2026-04-28 274
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教程来源 https://bncne.cn 本节介绍商城系统后端开发：基于Spring Boot 2.7.14构建，集成Web、Security、MyBatis-Plus、JWT、MySQL等核心依赖；采用application.yml配置多维参数；定义用户、商品、订单等6个实体类及对应DTO；封装JWT工具实现认证授权，结构清晰、开箱即用。

第二部分：后端开发

2.1 创建Spring Boot项目
使用Spring Initializr创建项目，选择以下依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
         https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.14</version>
        <relativePath/>
    </parent>

    <groupId>com.mall</groupId>
    <artifactId>mall-system</artifactId>
    <version>1.0.0</version>
    <name>mall-system</name>
    <description>商城系统后端服务</description>

    <properties>
        <java.version>11</java.version>
        <mybatis-plus.version>3.5.3.1</mybatis-plus.version>
        <jjwt.version>0.9.1</jjwt.version>
    </properties>

    <dependencies>
        <!-- Spring Boot Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- Spring Boot Security -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

        <!-- MyBatis Plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>

        <!-- MySQL驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- JWT -->
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>${jjwt.version}</version>
        </dependency>

        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- 参数校验 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

        <!-- 测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.2 配置文件

# application.yml
server:
  port: 8080
  servlet:
    context-path: /api

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mall_db?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
    username: root
    password: 123456
    hikari:
      maximum-pool-size: 10
      minimum-idle: 5
      connection-timeout: 30000

  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

mybatis-plus:
  mapper-locations: classpath*:mapper/**/*.xml
  type-aliases-package: com.mall.entity
  global-config:
    db-config:
      id-type: auto
      logic-delete-field: deleted
      logic-delete-value: 1
      logic-not-delete-value: 0
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

jwt:
  secret: mall-secret-key-for-jwt-token-generation
  expiration: 86400000  # 24小时

cors:
  allowed-origins: http://localhost:5173
  allowed-methods: GET,POST,PUT,DELETE,OPTIONS
  allowed-headers: '*'
  allow-credentials: true

2.3 实体类

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.math.BigDecimal;
import java.time.LocalDateTime;

/**
 * 用户实体类
 */
@Data
@TableName("user")
public class User {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String username;
    private String password;
    private String nickname;
    private String realName;
    private String phone;
    private String email;
    private String avatar;
    private Integer gender;
    private String role;
    private Integer status;
    private LocalDateTime lastLoginTime;
    private String lastLoginIp;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
}

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.math.BigDecimal;
import java.time.LocalDateTime;

/**
 * 商品实体类
 */
@Data
@TableName("product")
public class Product {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long categoryId;
    private String name;
    private String subtitle;
    private String mainImage;
    private String images;
    private String detail;
    private BigDecimal price;
    private BigDecimal originalPrice;
    private Integer stock;
    private Integer sales;
    private Integer status;
    private Integer sortOrder;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
}

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.time.LocalDateTime;

/**
 * 购物车实体类
 */
@Data
@TableName("cart")
public class Cart {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long userId;
    private Long productId;
    private Integer quantity;
    private Integer checked;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
}

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.math.BigDecimal;
import java.time.LocalDateTime;

/**
 * 订单实体类
 */
@Data
@TableName("order")
public class Order {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String orderNo;
    private Long userId;
    private BigDecimal totalAmount;
    private BigDecimal payAmount;
    private BigDecimal freightAmount;
    private Integer orderStatus;
    private Integer payStatus;
    private Integer shippingStatus;
    private LocalDateTime paymentTime;
    private LocalDateTime deliveryTime;
    private LocalDateTime receiveTime;
    private LocalDateTime closeTime;
    private LocalDateTime cancelTime;
    private String receiverName;
    private String receiverPhone;
    private String receiverProvince;
    private String receiverCity;
    private String receiverDistrict;
    private String receiverAddress;
    private String userNote;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
}

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.math.BigDecimal;
import java.time.LocalDateTime;

/**
 * 订单商品实体类
 */
@Data
@TableName("order_item")
public class OrderItem {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long orderId;
    private String orderNo;
    private Long productId;
    private String productName;
    private String productImage;
    private BigDecimal productPrice;
    private Integer quantity;
    private BigDecimal totalAmount;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
}

package com.mall.entity;

import com.baomidou.mybatisplus.annotation.*;
import lombok.Data;
import java.time.LocalDateTime;

/**
 * 收货地址实体类
 */
@Data
@TableName("address")
public class Address {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long userId;
    private String receiverName;
    private String receiverPhone;
    private String province;
    private String city;
    private String district;
    private String detailAddress;
    private Integer isDefault;
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;
}

2.4 DTO类

package com.mall.dto;

import lombok.Data;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

/**
 * 用户注册请求DTO
 */
@Data
public class UserRegisterDTO {
    @NotBlank(message = "用户名不能为空")
    @Size(min = 3, max = 20, message = "用户名长度3-20位")
    private String username;

    @NotBlank(message = "密码不能为空")
    @Size(min = 6, max = 20, message = "密码长度6-20位")
    private String password;

    @NotBlank(message = "手机号不能为空")
    @Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确")
    private String phone;

    private String email;
    private String nickname;
}

/**
 * 用户登录请求DTO
 */
@Data
public class UserLoginDTO {
    @NotBlank(message = "用户名不能为空")
    private String username;

    @NotBlank(message = "密码不能为空")
    private String password;
}

/**
 * 用户信息响应DTO
 */
@Data
public class UserInfoDTO {
    private Long id;
    private String username;
    private String nickname;
    private String realName;
    private String phone;
    private String email;
    private String avatar;
    private Integer gender;
    private String role;
}

/**
 * 登录响应DTO
 */
@Data
public class LoginResponseDTO {
    private Long userId;
    private String username;
    private String nickname;
    private String role;
    private String token;
    private String avatar;
}

/**
 * 购物车商品DTO
 */
@Data
public class CartItemDTO {
    private Long id;
    private Long productId;
    private String productName;
    private String productImage;
    private BigDecimal productPrice;
    private Integer quantity;
    private Integer checked;
    private BigDecimal totalPrice;
}

/**
 * 创建订单请求DTO
 */
@Data
public class OrderCreateDTO {
    @NotNull(message = "地址ID不能为空")
    private Long addressId;
    private String userNote;
}

/**
 * 订单信息DTO
 */
@Data
public class OrderInfoDTO {
    private Long id;
    private String orderNo;
    private BigDecimal totalAmount;
    private BigDecimal payAmount;
    private Integer orderStatus;
    private String orderStatusText;
    private LocalDateTime createTime;
    private List<OrderItemDTO> items;
    private Address address;
}

2.5 JWT工具类

package com.mall.utils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * JWT工具类
 * 负责生成和解析JWT令牌
 * 
 * JWT结构：header.payload.signature
 * - header：算法和令牌类型
 * - payload：用户信息（userId, username, role）
 * - signature：签名，防篡改
 */
@Component
public class JwtUtils {

    @Value("${jwt.secret}")
    private String secret;

    @Value("${jwt.expiration}")
    private Long expiration;

    /**
     * 生成JWT令牌
     * @param userId 用户ID
     * @param username 用户名
     * @param role 用户角色
     * @return JWT令牌字符串
     */
    public String generateToken(Long userId, String username, String role) {
        Map<String, Object> claims = new HashMap<>();
        claims.put("userId", userId);
        claims.put("username", username);
        claims.put("role", role);

        Date now = new Date();
        Date expiryDate = new Date(now.getTime() + expiration);

        return Jwts.builder()
                .setClaims(claims)
                .setSubject(username)
                .setIssuedAt(now)
                .setExpiration(expiryDate)
                .signWith(SignatureAlgorithm.HS512, secret)
                .compact();
    }

    public Long getUserIdFromToken(String token) {
        Claims claims = getClaimsFromToken(token);
        return claims.get("userId", Long.class);
    }

    public String getUsernameFromToken(String token) {
        Claims claims = getClaimsFromToken(token);
        return claims.getSubject();
    }

    public String getRoleFromToken(String token) {
        Claims claims = getClaimsFromToken(token);
        return claims.get("role", String.class);
    }

    public boolean validateToken(String token) {
        try {
            Claims claims = getClaimsFromToken(token);
            return !claims.getExpiration().before(new Date());
        } catch (Exception e) {
            return false;
        }
    }

    private Claims getClaimsFromToken(String token) {
        return Jwts.parser()
                .setSigningKey(secret)
                .parseClaimsJws(token)
                .getBody();
    }
}

来源：
http://yvyus.cn

文章标签：
Java
关系型数据库
MySQL
JavaScript
Spring
游客xp6ru7c63sdiu
目录
相关文章
游客xp6ru7c63sdiu
|
6月前
|
存储 JavaScript Java
全栈（Java + Vue + MySQL）开发商城系统教程（一）
教程来源 https://zlpow.cn 本教程基于Java（Spring Boot）+ Vue3全栈技术，从零构建B2C商城系统，涵盖用户认证、商品/订单/购物车/库存/物流等核心模块，含完整数据库设计与标准化API接口，适合系统掌握电商开发全流程。
游客xp6ru7c63sdiu
385 0
北京木奇移动技术
|
6月前
|
存储 人工智能 搜索推荐
AI英语学习APP的开发
国内AI英语学习APP正迈向“情感陪伴+超个性化”新阶段。2026年用户期待AI懂业务、有共情、精纠错。建议：构建沉浸式场景对话闭环；采用国产大模型+RAG+音素级纠音技术；严守算法、教育、内容安全三重合规；聚焦职业考证/低龄/银发等垂直赛道突围。（239字）
北京木奇移动技术
352 0
wstcmdgelmn
|
6月前
|
运维 网络协议 API
IP地址到底是什么？一张图看懂+命令行/网站查询实操
IP地址是设备联网的“门牌号”，分公网/私网、IPv4/IPv6，用于识别与定位。本文详解其原理、命令行（ipconfig/ifconfig/curl）及在线查询方法，并介绍风控、广告等业务集成场景，助你从理解到实战高效用好IP信息。（239字）
wstcmdgelmn
5705 1
IP地址到底是什么？一张图看懂+命令行/网站查询实操
北京木奇移动技术
|
7月前
|
人工智能 监控 算法
AI英语App的分类
2026年AI英语App已升级为拟人化“数字私人教练”，深度融合ASR、LLM、TTS与多智能体技术。主流分为沉浸口语陪练、考试模拟、游戏化学习及自适应教练四类，依托语音-逻辑-语音闭环、RAG知识库与Agentic UI，实现音素级纠音、多口音切换与情境化交互。（239字）
北京木奇移动技术
454 5
snowball_win
|
自然语言处理 JavaScript 前端开发
vue3-ts-vite：vue 项目 配置 多页面应用
vue3-ts-vite：vue 项目 配置 多页面应用
snowball_win
3602 0
JJLIN距离
|
Java 应用服务中间件 开发者
Spring Boot 技术详解与应用实践
本文档旨在全面介绍 Spring Boot 这一广泛应用于现代企业级应用开发的框架。内容将涵盖 Spring Boot 的核心概念、核心特性、项目自动生成与结构解析、基础功能实现（如 RESTful API、数据访问）、配置管理以及最终的构建与部署。通过本文档，读者将能够理解 Spring Boot 如何简化 Spring 应用的初始搭建和开发过程，并掌握其基本使用方法。
JJLIN距离
880 2
GG2020gg
|
网络安全 网络架构
Nmap扫描六种端口状态介绍
Nmap扫描六种端口状态介绍
GG2020gg
1812 2
Myon
|
安全 关系型数据库 MySQL
AWD常见防御加固手段
AWD常见防御加固手段
Myon
867 1
AWD常见防御加固手段
wljslmz
|
存储 传感器 网络协议
异步传输：概念、特点与应用
【8月更文挑战第24天】
wljslmz
1665 0

热门文章

最新文章

  • 1
    【连载】物联网全栈教程-从云端到设备（十二）---最简单的单片机上云方法！
  • 2
    SOFAChannel#6 线上直播报名：轻量级监控分析系统 SOFALookout 原理讲解和功能演示
  • 3
    解读 V8 GC Log（一）: Node.js 应用背景与 GC 基础知识
  • 4
    Qt下载(使用国内镜像)
  • 5
    从 JDK 9 到 19，认识一个新的 Java 形态（内存篇）
  • 6
    性能测试脚本的编写和调试
  • 7
    Docker五分钟搭建Wordpress
  • 8
    DB 与 Elasticsearch 混合应用之数据实时同步
  • 9
    npm install 一直卡着不动如何解决
  • 10
    香港拼音-汉字对照表
  • 1
    QWT 3D 模块重构记：旧渲染管线改进介绍及实时瀑布图示例
    143
  • 2
    如何在阿里云服务器ECS上部署DeepSeek Harness开源智能体？图文教程来了
    30
  • 3
    rpi 这些扩展到底怎么选？一张工具地图看懂 16 个 Rust 插件
    24
  • 4
    用 DatI + WorkBuddy 零代码构建带数据库的 Agent 轻应用
    44
  • 5
    SLB 负载均衡入门：一台顶不住就加一台，但加之前先看这篇
    32
  • 6
    RDS MySQL 上云实战：自建数据库迁移托管实例的一次完整对比
    31
  • 7
    VMware 【11】给虚拟机添加永久写入磁盘
    24
  • 8
    阿里云轻量应用服务器全新升级：200Mbps峰值公网带宽 + 无固定流量，值得买！
    35
  • 9
    把百炼接进六个 coding agent：config agent 适配层的写入语义与配置治理清单
    44
  • 10
    模型下线生效日的依赖治理：三层官方口径与二十个模型 ID 的两次对账
    41

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！