ZhaoLe/3-大论文相关算法源代码/le/edu_game_frontend/README.md

教育游戏 - 管理后台

项目简介

这是教育游戏系统的管理后台，使用 Vue 3 + Vite + Element Plus 构建，提供用户管理、题目管理、数据统计等功能。

技术栈

• Vue 3
• Vite 6
• Element Plus
• Pinia（状态管理）
• Vue Router（路由）
• ECharts（数据可视化）
• Axios（HTTP请求）

项目结构

edu_game_frontend/
├── src/
│   ├── api/          # API请求
│   ├── assets/       # 静态资源
│   ├── components/   # 通用组件
│   ├── views/        # 页面组件
│   ├── router/       # 路由配置
│   ├── stores/       # 状态管理
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── vite.config.js    # Vite配置
└── package.json

快速启动

环境要求

• Node.js 16+
• npm 或 yarn

安装依赖

npm install

开发模式运行

npm run dev

服务默认地址: http://localhost:5173

生产构建

npm run build

构建产物位于 dist/ 目录

预览构建

npm run preview

配置说明

后端API地址配置

在 vite.config.js 中配置开发环境的后端代理：

const devApiTarget = process.env.VITE_DEV_API_TARGET || 'http://localhost:8080';

也可以通过环境变量设置：

# Windows PowerShell
$env:VITE_DEV_API_TARGET = "http://your-backend:8080"
npm run dev

功能模块

管理后台功能

• 管理员登录/登出
• 用户管理（查看、编辑用户信息）
• 题目管理（添加、编辑、删除题目）
• 游戏数据统计（答题情况、成就等）
• 数据可视化展示

默认账号

使用后端提供的管理员账号登录：

• 用户名: admin
• 密码: admin123

部署

Nginx 部署示例

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

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

    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
    }
}