# 抢答器web版

**Repository Path**: boronzhang/answerer-web-version

## Basic Information

- **Project Name**: 抢答器web版
- **Description**: 抢答器web版，前（VUE3）版本
该项目前端是实时抢答系统，具有良好的用户体验和稳定的通信能力。

前端框架与核心技术
Vue.js 3 - 使用 Composition API 风格（data、computed、methods）
响应式数据绑定 - 通过 Vue 的响应式系统管理应用状态
组件化开发 - 单文件组件结构（template、script、style）
实时通信技术
WebSock
- **Primary Language**: 其他
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-06-23
- **Last Updated**: 2026-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- 
 * @Author: zh672903 394703489@qq.com
 * @Date: 2025-11-11 08:21:25
 * @LastEditors: zh672903 394703489@qq.com
 * @LastEditTime: 2025-11-14 11:13:29
 * @FilePath: \preemptive-frontend\README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- # preemptive-frontend

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
 --> 
[TOC]

开发模式 (npm run serve)
生产模式 (npm run build)

# 安装依赖
npm install

# 开发模式运行
npm run serve
 或
npm run dev

# 访问地址

## 主持人端: http://localhost:3000/host

## 战队端: http://localhost:3000/team


## 打包

- 进入项目目录
cd preemptive-frontend

- 安装依赖
npm install

- 构建生产版本
npm run build

## 部署

部署选项
- 1. 静态文件部署（与后端分离）
将 dist 文件夹中的内容复制到目标机器上的 Web 服务器（如 Nginx、Apache 等）
配置 Web 服务器来提供这些静态文件
确保后端 API 可以从该机器访问
更新 vue.config.js 中的代理设置，使 target 指向你的后端服务器

- 2. 与 Spring Boot 后端集成部署
将构建好的前端文件复制到 Spring Boot 项目的 src/main/resources/static 目录下
将整个 Spring Boot 应用程序打包成 JAR 文件
将 JAR 文件部署到目标机器
运行命令：java -jar your-application.jar



# 关于抢答系统涉及到的技术介绍

该项目前端是实时抢答系统，具有良好的用户体验和稳定的通信能力。

## 前端框架与核心技术
1. **Vue.js 3** - 使用 Composition API 风格（data、computed、methods）
2. **响应式数据绑定** - 通过 Vue 的响应式系统管理应用状态
3. **组件化开发** - 单文件组件结构（template、script、style）

## 实时通信技术
4. **WebSocket 实时通信**
   - **SockJS** - WebSocket 降级兼容方案
   - **STOMP** - 简单的文本定向消息协议
   - 支持断线重连、心跳检测机制

## 动画与交互效果
5. **CSS3 动画**
   - 关键帧动画（@keyframes）
   - 过渡效果（transition）
   - 变换动画（transform、scale、rotate）
   - 背景粒子动画系统

6. **动态样式绑定**
   - 条件 class 绑定（:class）
   - 动态样式计算（:style）
   - 状态驱动的 UI 变化

## UI/UX 设计技术
7. **现代 CSS 特性**
   - Flexbox 布局
   - CSS Grid（隐含）
   - 背景模糊效果（backdrop-filter）
   - 渐变背景（linear-gradient）
   - 玻璃拟态设计风格

8. **响应式设计**
   - 媒体查询适配移动端
   - 相对单位确保跨设备兼容性

## 状态管理
9. **本地状态管理**
   - 组件内状态管理
   - localStorage 持久化存储
   - 计算属性派生状态

## 特殊功能实现
10. **倒计时系统**
    - setInterval 定时器管理
    - 全屏浮动倒计时效果
    - 粒子动画特效

11. **消息系统**
    - 实时消息推送
    - 消息分类与样式区分
    - 自动滚动与清理机制

# 界面效果图

## 主持人界面
- 控制台登录（默认密码：admin123）
![1763088696758](image/README/1763088696758.png)
- 主持人界面
![1763088626167](image/README/1763088626167.png)
- 产生抢答队列
![1763088819679](image/README/1763088819679.png)
- 抢答倒计时风格1
![1763088874113](image/README/1763088874113.png)
- 抢答倒计时风格2
![1763088879590](image/README/1763088879590.png)

## 参赛者界面
- 参赛者抢答登录
![1763088993545](image/README/1763088993545.png)
- 参赛者待抢答
![1763088845349](image/README/1763088845349.png)
- 参赛者抢答中
![1763088853854](image/README/1763088853854.png)
- 参赛者抢答倒计时
![1763088864042](image/README/1763088864042.png)