第五部分：运行与测试
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
