纯干货：手把手搭建SpringBoot+Vue商城系统

一、环境准备与依赖安装

在开始编写代码之前，必须确保本地开发环境已经配置好以下基础软件。请严格按照以下版本进行安装，以避免兼容性问题。

• JDK 17+：后端运行环境。
• Maven 3.8+：项目构建工具。
• Node.js 18+：前端运行环境。
• MySQL 8.0+：数据存储。
• Redis 7.0+：缓存服务。
• Docker & Docker Compose：容器化部署工具。

打开终端，分别执行以下命令验证环境：

java -version
mvn -v
node -v
mysql --version
redis-cli --version
docker --version
docker-compose --version

如果所有命令均返回版本号，则环境准备就绪。

二、数据库设计与初始化

我们将构建一个包含商品表和用户表的简化版商城数据库。请确保MySQL服务已启动，执行以下SQL脚本完成数据库和表的创建。

创建数据库：

CREATE DATABASE IF NOT EXISTS mall_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE mall_system;

创建商品表（t_product）：

CREATE TABLE t_product (
id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '商品ID',
name VARCHAR(255) NOT NULL COMMENT '商品名称',
price_t DECIMAL(10, 2) NOT NULL COMMENT '商品价格',
stock INT DEFAULT 0 COMMENT '库存数量',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品表';

初始化测试数据：

INSERT INTO t_product (name, price_t, stock) VALUES
('iPhone 15 Pro', 7999.00, 100),
('MacBook Air M2', 8999.00, 50),
('Sony WH-1000XM5', 2499.00, 200);

三、后端服务搭建

后端采用SpringBoot 3.2 + MyBatis Plus架构。首先创建项目结构，建议使用Spring Initializr或直接创建Maven项目。

1. 项目依赖配置（pom.xml）

请确保pom.xml中包含以下完整依赖，版本号已锁定以保证稳定性：

4.0.0

org.springframework.boot
spring-boot-starter-parent
3.2.0

com.mall
mall-backend
1.0.0

17
3.5.5




org.springframework.boot
spring-boot-starter-web



com.baomidou
mybatis-plus-boot-starter
${mybatis-plus.version}



com.mysql
mysql-connector-j
runtime



org.projectlombok
lombok
true





org.springframework.boot
spring-boot-maven-plugin

2. 配置文件（application.yml）

在src/main/resources目录下创建application.yml，配置数据库连接及端口：

server:
port: 8080
spring:
application:
name: mall-system
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/mall_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: 123456  请替换为本地MySQL密码
mybatis-plus:
configuration:
map-underscore-to-camel-case: true
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

3. 核心代码实现

创建实体类Product.java：

package com.mall.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.math.BigDecimal;
import java.time.LocalDateTime;
@Data
public class Product {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private BigDecimal priceT;
private Integer stock;
private LocalDateTime createTime;
private LocalDateTime updateTime;
}

创建Mapper接口ProductMapper.java：

package com.mall.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.mall.entity.Product;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface ProductMapper extends BaseMapper {
}

创建Service层ProductService.java：

package com.mall.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.mall.entity.Product;
public interface ProductService extends IService {
}

创建Service实现类ProductServiceImpl.java：

package com.mall.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.mall.entity.Product;
import com.mall.mapper.ProductMapper;
import com.mall.service.ProductService;
import org.springframework.stereotype.Service;
@Service
public class ProductServiceImpl extends ServiceImpl implements ProductService {
}

创建Controller层ProductController.java，提供商品列表和新增接口：

package com.mall.controller;
import com.mall.entity.Product;
import com.mall.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
import java.util.List;
@RestController
@RequestMapping("/api/product")
public class ProductController {
@Autowired
private ProductService productService;
@GetMapping("/list")
public List list() {
return productService.list();
}
@PostMapping("/add")
public boolean add(@RequestBody Product product) {
return productService.save(product);
}
}

启动类MallApplication.java：

package com.mall;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.mall.mapper")
public class MallApplication {
public static void main(String[] args) {
SpringApplication.run(MallApplication.class, args);
}
}

四、前端页面开发

前端使用Vue 3 + Vite + Element Plus构建。在终端执行以下命令初始化项目：

npm create vite@latest mall-frontend -- --template vue
cd mall-frontend
npm install
npm install axios element-plus

1. 配置 Axios (utils/request.js)

创建src/utils/request.js，封装请求工具：

import axios from 'axios';
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
});
export default request;

2. 商品列表页面开发

修改src/App.vue，实现商品展示和添加功能：

在src/main.js中引入Element Plus样式：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('app')

五、Docker容器化部署

为了实现一键部署，我们将后端、前端、MySQL和Redis全部容器化。请在项目根目录创建以下文件。

1. 后端 Dockerfile

在mall-backend目录下创建Dockerfile：

FROM openjdk:17-slim
WORKDIR /app
COPY target/mall-backend-1.0.0.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

2. 前端 Dockerfile

在mall-frontend目录下创建Dockerfile：

FROM node:18-alpine as build-stage
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. Docker Compose 编排

在项目根目录创建docker-compose.yml，这是部署的核心文件：

version: '3.8'
services:
mysql:
image: mysql:8.0
container_name: mall-mysql
environment:
MYSQL_ROOT_PASSWORD: 123456
MYSQL_DATABASE: mall_system
ports:
- "3306:3306"
volumes:
- ./mysql-data:/var/lib/mysql
- ./init.sql:/docker-entrypoint-initdb.d/init.sql
backend:
build: ./mall-backend
container_name: mall-backend
ports:
- "8080:8080"
depends_on:
- mysql
environment:
SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/mall_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
SPRING_DATASOURCE_USERNAME: root
SPRING_DATASOURCE_PASSWORD: 123456
frontend:
build: ./mall-frontend
container_name: mall-frontend
ports:
- "80:80"
depends_on:
- backend

注意： 请将第二步中的SQL脚本保存为项目根目录下的init.sql，以便Docker自动初始化数据库。同时，在执行部署前，请先在本地执行mvn clean package -DskipTests打包后端项目。

六、启动与验证

所有文件准备就绪后，在项目根目录执行以下命令启动整个系统：

docker-compose up -d --build

执行过程会自动拉取镜像、编译代码，请耐心等待。启动成功后，执行docker-compose ps查看容器状态，确保所有服务均为Up状态。

打开浏览器访问 http://localhost，你将看到商城管理界面。此时，页面会自动从后端API获取数据并展示我们在SQL中预置的商品。尝试在表单中输入新商品信息并点击“添加商品”，列表将实时刷新，数据将持久化到MySQL容器中。