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

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

2026-04-28 255
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教程来源 http://xcfsr.cn 本节详述商城系统运行与测试全流程：涵盖JDK 11、Maven、MySQL、Node.js环境配置；IDE/命令行后端启动及端口调整；Vite前端开发与生产构建；Postman对用户、商品、购物车、订单等14个核心API的完整测试；并提供端口占用、数据库连接、跨域、Token认证等常见问题解决方案。

第五部分：运行与测试

5.1 开发环境准备详解
5.1.1 JDK安装与配置
JDK是Java开发的基础环境。商城系统后端使用JDK 11，以下是详细安装步骤：

Windows系统：

访问Oracle官网下载JDK 11安装包

运行安装程序，记住安装路径（例如：C:\Program Files\Java\jdk-11）

配置环境变量：

右键"此电脑" → 属性 → 高级系统设置 → 环境变量

新建系统变量 JAVA_HOME，值为JDK安装路径

在Path变量中添加：%JAVA_HOME%\bin

验证安装：打开命令提示符，输入java -version

macOS/Linux系统：

# macOS使用Homebrew安装
brew install openjdk@11

# Ubuntu/Debian
sudo apt update
sudo apt install openjdk-11-jdk

# CentOS/RHEL
sudo yum install java-11-openjdk-devel

安装后验证：

java -version
# 输出示例：
# openjdk version "11.0.20" 2023-07-18 LTS
# OpenJDK Runtime Environment (build 11.0.20+8-LTS)
# OpenJDK 64-Bit Server VM (build 11.0.20+8-LTS, mixed mode)

5.1.2 Maven安装与配置
Maven是Java项目的依赖管理和构建工具。

下载与安装：

# macOS
brew install maven

# Ubuntu/Debian
sudo apt install maven

# Windows：从Apache官网下载zip包，解压到目录，配置MAVEN_HOME环境变量

配置国内镜像（加速依赖下载）：
编辑~/.m2/settings.xml（Linux/macOS）或C:\Users\用户名.m2\settings.xml（Windows）：

<settings>
    <mirrors>
        <mirror>
            <id>aliyun</id>
            <name>Aliyun Maven Mirror</name>
            <url>https://maven.aliyun.com/repository/public</url>
            <mirrorOf>central</mirrorOf>
        </mirror>
    </mirrors>
</settings>

验证安装：

mvn -version
# 输出示例：
# Apache Maven 3.8.8
# Java version: 11.0.20, vendor: Oracle Corporation

5.1.3 MySQL安装与配置
Windows安装：

下载MySQL Installer

选择Developer Default安装类型

设置root密码（记住这个密码，后续配置需要）

选择端口（默认3306）

macOS安装：

brew install mysql
brew services start mysql

Ubuntu/Debian安装：

sudo apt update
sudo apt install mysql-server
sudo mysql_secure_installation  # 安全配置

创建数据库和用户：

-- 登录MySQL
mysql -u root -p

-- 创建商城数据库
CREATE DATABASE mall_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 创建专用用户（生产环境建议使用，开发环境可直接用root）
CREATE USER 'mall_user'@'localhost' IDENTIFIED BY 'Mall@2024';
GRANT ALL PRIVILEGES ON mall_db.* TO 'mall_user'@'localhost';
FLUSH PRIVILEGES;

-- 验证数据库创建
SHOW DATABASES;
USE mall_db;

5.1.4 Node.js安装与配置

# 检查是否已安装
node -v
npm -v

# 如未安装，访问nodejs.org下载安装包
# 推荐使用nvm管理Node版本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18

# 配置国内镜像加速（可选）
npm config set registry https://registry.npmmirror.com

5.2 后端启动与验证
5.2.1 使用IDE启动（推荐）
IntelliJ IDEA配置：

打开IDEA，选择File → Open，选择mall-system目录

等待Maven依赖下载完成（首次下载需要几分钟）

配置Spring Boot运行配置：

点击右上角Add Configuration → Spring Boot

Main class选择com.mall.MallSystemApplication

Active profiles可留空或填dev

点击运行按钮（绿色三角形）

启动成功标志：

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.7.14)

2024-01-15 10:30:00.123  INFO 12345 --- [main] com.mall.MallSystemApplication    : Starting MallSystemApplication using Java 11
2024-01-15 10:30:02.456  INFO 12345 --- [main] com.mall.MallSystemApplication    : Started MallSystemApplication in 5.123 seconds

5.2.2 使用Maven命令行启动

cd mall-system

# 首次运行需要下载依赖
mvn dependency:resolve

# 编译项目
mvn clean compile

# 运行Spring Boot应用
mvn spring-boot:run

# 或者打包成jar后运行
mvn clean package
java -jar target/mall-system-1.0.0.jar

5.2.3 修改端口配置
如果8080端口被占用，可以修改配置文件：

# application.yml
server:
  port: 8081  # 改为其他可用端口

或在启动时指定：

mvn spring-boot:run -Dspring-boot.run.arguments=--server.port=8081

5.3 前端启动与构建
5.3.1 安装依赖

cd mall-ui

# 首次安装依赖（需要几分钟）
npm install

# 安装完成后查看已安装的依赖
npm list --depth=0

# 应包含以下主要依赖：
# - vue@^3.3.0
# - element-plus@^2.4.0
# - axios@^1.6.0
# - vue-router@^4.2.0
# - pinia@^2.1.0

5.3.2 启动开发服务器

# 启动开发服务器
npm run dev

# 启动成功输出：
# VITE v4.5.0  ready in 500 ms
# ➜  Local:   http://localhost:5173/
# ➜  Network: use --host to expose

5.3.3 Vite代理配置详解

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    server: {
        port: 5173,
        proxy: {
            // 将以 /api 开头的请求代理到后端服务器
            '/api': {
                target: 'http://localhost:8080',  // 后端地址
                changeOrigin: true,               // 修改请求头的Origin
                rewrite: (path) => path.replace(/^\/api/, '')  // 移除/api前缀
            }
        }
    }
});

5.3.4 生产环境构建

# 构建生产版本
npm run build

# 构建产物位于 dist/ 目录
# 预览构建结果
npm run preview

5.4 API接口详细测试（Postman）
5.4.1 Postman环境配置
下载安装Postman：访问postman.com/downloads下载

创建环境变量：

点击Environments → New Environment

命名为商城系统-开发环境

添加变量：base_url = http://localhost:8080/api

添加变量：token（初始为空，登录后自动填充）

配置自动获取Token：

登录接口的Tests选项卡中添加脚本：

if (pm.response.code === 200) {
    var response = pm.response.json();
    if (response.code === 200 && response.data.token) {
        pm.environment.set("token", response.data.token);
    }
}

5.4.2 用户模块接口测试
接口1：用户注册

请求方法: POST
请求URL: {
  {base_url}}/user/register
请求头: Content-Type: application/json
请求体:
{
    "username": "test_user_01",
    "password": "123456",
    "phone": "13800138001",
    "email": "test@example.com",
    "nickname": "测试用户"
}

预期响应:
{
    "code": 200,
    "message": "success",
    "data": null,
    "timestamp": 1705305600000
}

接口2：用户登录

请求方法: POST
请求URL: {
  {base_url}}/user/login
请求体:
{
    "username": "test_user_01",
    "password": "123456"
}

预期响应:
{
    "code": 200,
    "message": "success",
    "data": {
        "userId": 2,
        "username": "test_user_01",
        "nickname": "测试用户",
        "role": "user",
        "token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ0ZXN0X3VzZXJfMDEiLCJ1c2VySWQiOjIsInVzZXJuYW1lIjoidGVzdF91c2VyXzAxIiwicm9sZSI6InVzZXIiLCJleHAiOjE3MDUzOTIwMDB9...",
        "avatar": null
    },
    "timestamp": 1705305600000
}

接口3：获取用户信息

请求方法: GET
请求URL: {
  {base_url}}/user/info
请求头: Authorization: Bearer {
  {token}}

预期响应:
{
    "code": 200,
    "data": {
        "id": 2,
        "username": "test_user_01",
        "nickname": "测试用户",
        "phone": "13800138001",
        "email": "test@example.com",
        "role": "user"
    }
}

5.4.3 商品模块接口测试
接口4：商品列表（分页+筛选）

请求方法: GET
请求URL: {
  {base_url}}/product/list?page=1&size=10&keyword=手机

预期响应:
{
    "code": 200,
    "data": {
        "records": [
            {
                "id": 1,
                "categoryId": 4,
                "name": "iPhone 15 Pro 256GB",
                "subtitle": "今年最新旗舰",
                "mainImage": "/images/iphone15.jpg",
                "price": 8999.00,
                "stock": 99,
                "sales": 1,
                "status": 1
            }
        ],
        "total": 1,
        "pages": 1,
        "current": 1,
        "size": 10
    }
}

接口5：商品详情

请求方法: GET
请求URL: {
  {base_url}}/product/detail/1

预期响应:
{
    "code": 200,
    "data": {
        "id": 1,
        "name": "iPhone 15 Pro 256GB",
        "price": 8999.00,
        "stock": 100,
        "detail": "iPhone 15 Pro 详细描述..."
    }
}

接口6：商品分类列表

请求方法: GET
请求URL: {
  {base_url}}/product/categories

预期响应:
{
    "code": 200,
    "data": [
        {
            "id": 1,
            "name": "手机数码",
            "children": [
                {"id": 4, "name": "手机通讯"},
                {"id": 5, "name": "数码配件"}
            ]
        },
        {
            "id": 2,
            "name": "电脑办公",
            "children": [
                {"id": 6, "name": "电脑整机"},
                {"id": 7, "name": "电脑配件"}
            ]
        }
    ]
}

5.4.4 购物车接口测试
接口7：添加商品到购物车

请求方法: POST
请求URL: {
  {base_url}}/cart/add?productId=1&quantity=2
请求头: Authorization: Bearer {
  {token}}

预期响应:
{
    "code": 200,
    "message": "success",
    "data": null
}

接口8：获取购物车列表

请求方法: GET
请求URL: {
  {base_url}}/cart/list
请求头: Authorization: Bearer {
  {token}}

预期响应:
{
    "code": 200,
    "data": {
        "items": [
            {
                "id": 1,
                "productId": 1,
                "productName": "iPhone 15 Pro 256GB",
                "productImage": "/images/iphone15.jpg",
                "productPrice": 8999.00,
                "quantity": 2,
                "checked": 1,
                "totalPrice": 17998.00
            }
        ],
        "totalAmount": 17998.00,
        "selectedCount": 1
    }
}

接口9：更新购物车商品数量

请求方法: PUT
请求URL: {
  {base_url}}/cart/update?cartId=1&quantity=3
请求头: Authorization: Bearer {
  {token}}

接口10：删除购物车商品

请求方法: DELETE
请求URL: {
  {base_url}}/cart/remove/1
请求头: Authorization: Bearer {
  {token}}

5.4.5 订单模块接口测试
接口11：创建订单

请求方法: POST
请求URL: {
  {base_url}}/order/create
请求头: 
  Authorization: Bearer {
  {token}}
  Content-Type: application/json
请求体:
{
    "addressId": 1,
    "userNote": "请尽快发货"
}

预期响应:
{
    "code": 200,
    "data": {
        "id": 1,
        "orderNo": "2024050112345601000001",
        "totalAmount": 17998.00,
        "payAmount": 17998.00,
        "orderStatus": 0,
        "orderStatusText": "待支付",
        "createTime": "2024-05-01 12:34:56",
        "items": [
            {
                "productId": 1,
                "productName": "iPhone 15 Pro 256GB",
                "productPrice": 8999.00,
                "quantity": 2,
                "totalAmount": 17998.00
            }
        ]
    }
}

接口12：获取订单列表

请求方法: GET
请求URL: {
  {base_url}}/order/list?page=1&size=10
请求头: Authorization: Bearer {
  {token}}

接口13：获取订单详情

请求方法: GET
请求URL: {
  {base_url}}/order/detail/1
请求头: Authorization: Bearer {
  {token}}

接口14：取消订单

请求方法: PUT
请求URL: {
  {base_url}}/order/cancel/1
请求头: Authorization: Bearer {
  {token}}

第六部分：常见问题与解决方案

6.1 后端启动问题
问题1：数据库连接失败

java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

解决方案：

确认MySQL服务已启动：sudo systemctl status mysql

确认数据库用户和密码正确

检查application.yml中的数据库连接配置
问题2：端口被占用

Web server failed to start. Port 8080 was already in use.

解决方案：

关闭占用端口的进程：lsof -i:8080 → kill -9 PID

或修改application.yml中的端口配置

问题3：依赖下载失败

解决方案：配置国内Maven镜像（见5.1.2节）

6.2 前端启动问题
问题1：依赖安装失败

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

解决方案：

删除node_modules和package-lock.json重新安装

使用npm install --legacy-peer-deps

问题2：跨域请求失败

Access to XMLHttpRequest at 'http://localhost:8080/api/...' from origin 'http://localhost:5173' has been blocked by CORS policy

解决方案：

检查后端CORS配置

检查Vite代理配置是否正确

6.3 API调用问题
问题1：401未认证错误

{
    "code": 401,
    "message": "Full authentication is required to access this resource"
}

解决方案：

确认已登录并获取token

检查请求头是否携带：Authorization: Bearer {token}

检查token是否过期（24小时有效期）

问题2：403权限不足

{
    "code": 403,
    "message": "Access is denied"
}

解决方案：

确认用户角色是否有权限访问该接口

管理员接口需要admin角色

检查用户权限：SELECT * FROM user WHERE id = 1;

6.4 数据库问题
问题1：表不存在

Table 'mall_db.product' doesn't exist

解决方案：

确认已执行SQL建表脚本

检查application.yml中的数据库名称配置

问题2：中文乱码

解决方案：

确认数据库字符集为utf8mb4

确认连接URL包含characterEncoding=utf8

url: jdbc:mysql://localhost:3306/mall_db?useUnicode=true&characterEncoding=utf8

来源：
http://lemci.cn

文章标签：
Java
关系型数据库
MySQL
Maven
JavaScript
游客xp6ru7c63sdiu
目录
相关文章
霍格沃兹测试开发学社
|
5月前
|
机器学习/深度学习 存储 人工智能
学会Skill开发后，我的月薪涨了1万5
AI测试正经历底层重构：从写脚本转向设计AI系统。大厂招聘已明确要求AI Agent理解、Skill封装与MCP工程能力，传统自动化技能加速贬值。掌握“Agent+Skills+MCP”闭环能力，成为测试工程师涨薪跃迁的核心壁垒。
霍格沃兹测试开发学社
373 3
游客xp6ru7c63sdiu
|
6月前
|
传感器 存储 安全
嵌入式进阶指南：从“代码搬运工”到“系统架构师”的跃迁之路
教程来源 https://app-a87ujc988w01.appmiaoda.com/ 《嵌入式进阶指南》助力开发者从“代码搬运工”跃升为“系统架构师”。涵盖性能调优、RTOS内核剖析、嵌入式安全、系统架构设计及功耗管理五大核心维度，融合RISC-V、TinyML等前沿趋势，提供实战路径与深度原理。
游客xp6ru7c63sdiu
404 1
游客xp6ru7c63sdiu
|
5月前
|
自然语言处理 前端开发 容器
前端组件库 ——FormMaking 知识点大全（二）
教程来源 https://zlpow.cn FormMaking字段体系涵盖基础、高级与布局三类字段，支持丰富配置；全局配置含国际化、默认属性及字段标识绑定，助力低代码高效构建企业级表单。
游客xp6ru7c63sdiu
227 3
1575030468644753
|
5月前
|
缓存 运维 中间件
【开源剪映小助手】生产环境部署
本指南详解 capcut-mate（基于 FastAPI 的视频编辑自动化工具）本地开发环境的 Docker 容器化部署，涵盖项目结构、核心组件、架构设计、性能优化与故障排查，助力开发者快速启动与调试。
1575030468644753
1021 4
天隆金
|
5月前
|
编解码 并行计算 算法
用于图像分类的EMAP：概念、实现与工具支持
用于图像分类的EMAP：概念、实现与工具支持
天隆金
182 2
游客xp6ru7c63sdiu
|
6月前
|
Java 测试技术 开发者
Spring学习知识点大全（一）
教程来源 https://app-abdss1rim1oh.appmiaoda.com Spring是Java企业级开发的事实标准框架，以轻量、非侵入和强大DI/AOP为核心，涵盖IoC容器、AOP、数据访问、Web及测试等全栈能力。本文系统梳理其基础概念、Bean管理、依赖注入与生命周期等核心知识，助力初学者构建体系，赋能开发者深入进阶。
游客xp6ru7c63sdiu
477 4
游客xp6ru7c63sdiu
|
6月前
|
算法 编译器 C语言
C语言函数知识点大全（一）
教程来源 https://www.xcfsr.cn/category/cloud.html 本文系统讲解C语言函数核心知识：从基础语法（定义、声明、调用）、参数传递（值传/指针传、数组与可变参数），到返回值处理（基本类型、指针、结构体、void），涵盖库函数、递归及模块化设计思想，助力初学者构建完整知识体系，也为进阶开发者提供实用参考。
游客xp6ru7c63sdiu
399 0
游客mggwvmlq4pvtq
|
8月前
|
存储 弹性计算 人工智能
2026年阿里云免费云服务器、免费云产品指南：领取教程、资源解析与避坑建议
阿里云长期推出免费云产品试用体系，覆盖从基础算力到创新工具的全场景需求，为个人开发者、学生及初创企业降低了上云门槛。但免费资源背后存在配置限制、合规要求等细节问题，需结合自身场景理性选择。以下从资源矩阵、使用体验、避坑技巧及适用场景四方面，用通俗语言详细解析，帮助高效利用免费资源。
游客mggwvmlq4pvtq
5825 9
Naylor
|
存储 SQL 关系型数据库
Mysql高可用架构方案
本文阐述了Mysql高可用架构方案，介绍了 主从模式，MHA模式，MMM模式，MGR模式 方案的实现方式，没有哪个方案是完美的，开发人员在选择何种方案应用到项目中也没有标准答案，合适的才是最好的。
Naylor
1554 3
Mysql高可用架构方案

热门文章

最新文章

  • 1
    阿里云代金券领取地址及使用规则限制（新老用户/新购/首购/复购）
  • 2
    MySQL数据库下载安装教程（Windows&Linux）
  • 3
    配置中心原理和选型：Disconf、Apollo、Spring Cloud Config 和 Nacos
  • 4
    手把手教你安装Keil MDK5：官方网盘资源+芯片支持包配置详解（附调试实战）
  • 5
    ECS 按量付费转包年包月支持按周啦
  • 6
    寻找 K8s 1.14 Release 里的“蚌中之珠”
  • 7
    三张图读懂Greenplum在企业的正确使用姿势
  • 8
    解决办法：error: <item> inner element must either be a resource reference or empty.
  • 9
    初识安全
  • 10
    sql 索引 填充因子（转）
  • 1
    阿里云轻量应用服务器2026最新收费价格：2核2G、2核4G、4核8G和4核16G配置
    53
  • 2
    麻了！在线改 DOCX 最怕格式一保存就崩：docx-editor 把 OOXML、修订和协作留在浏览器
    26
  • 3
    MySQL索引为什么必须用B+树？从磁盘IO深度推导
    40
  • 4
    应届生面试被问「接口超时和重试怎么测」：别只答「设个超时时间」，这套答法让面试官眼前一亮
    27
  • 5
    我把大模型接进CI后，失败用例自动归因，报告直接发飞书
    33
  • 6
    Google公开Agent Quality Flywheel：为什么改Prompt的模型不能同时当裁判？
    26
  • 7
    人行道场景检测数据集 | 10300张YOLO智慧城市数据集
    27
  • 8
    初级测试也能做的本地Agent项目：从Tool Trace到离线回归，只需4张证据表
    28
  • 9
    2026年美团职级薪资：测试开发L5—L10能拿多少？附AI测试社招面试题
    28
  • 10
    会员次卡莫名被多划一次：门店计次卡核销的幂等、并发扣减与对账实战
    33

    • 相关电子书

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