Spring Boot + Vue3 + MySQL的微盘交易系统源码搭建全流程

1. 项目概述

本文介绍一套基于 Spring Boot、Vue3 和 MySQL 开发的模拟交易系统，包含用户端与管理后台，提供行情展示、K线图表、短周期交易、模拟账户、资产管理、充值提现审核及用户管理等功能。系统支持多语言界面，并适配电脑和手机端。下面重点讲解从零开始的搭建流程。

2. 技术选型

系统整体采用前后端分离架构，核心技术栈如下：

层次	技术	说明
前端框架	Vue3 + Vite	组合式 API，构建高效
UI 组件库	Element Plus	后台管理界面组件
移动端适配	Vant 4	用户端移动界面组件
状态管理	Pinia	全局状态管理
路由	Vue Router 4	前端路由管理
图表	ECharts	K线图与行情图表
后端框架	Spring Boot 3.x	Java 后端服务
持久层	MyBatis-Plus	数据库 ORM 框架
数据库	MySQL 8.x	业务数据存储
认证	Spring Security + JWT	登录鉴权
实时推送	WebSocket	行情实时更新

3. 环境准备

开始搭建前，需要准备以下开发环境：

JDK 17 及以上版本
Node.js 18 及以上版本
MySQL 8.x 数据库
Maven 3.8 及以上版本
Redis（用于缓存与会话管理，可选）

确认环境版本无误后，依次执行以下命令验证：

bash 复制代码

java -version
node -v
npm -v
mvn -v
mysql --version

4. 数据库设计

系统核心数据表包括用户表、资产账户表、交易订单表、充值提现记录表、行情数据表等。下面给出主要表结构设计。

4.1 用户表

sql 复制代码

CREATE TABLE `sys_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '加密密码',
  `email` varchar(100) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `status` tinyint DEFAULT '1' COMMENT '1启用 0禁用',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表';

4.2 模拟资产账户表

sql 复制代码

CREATE TABLE `asset_account` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL COMMENT '用户ID',
  `balance` decimal(20,8) DEFAULT '0.00000000' COMMENT '可用余额',
  `frozen` decimal(20,8) DEFAULT '0.00000000' COMMENT '冻结金额',
  `total_asset` decimal(20,8) DEFAULT '0.00000000' COMMENT '总资产',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='模拟资产账户表';

4.3 交易订单表

sql 复制代码

CREATE TABLE `trade_order` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `symbol` varchar(20) NOT NULL COMMENT '交易对',
  `side` tinyint NOT NULL COMMENT '1买入 2卖出',
  `price` decimal(20,8) NOT NULL,
  `quantity` decimal(20,8) NOT NULL,
  `amount` decimal(20,8) NOT NULL COMMENT '成交金额',
  `status` tinyint DEFAULT '0' COMMENT '0待成交 1已成交 2已撤销',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_symbol` (`user_id`, `symbol`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='交易订单表';

5. 后端搭建

5.1 创建 Spring Boot 项目

通过 Spring Initializr 创建项目，或直接使用 IDEA 新建 Spring Boot 工程。核心依赖如下：

xml 复制代码

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.5</version>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.11.5</version>
</dependency>

5.2 配置文件

yaml 复制代码

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/trade_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: your_password
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath*:mapper/**/*.xml
  configuration:
    map-underscore-to-camel-case: true

jwt:
  secret: your-secret-key
  expire: 86400

5.3 核心模块划分

后端按业务功能划分为以下模块：

auth：登录认证、JWT 签发与校验
user：用户信息管理
market：行情数据获取与推送
trade：下单、撤单、成交处理
asset：资产账户、资金流水
recharge：充值提现申请与审核
admin：后台管理接口

5.4 行情推送实现

行情数据通过 WebSocket 实时推送给前端。核心代码如下：

java 复制代码

@Component
public class MarketDataWebSocket {
    private final CopyOnWriteArraySet<Session> sessions = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
    }

    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
    }

    public void broadcast(String message) {
        for (Session session : sessions) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                // 处理异常
            }
        }
    }
}

6. 前端搭建

6.1 创建 Vue3 项目

使用 Vite 创建前端工程：

bash 复制代码

npm create vite@latest trade-frontend -- --template vue
cd trade-frontend
npm install

6.2 安装核心依赖

bash 复制代码

npm install vue-router@4 pinia axios element-plus @element-plus/icons-vue echarts
npm install vant@4

6.3 项目目录结构

text 复制代码

src/
├── api/            # 接口请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── stores/         # Pinia 状态管理
├── views/
│   ├── user/       # 用户端页面
│   └── admin/      # 管理后台页面
├── utils/          # 工具函数
├── App.vue
└── main.js

6.4 路由配置

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/user/Home.vue'),
    meta: { title: '行情首页' }
  },
  {
    path: '/trade',
    component: () => import('@/views/user/Trade.vue'),
    meta: { title: '交易中心' }
  },
  {
    path: '/assets',
    component: () => import('@/views/user/Assets.vue'),
    meta: { title: '资产管理' }
  },
  {
    path: '/admin',
    component: () => import('@/views/admin/Dashboard.vue'),
    meta: { title: '管理后台', requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

6.5 K线图组件

使用 ECharts 实现 K线图展示，核心代码如下：

vue 复制代码

<template>
  <div ref="chartRef" class="kline-chart"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null

onMounted(() => {
  chart = echarts.init(chartRef.value)
  loadKlineData()
})

function loadKlineData() {
  // 调用行情接口获取K线数据
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: [] },
    yAxis: { scale: true },
    series: [{
      type: 'candlestick',
      data: []
    }]
  }
  chart.setOption(option)
}

onBeforeUnmount(() => {
  chart && chart.dispose()
})
</script>

7. 多语言支持

系统支持多语言界面，采用 Vue I18n 实现前端国际化。安装依赖并配置：

bash 复制代码

npm install vue-i18n@9

javascript 复制代码

import { createI18n } from 'vue-i18n'

const messages = {
  'zh-CN': {
    nav: { home: '首页', trade: '交易', assets: '资产' }
  },
  'en-US': {
    nav: { home: 'Home', trade: 'Trade', assets: 'Assets' }
  }
}

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'zh-CN',
  messages
})

export default i18n

后端接口返回的错误信息同样支持多语言，通过国际化资源文件管理提示文案。

8. 移动端适配

用户端采用响应式设计，同时适配电脑和手机。主要策略如下：

使用 Vant 4 作为移动端组件库，在手机端提供更好的交互体验
通过媒体查询和 rem 布局实现不同屏幕尺寸的适配
管理后台以桌面端为主，使用 Element Plus 布局
K线图和行情列表在移动端自动调整尺寸

css 复制代码

/* 响应式适配示例 */
@media (max-width: 768px) {
  .trade-panel {
    flex-direction: column;
  }
  .kline-chart {
    height: 300px;
  }
}

9. 部署上线

9.1 后端打包

bash 复制代码

mvn clean package -DskipTests
java -jar target/trade-system-1.0.0.jar

9.2 前端构建

bash 复制代码

npm run build

构建产物生成在 dist 目录，可部署到 Nginx 或静态服务器。Nginx 配置示例：

nginx 复制代码

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /var/www/trade-frontend;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /ws/ {
        proxy_pass http://127.0.0.1:8080/ws/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

10. 总结

本文从技术选型、数据库设计、后端搭建、前端开发、多语言支持、移动端适配到部署上线，完整介绍了基于 Spring Boot、Vue3 和 MySQL 的模拟交易系统搭建流程。实际开发中建议按模块逐步推进，先跑通核心交易链路，再逐步完善行情推送、审核流程和后台管理功能。希望本文对正在搭建类似系统的开发者有所帮助。