Vue3 + Spring Boot 全栈实战：从零搭建在线彩票模拟系统

Vue3 + Spring Boot 全栈实战：从零搭建在线彩票模拟系统

📢 本文分享一个完整的全栈项目------在线彩票模拟系统，涵盖前端Vue3、后端Spring Boot、数据库MySQL等技术栈，适合全栈学习者参考。

一、项目简介

这是一个在线彩票模拟系统，采用前后端分离架构，支持多种彩票玩法的模拟投注。项目功能完整，界面美观，已做移动端适配，可以作为全栈学习项目或毕业设计参考。

功能特性

• 多种彩种支持（双色球、大乐透、七乐采、七星彩）
• 普通选号 + 胆拖投注两种模式
• 智能机选功能（一键选号、批量机选）
• 实时开奖 + 历史开奖查询
• 用户注册登录、JWT鉴权
• 投注记录、中奖查询、余额管理
• 响应式设计，支持PC端和移动端
  
  

技术栈

前端： Vue 3 + Vite + Element Plus + Vue Router + Axios

后端： Spring Boot 3.2 + MyBatis-Plus + MySQL + JWT

开发工具： JDK 21 + Node.js 18+

---

二、项目架构

前端结构

frontend/
├── src/
│   ├── api/                    # API接口封装
│   │   └── index.js            # Axios配置、拦截器
│   ├── views/                  # 页面组件
│   │   ├── Home.vue            # 首页
│   │   ├── Login.vue           # 登录注册
│   │   ├── Bet.vue             # 投注页
│   │   ├── Results.vue         # 开奖结果
│   │   ├── MyBets.vue          # 投注记录
│   │   └── Profile.vue         # 个人中心
│   ├── App.vue                 # 根组件
│   ├── main.js                 # 入口文件
│   └── router.js               # 路由配置
├── vite.config.js
└── package.json

后端结构

backend/
└── src/main/java/com/lottery/
    ├── config/                 # 配置类
    ├── controller/             # 控制器
    ├── service/                # 业务逻辑
    ├── entity/                 # 实体类
    ├── mapper/                 # 数据访问
    ├── dto/                    # 数据传输对象
    └── util/                   # 工具类（JWT）

---

三、核心功能实现

3.1 投注页面（核心）

投注页面是系统的核心，实现了选号、胆拖、投注单管理等功能。

普通选号模式：

<template>
  <div class="ball-picker">
    <span v-for="n in zone.max - zone.min + 1" :key="n"
      :class="['ball-btn', isSelected(n) && 'selected']"
      @click="toggleBall(n)">
      {{ String(n + zone.min - 1).padStart(2, '0') }}
    </span>
  </div>
</template>

胆拖投注逻辑：

// 胆拖组合数计算 C(tuo, need)
const dantuoCombos = computed(() => {
  const need = dantuoConfig.value.totalCount - danSelection.value.length;
  const tuoCount = tuoSelection.value.length;
  if (danSelection.value.length === 0 || tuoCount < need) return 0;
  return combination(tuoCount, need);
});

3.2 JWT认证

使用JWT实现无状态认证，前端通过Axios拦截器自动携带Token：

// 请求拦截器
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

3.3 移动端适配

项目针对移动端做了多项优化：

/* 底部安全区域适配（刘海屏） */
.bottom-nav {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 响应式统计栏 */
@media (max-width: 375px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 触摸目标优化（≥44px） */
.ball-btn {
  width: 44px;
  height: 44px;
  -webkit-tap-highlight-color: transparent;
}

---

四、数据库设计

核心表结构

-- 用户表
CREATE TABLE `user` (
  `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` VARCHAR(100) NOT NULL,
  `nickname` VARCHAR(50),
  `balance` DECIMAL(12,2) DEFAULT 10000.00,
  `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- 彩种表
CREATE TABLE `lottery_type` (
  `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `code` VARCHAR(20) NOT NULL UNIQUE,
  `rule_json` TEXT,
  `bet_price` DECIMAL(10,2) DEFAULT 2.00
);

-- 投注记录表
CREATE TABLE `bet` (
  `id` BIGINT PRIMARY KEY AUTO_INCREMENT,
  `user_id` BIGINT NOT NULL,
  `lottery_type_id` BIGINT NOT NULL,
  `draw_id` BIGINT NOT NULL,
  `numbers_json` TEXT NOT NULL,
  `amount` DECIMAL(10,2) NOT NULL,
  `status` TINYINT DEFAULT 0,
  `prize_amount` DECIMAL(12,2) DEFAULT 0
);

---

五、部署指南

环境要求

• JDK 21+
• Node.js 18+
• MySQL 8.0+

部署步骤

1. 数据库初始化

mysql -u root -p < init.sql

2. 后端打包运行

cd backend
mvn clean package -DskipTests
java -jar target/lottery-0.0.1-SNAPSHOT.jar

3. 前端构建部署

cd frontend
npm install
npm run build

4. Nginx配置

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

    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8020/api/;
    }
}

---

六、项目亮点总结

1. 完整功能 --- 涵盖用户系统、投注系统、开奖系统、记录查询等完整业务流程
2. 代码规范 --- 组件化开发、统一的API封装、规范的异常处理
3. 移动端适配 --- 响应式布局、安全区域适配、触摸优化
4. 安全设计 --- JWT认证、API拦截、CORS配置
5. 易于扩展 --- 清晰的代码结构，支持二次开发

---

七、写在最后

这个项目是一个很好的全栈学习案例，涵盖了Vue3、Spring Boot、MySQL等主流技术栈的实际应用。无论是用于学习提升还是毕业设计，都能提供很好的参考价值。

如果文章对你有帮助，欢迎点赞、收藏、关注，后续会分享更多全栈项目实战内容。

---

版权声明： 本文为原创文章，转载请注明出处。

免责声明： 本项目为模拟系统，仅供技术学习使用，不涉及真实资金交易。