# coco-travel

**Repository Path**: guoyicheng0/coco-travel

## Basic Information

- **Project Name**: coco-travel
- **Description**: Coco Travel 是一个使用 Vue3 + UniApp 构建的小程序前端，结合 Koa + Node.js 的服务端，提供公交地铁路线查询、路线规划、周边搜索POI等，适用于学习的出行类 App 的全栈项目。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-14
- **Last Updated**: 2025-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 🌐 Coco Travel - 全栈小程序项目

Coco Travel 是一个使用 Vue3 + UniApp 构建的小程序前端，结合 Koa + Node.js 的服务端，提供公交地铁路线查询、路线规划、周边搜索POI等，适用于学习的出行类 App 的全栈项目。

---

## 📂 项目结构

```bash
coco-travel/
├── previewImage/        # 项目预览图
├── mp_icons/            # 小程序依赖的icons，项目中是放在oss上
├── h5/                  # H5 中间层 (基于 uni-app)
├── miniprogram/         # 小程序端 (基于 uni-app)
├── service/             # Koa 后端服务
└── README.md
```

## 🏗️ 项目架构说明

```bash
H5 中间层：
- 原因：高德地图部分周边接口仅支持 Web 端，不支持小程序端。
- 方案：使用 puppeteer 在服务端爬取 H5 接口数据，再返回给小程序端使用。
- 技术：Vue 3.4.21 + Vite 5.2.8

小程序端：
- 技术栈同 H5：Vue 3.4.21 + Vite 5.2.8

服务端：
- Node.js 16.20.2 + Koa 2.7.0
- 封装 puppeteer + axios 实现中间数据代理
```

---

## 🚀 快速启动

### 1. 克隆项目

```bash
git clone https://gitee.com/dengzy321/coco-travel.git
cd coco-travel
```

### 2. 配置环境变量

- `service/.env.dev`：MySQL、高德地图、腾讯地图、阿里 OSS、实时公交等
- `h5/.env`：API 地址、高德地图密钥、OSS 地址等
- `miniprogram/.env`：API 地址、腾讯地图、高德地图密钥、OSS 地址等

### 3. 导入数据库脚本

```bash
将 service/scripts 目录下的 SQL 脚本导入到本地 MySQL 数据库中
```


### 4. 启动项目


```bash
# 启动服务端
cd service
npm install
npm run dev

# 启动 H5 中间层
cd h5
npm install
npm run dev:h5

# 启动小程序端（微信开发者工具中导入运行）
cd miniprogram
npm install
npm run dev:mp-weixin
```

---

## 🗺 第三方服务依赖说明

### 📍 申请高德地图 API KEY

- 功能：公交地铁信息查询、坐标转地址、搜索 POI 等
- 使用模块：`h5/、service/`
- 高德开放平台：[https://lbs.amap.com](https://lbs.amap.com)

```bash
# 申请步骤：
1. 打开高德开放平台进入控制台
2. 创建一个新应用（起名 **出行）
3. 添加2个KEY
    - 服务平台选（Web端 JS API）：
        配置h5/.env：
        VITE_AMAP_key=your_Key
        VITE_AMAP_securityJsCode=安全密钥
    
    - 服务平台选（Web服务）：
        配置service/.env.dev：
        VITE_AMAP_key=your_Key
```

---

### 📍 申请腾讯地图 API KEY

- 功能：坐标解析、位置搜索等
- 使用模块：`service/`
- 开放平台：[https://lbs.qq.com](https://lbs.qq.com)

```bash
# 申请步骤：
1. 打开腾讯开放平台进入控制台
2. 创建一个新应用（起名 **出行）
3. 添加KEY
    - 启用产品选： WebServiceAPI、 微信小程序（绑定授权 APP ID）
        配置miniprogram/.env：
        VITE_AMAP_key=your_Key

        配置service/.env.dev：
        QQMAP_key=your_Key
```

---

### ☁️ 申请阿里云 OSS KEY

- 功能：文件上传、图片存储、访问控制
- 使用模块：`service/`
- 官网：[https://oss.console.aliyun.com](https://oss.console.aliyun.com)

```bash
# 申请步骤：
1. 打开阿里云控制台对象存储 OSS
2. 申请accessKeyId和accessKeySecret
3. 配置service/.env.dev：
    ALIYUN_accessKeyId=your_accessKeyId
    ALIYUN_accessKeySecret=your_accessKeySecret
```

### 🚌 申请实时公交KEY

- 功能：获取路线上的实时公交
- 使用模块：`service/`
- 官网：[http://bus.wxbus163.cn](http://bus.wxbus163.cn/app/index.php?i=1&c=entry&do=index&m=mon_yjgz)

```bash
# 申请配置service/.env.dev：
RtBus_uname=177259xxxxxx
RtBus_secret=8c0d78b1b3ee484221e04xxxxxx
```
---

## 🛠 技术栈

| 层     | 技术                          | 描述                      |
|--------|-------------------------------|---------------------------|
| 前端   | UniApp + Vue 3 + Vite        | 跨端开发，支持小程序和 Web |
| 后端   | Koa.js + Sequelize + MySQL   | Node Web 服务 + ORM       |
| 工具链 | dotenv / puppeteer / axios   | 配置管理 + 爬虫代理 + 请求工具 |

---

## 📱 小程序项目预览图

<div align="center">
  <img src="./previewImage/首页.png" width="19%" />
  <img src="./previewImage/首页_公交地铁.png" width="19%" />
  <img src="./previewImage/地铁站点.png" width="19%" />
  <img src="./previewImage/地铁线路详情.png" width="19%" />
  <img src="./previewImage/公交站点.png" width="19%" />
  <img src="./previewImage/公交站点详情.png" width="19%" />
  <img src="./previewImage/公交地铁搜索.png" width="19%" />
  <img src="./previewImage/附近公交地铁.png" width="19%" />
  <img src="./previewImage/周边.png" width="19%" />
  <img src="./previewImage/周边_美食.png" width="19%" />
  <img src="./previewImage/周边_美食_详情.png" width="19%" />
  <img src="./previewImage/周边搜索.png" width="19%" />
  <img src="./previewImage/我的.png" width="19%" />
  <img src="./previewImage/轨迹记录.png" width="19%" />
  <img src="./previewImage/轨迹记录2.png" width="19%" />
</div>

---

## 📌 TODO / 待办事项

- [x] 查公交地铁
- [x] 查看地铁图
- [x] 足迹
- [x] 运动轨迹
- [ ] AI问路
- [ ] 敢问路在何方
---

## 🤝 贡献说明

欢迎 Fork 或 PR 提交建议和功能代码，感谢你的贡献 ❤️。

---

## 📄 License

MIT License