# bicycle

**Repository Path**: guzhende/bicycle

## Basic Information

- **Project Name**: bicycle
- **Description**: 1
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 共享单车管理系统 - Bicycle Management System

## 项目简介

共享单车管理系统是一套专为城市共享单车运营设计的综合性平台，提供单车定位监控、停车区域管理、轨迹查询、用户管理等功能。采用绿色环保主题设计，突出低碳出行理念，支持高德地图3D可视化展示。

## 系统架构

- **前端**：Vue 3 + Vite + Element Plus + Pinia
- **地图**：高德地图 JS API 2.0（3D视图）
- **后端**：Spring Boot 2.7.18 + MyBatis-Plus 3.5.4 + Sa-Token 1.37.0
- **数据库**：MySQL 8.0 + Redis
- **消息**：Eclipse Paho MQTT

## 核心功能

### 1. 登录页面

- 绿色环保主题设计
- 品牌展示区（绿色出行 低碳环保）
- 用户登录/注册

![登录页面](image/登录页面.png)

### 2. 工作台

- 数据统计概览（单车总数、可用单车、停车区域、损坏单车）
- 环保数据展示（今日减碳量、骑行次数、累计里程）
- 快捷操作入口
- 最近投放单车列表

![工作台](image/工作台.png)

### 3. 地图总览

- 3D地图可视化展示
- 单车实时位置标记（不同状态不同颜色）
- 停车区域多边形展示
- 行政区图层叠加
- 行政区定位（缩放到行政区边界）
- 在线绘制停车区域
- 单车/区域信息弹窗
- 侧边栏单车/区域列表

![地图总览](image/地图总览.png)

### 4. 单车管理

- 单车列表查询（编号、类型、状态筛选）
- 单车添加/编辑/删除
- 地图选点设置位置
- 电量/状态管理
- 分页查询

![单车管理](image/单车管理.png)

### 5. 单车类型

- 类型列表管理
- 类型添加/编辑/删除
- 小时价格设置
- 状态启用/禁用

![单车类型](image/单车类型.png)

### 6. 轨迹查询

- 按单车编号查询轨迹
- 时间范围筛选
- 卫星图层展示
- 轨迹线路绘制（起点/终点标记）
- 轨迹回放功能
- 进度条控制

![单车轨迹](image/单车轨迹.png)

### 7. 停车区域

- 区域列表管理
- 地图绘制区域
- 容量/当前车辆数统计
- 状态启用/禁用
- 区域编辑/删除

![停车区域](image/停车区域.png)

### 8. 用户管理

- 用户列表查询
- 用户添加/编辑/删除
- 角色管理（管理员/普通用户）
- 状态启用/禁用

![用户管理](image/用户管理.png)

### 9. 单车出行

- 绿色出行理念展示

![单车出行](image/单车出行.png)

### 10. MQTT车辆上报

- 单车位置实时上报
- 电量状态上报
- 轨迹数据记录
- Redis缓存位置信息

## 快速开始

### 环境要求

- JDK 8+
- Node.js 16+
- MySQL 8.0+
- Redis 6.0+
- Maven 3.6+

### 数据库初始化

```bash
# 创建数据库并导入初始化脚本
mysql -u root -p < bicycle-back/src/main/resources/db/schema.sql
```

### 后端启动

```bash
cd bicycle-back

# 修改配置文件
# 编辑 src/main/resources/application.yml
# 修改数据库连接信息和Redis配置

# 启动后端
mvn clean package -DskipTests
java -jar target/bicycle-back-1.0.0.jar

# 或开发模式
mvn spring-boot:run
```

### 前端启动

```bash
cd bicycle-frontend

# 安装依赖
npm install

# 配置高德地图Key
# 编辑 src/config/map.js，填入您的高德地图Key

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

访问地址：
- 管理端：http://localhost:3000
- 后端API：http://localhost:8080

## 默认账号

- **管理员**：
  - 用户名：admin
  - 密码：123456
- **运维人员**：
  - 用户名：operator1
  - 密码：123456

## 目录结构

```
bicycle/
├── bicycle-back/                # 后端源码
│   ├── src/main/java/com/bicycle/
│   │   ├── config/              # 配置类
│   │   ├── controller/          # 控制器
│   │   ├── entity/              # 实体类
│   │   ├── mapper/              # Mapper接口
│   │   ├── service/             # 服务层
│   │   ├── vo/                  # 视图对象
│   │   ├── dto/                 # 数据传输对象
│   │   └── mqtt/                # MQTT消息处理
│   └── src/main/resources/
│       ├── application.yml      # 配置文件
│       └── db/schema.sql        # 数据库脚本
├── bicycle-frontend/            # 前端源码
│   ├── src/
│   │   ├── views/               # 页面组件
│   │   │   ├── Dashboard.vue    # 工作台
│   │   │   ├── MapView.vue      # 地图总览
│   │   │   ├── Login.vue        # 登录页
│   │   │   ├── bike/            # 单车管理页面
│   │   │   ├── parking/         # 停车区域页面
│   │   │   └── user/            # 用户管理页面
│   │   ├── stores/              # Pinia状态管理
│   │   ├── api/                 # API接口
│   │   ├── utils/               # 工具函数
│   │   ├── router/              # 路由配置
│   │   ├── layouts/             # 布局组件
│   │   └── config/              # 配置文件
│   ├── package.json
│   └── vite.config.js
├── README.md                    # 项目文档
└── README1.md                   # 模板文档
```

## 技术选型

### 后端
| 技术 | 版本 | 说明 |
|------|------|------|
| Spring Boot | 2.7.18 | 基础框架 |
| MyBatis-Plus | 3.5.4 | ORM框架 |
| Sa-Token | 1.37.0 | 权限认证 |
| Redis | 6.0+ | 缓存 |
| Eclipse Paho | 1.2.5 | MQTT客户端 |
| Hutool | 5.8.x | 工具类库 |

### 前端
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.x | 前端框架 |
| Vite | 5.x | 构建工具 |
| Element Plus | 2.x | UI组件库 |
| Pinia | 2.x | 状态管理 |
| Vue Router | 4.x | 路由管理 |
| Axios | 1.x | HTTP客户端 |
| 高德地图 | JS API 2.0 | 地图服务 |

## 功能特色

🚲 **单车管理**：完整的单车生命周期管理

🗺️ **3D地图**：高德地图3D视图，建筑物展示

📍 **实时定位**：MQTT实时接收单车位置上报

📈 **轨迱回放**：历史轨迱查询与动画回放

🏞️ **区域管理**：地图绘制停车区域

🌍 **行政区定位**：快速缩放到指定行政区

🔐 **权限管理**：基于Sa-Token的用户认证

## 高德地图Key配置

1. 访问 https://lbs.amap.com/
2. 注册/登录账号
3. 控制台 → 应用管理 → 创建新应用
4. 添加Key，服务平台选择「Web端(JS API)」
5. 编辑 `bicycle-frontend/src/config/map.js`，填入Key

## 常见问题

### 1. 地图加载失败
- 检查高德地图Key是否配置正确
- 检查网络连接
- 确认Key的服务平台为「Web端(JS API)」

### 2. 数据库连接失败
- 检查MySQL服务是否启动
- 检查application.yml中数据库配置
- 检查数据库用户名密码

### 3. Redis连接失败
- 检查Redis服务是否启动
- 检查Redis连接配置

### 4. 前端请求报错
- 检查后端服务是否启动
- 检查API代理配置
- 查看浏览器控制台错误信息

### 5. 登录失败
- 检查账号密码是否正确（默认密码123456）
- 检查用户状态是否正常

## 联系方式

如有问题或建议，欢迎通过以下方式联系：

- **邮箱**：1058680083@qq.com
- **微信**：g_FastG_z

## License

MIT License

---

⚳ 如果这个项目对你有帮助，欢迎 Star！