# tourism

**Repository Path**: jgh/tourism

## Basic Information

- **Project Name**: tourism
- **Description**: 旅游攻略是一个前后端分离的旅游类小程序平台，提供景点管理、游记分享、公告通知等功能，帮助用户获取旅游资讯并分享旅行体验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-04-30
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 旅游攻略小程序

## 项目简介

旅游攻略是一个前后端分离的旅游类小程序平台，提供景点管理、游记分享、公告通知等功能，帮助用户获取旅游资讯并分享旅行体验。

## 技术架构

### 后端技术栈
- **框架**: Spring Boot 2.6.13
- **ORM**: MyBatis-Plus 3.5.5
- **数据库**: MySQL 8.0.33
- **认证**: JWT (jjwt 0.9.1)
- **工具**: Lombok 1.18.28
- **构建工具**: Maven

### 前端技术栈

#### 小程序端
- **框架**: 微信小程序原生框架
- **语言**: WXML + WXSS + JavaScript
- **请求封装**: 统一 HTTP 请求工具

#### 管理端
- **框架**: Vue 3 + Vite
- **UI 组件**: Naive UI
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP 客户端**: Axios
- **图标**: @vicons/ionicons5

## 项目结构

```
tourism/
├── springboot/              # 后端服务
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/springboot/
│   │   │   │   ├── controller/    # API 接口层
│   │   │   │   ├── service/       # 业务逻辑层
│   │   │   │   ├── mapper/        # 数据库操作接口
│   │   │   │   ├── entity/        # 实体类
│   │   │   │   ├── config/        # 配置类（CORS、JWT拦截器）
│   │   │   │   └── util/          # 工具类
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── pom.xml
│   └── upload/              # 文件上传目录
├── tourism-wx/              # 微信小程序前端
│   ├── pages/               # 页面目录
│   │   ├── index/          # 首页
│   │   ├── auth/           # 登录注册
│   │   ├── mine/           # 个人中心
│   │   ├── publish/        # 发布攻略
│   │   ├── square/         # 社区广场
│   │   ├── scenic/         # 景点列表
│   │   └── scenicDetail/   # 景点详情
│   ├── images/             # 静态图片资源
│   ├── utils/              # 工具类
│   │   ├── request.js     # HTTP 请求封装
│   │   └── api.js         # API 接口定义
│   ├── app.js
│   └── project.config.json
├── tourism-admin/           # 后台管理系统
│   ├── src/
│   │   ├── views/          # 页面视图
│   │   ├── router/         # 路由配置
│   │   ├── stores/         # 状态管理
│   │   ├── api/            # API 接口
│   │   └── utils/          # 工具类
│   ├── package.json
│   └── vite.config.js
└── tourism.sql              # 数据库初始化脚本
```

## 核心功能模块

### 1. 用户系统
- 用户注册、登录
- 个人资料修改（头像、昵称、性别、年龄、手机、邮箱、简介）
- JWT 认证与权限控制
- Token 有效期：24 小时

### 2. 景点管理（Scenic）
- 景点列表展示
- 景点详情查看
- 推荐景点标记
- 景点图片上传
- 管理端 CRUD 操作

### 3. 社区广场（Post）
- 发布游记攻略（文字+图片，最多9张）
- 查看他人动态
- 图片网格展示
- 管理端内容审核

### 4. 公告通知（Notice）
- 系统公告发布
- 最新公告展示
- 首页公告轮播

### 5. 文件上传（Upload）
- 支持图片上传
- 文件存储在 `upload/` 目录
- 返回完整 URL 路径
- 支持头像、景点图片、帖子图片等

### 6. 管理后台
- 管理员登录（独立认证）
- 用户管理
- 景点管理
- 帖子管理
- 公告管理
- 数据统计

## 数据库设计

### 核心表结构

#### user 表（用户）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| username | varchar(100) | 用户名（唯一） |
| password | varchar(100) | 密码 |
| nickname | varchar(100) | 昵称 |
| avatar | varchar(255) | 头像 URL |
| gender | varchar(10) | 性别 |
| age | int | 年龄 |
| phone | varchar(20) | 手机号 |
| email | varchar(100) | 邮箱 |
| bio | varchar(255) | 个人简介 |
| create_time | datetime | 创建时间 |

#### admin 表（管理员）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| username | varchar(100) | 管理员账号（唯一） |
| password | varchar(100) | 密码 |
| nickname | varchar(100) | 昵称 |
| avatar | varchar(255) | 头像 URL |
| phone | varchar(20) | 手机号 |
| email | varchar(100) | 邮箱 |
| status | tinyint(1) | 状态（1启用 0禁用） |
| create_time | datetime | 创建时间 |

#### scenic 表（景点）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| name | varchar(100) | 景点名称 |
| image | varchar(500) | 景点图片 URL |
| description | text | 景点描述 |
| recommended | tinyint(1) | 是否推荐 |

#### posts 表（帖子）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | varchar | 主键（String类型避免精度问题） |
| content | text | 帖子内容 |
| images | varchar(1000) | 图片 URL（逗号分隔） |
| author_id | int | 作者 ID |
| create_time | datetime | 创建时间 |

#### notice 表（公告）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| title | varchar(255) | 公告标题 |
| content | text | 公告内容 |
| create_time | datetime | 创建时间 |

## API 接口说明

### 基础配置
- **Base URL**: `http://localhost:8080`
- **认证方式**: JWT Token（Header: `Authorization`）
- **响应格式**: 
```json
{
  "success": true/false,
  "data": {},
  "message": "提示信息"
}
```

### 用户相关接口

#### 1. 用户注册
- **POST** `/api/user/register`
- **参数**: `{ username, password }`
- **返回**: `{ success, data: { token, user }, message }`

#### 2. 用户登录
- **POST** `/api/user/login`
- **参数**: `{ username, password }`
- **返回**: `{ success, data: { token, user }, message }`

#### 3. 获取当前用户信息
- **GET** `/api/user/me`
- **认证**: 需要
- **返回**: `{ success, data: user, message }`

#### 4. 更新用户信息
- **PUT** `/api/user/update`
- **认证**: 需要
- **参数**: `{ nickname, avatar, gender, age, phone, email, bio }`
- **返回**: `{ success, data: null, message }`

#### 5. 退出登录
- **POST** `/api/user/logout`
- **认证**: 需要
- **返回**: `{ success, data: null, message }`

### 景点相关接口

#### 1. 获取景点列表
- **GET** `/api/scenic/list`
- **返回**: `{ success, data: [scenic], message }`

#### 2. 获取推荐景点
- **GET** `/api/scenic/recommended`
- **返回**: `{ success, data: [scenic], message }`

#### 3. 获取景点详情
- **GET** `/api/scenic/{id}`
- **返回**: `{ success, data: scenic, message }`

### 帖子相关接口

#### 1. 获取帖子列表
- **GET** `/api/posts/list`
- **返回**: `{ success, data: [post], message }`

#### 2. 发布帖子
- **POST** `/api/posts/publish`
- **认证**: 需要
- **参数**: `{ content, images }`
- **返回**: `{ success, data: null, message }`

### 公告相关接口

#### 1. 获取最新公告
- **GET** `/api/notices/latest`
- **返回**: `{ success, data: [notice], message }`

### 文件上传接口

#### 1. 图片上传
- **POST** `/api/upload/image`
- **参数**: `file` (multipart/form-data)
- **返回**: `{ success, data: "http://localhost:8080/upload/xxx.jpg", message }`

### 管理员接口

#### 1. 管理员登录
- **POST** `/api/admin/login`
- **参数**: `{ username, password }`
- **返回**: `{ success, data: { token, admin }, message }`

#### 2. 数据统计
- **GET** `/api/admin/stats`
- **认证**: 需要管理员 Token
- **返回**: `{ success, data: { adminCount, userCount, scenicCount, postCount }, message }`

#### 3. 用户管理
- **GET** `/api/user/page` - 分页查询
- **PUT** `/api/user/update` - 更新用户
- **DELETE** `/api/user/delete/{id}` - 删除用户

#### 4. 景点管理
- **GET** `/api/scenic/page` - 分页查询
- **POST** `/api/scenic/save` - 新增景点
- **PUT** `/api/scenic/update` - 更新景点
- **DELETE** `/api/scenic/delete/{id}` - 删除景点

#### 5. 帖子管理
- **GET** `/api/posts/page` - 分页查询
- **PUT** `/api/posts/update` - 更新帖子
- **DELETE** `/api/posts/delete/{id}` - 删除帖子

#### 6. 公告管理
- **GET** `/api/notices/page` - 分页查询
- **POST** `/api/notices/save` - 新增公告
- **PUT** `/api/notices/update` - 更新公告
- **DELETE** `/api/notices/delete/{id}` - 删除公告

## 环境配置

### 后端配置

#### 数据库配置（application.properties）
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/nanning
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
mybatis-plus.global-config.db-config.id-type=auto

server.port=8080
```

#### JWT 配置
- **密钥**: `tourism-secret-key`
- **Token 有效期**: 24 小时

#### CORS 配置
```java
registry.addMapping("/**")
    .allowedOriginPatterns("*")
    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
    .allowedHeaders("*")
    .allowCredentials(true)
    .maxAge(3600);
```

#### 拦截器配置
排除无需认证的接口：
- `/api/user/login`
- `/api/user/register`
- `/api/admin/login`
- `/api/upload/image`
- `/api/notices/latest`
- `/api/posts/list`
- `/api/scenic/list`
- `/api/scenic/recommended`
- `/api/scenic/*`

### 前端配置

#### 小程序配置
- **appid**: 在 `project.config.json` 中配置
- **基础请求地址**: `http://localhost:8080`
- **Token 存储**: `wx.setStorageSync('token', token)`

#### 管理端配置
- **开发服务器**: Vite（默认 5173 端口）
- **API 基础地址**: `http://localhost:8080`

## 部署说明

### 环境要求
- JDK 8+
- MySQL 8.0+
- Node.js 16+（管理端）
- 微信开发者工具（小程序）

### 后端部署

1. **导入数据库**
```bash
mysql -u root -p < tourism.sql
```

2. **修改数据库配置**
编辑 `springboot/src/main/resources/application.properties`

3. **编译运行**
```bash
cd springboot
mvn clean package
java -jar target/springboot-0.0.1-SNAPSHOT.jar
```
或使用 IDE 直接运行 `SpringbootApplication.java`

### 小程序部署

1. 使用微信开发者工具打开 `tourism-wx` 目录
2. 配置 appid
3. 编译运行

### 管理端部署

1. **安装依赖**
```bash
cd tourism-admin
npm install
```

2. **开发模式运行**
```bash
npm run dev
```

3. **生产构建**
```bash
npm run build
```

## 账号信息

### 普通用户
- 用户名: `aaa`
- 密码: `aaa`

### 管理员
- 用户名: `admin`
- 密码: `admin123`

## 注意事项

### 1. Long 类型 ID 精度问题
前后端交互时，Long 类型 ID 使用 String 类型传递，避免 JavaScript 处理超过 15 位整数时的精度丢失。

### 2. 图片上传路径
- 上传接口: `/api/upload/image`
- 存储路径: `{项目根目录}/upload/`
- 访问路径: `http://localhost:8080/upload/{filename}`

### 3. 静态资源映射
- `/upload/**` 映射到 `file:{user.dir}/upload/`
- 小程序本地图片使用 `/images/` 路径

### 4. CORS 跨域
使用 `allowedOriginPatterns("*")` 配合 `allowCredentials(true)`

### 5. JWT 认证
- 小程序和管理端分别使用不同的认证流程
- Token 存储在 localStorage（管理端）或 Storage（小程序）
- 请求头自动携带 `Authorization` Token

## 开发规范

### 代码风格
- 后端: 遵循 Java 命名规范，使用 Lombok 简化代码
- 前端: 使用 ES6+ 语法，组件化开发

### Git 提交规范
- feat: 新功能
- fix: 修复 Bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构
- test: 测试相关
- chore: 构建/工具相关

## 常见问题

### 1. 跨域问题
- 检查 CORS 配置
- 确认 OPTIONS 请求已放行

### 2. 图片上传失败
- 检查 upload 目录权限
- 确认 `/api/upload/image` 已排除认证

### 3. Token 失效
- Token 有效期 24 小时，过期需重新登录
- 检查 Authorization Header 是否正确携带

### 4. 数据库连接失败
- 检查 MySQL 服务是否启动
- 确认数据库配置正确

## 项目特色

1. **前后端分离架构**：清晰的职责划分
2. **双端支持**：微信小程序 + Web 管理端
3. **JWT 认证**：安全的用户认证机制
4. **图片上传**：完善的文件上传功能
5. **响应式设计**：良好的用户体验
6. **数据统计**：实时数据监控

## 技术亮点

- MyBatis-Plus 简化数据库操作
- JWT 无状态认证
- Vue3 Composition API
- Naive UI 现代化组件库
- 微信小程序原生开发
- RESTful API 设计

## 未来规划

- [ ] 评论功能
- [ ] 点赞收藏
- [ ] 地图导航
- [ ] 在线客服
- [ ] 数据分析
- [ ] 内容推荐算法

## 联系方式

如有问题或建议，欢迎联系项目维护者。

## 许可证

本项目仅供学习交流使用。