基于vue的旅游购票系统

vue3+TypeScript+TailWindcss+Element plus + Spring Boot +JDBC Template

旅游vite-fupu.png

旅游商店系统 - 前后端分离项目

项目概述

本项目是一个基于前后端分离架构的旅游商店系统，提供旅游产品展示、搜索、预订等功能。系统分为前端和后端两个部分：

前端：基于Vue 3开发的旅游商店前端项目，提供用户界面和交互功能
后端：基于Spring Boot开发的RESTful API服务，提供数据处理和业务逻辑

插件要求：

tailwindcss kit 禁用tailwind fold

技术栈

前端技术栈

运行环境: Node.js 22.x
框架: Vue 3.5.x
构建工具: Vite 6.2.x
语言: TypeScript 5.8.x
路由: Vue Router 4.5.x
状态管理: Pinia 3.0.x
UI组件库: Element Plus 2.9.x
CSS框架: Tailwind CSS 4.0.x
HTTP客户端: Axios 1.8.x
轮播组件: Swiper 11.2.x

后端技术栈

运行环境: JDK 17
框架: Spring Boot 3.4.x
ORM框架: Spring Data JPA
数据库: MySQL 8.x
构建工具: Maven
API文档: Spring Doc (OpenAPI)

环境要求

前端环境要求

Node.js: 22.x 或更高版本
npm: 10.x 或更高版本

推荐使用 nvm (Linux/macOS) 或 nvm-windows (Windows) 来管理Node.js版本。

后端环境要求

JDK: 17 或更高版本
Maven: 3.8.x 或更高版本
MySQL: 8.x 或更高版本

数据库配置

创建名为 travel 的MySQL数据库
导入项目根目录下的 travel.sql 文件初始化数据库结构和数据

mysql -u用户名 -p密码 travel < travel.sql

或者使用MySQL管理工具（如Navicat、MySQL Workbench等）导入SQL文件。在navicat中travel数据库运行travel.sql文件 !!!注意在src\main\java中的DataSourceConfig.java中修改数据库密码!!!

项目启动

后端启动

方法一：使用IDE

使用IntelliJ IDEA或Eclipse等IDE打开travel目录
等待Maven下载依赖
运行com.ep.travel.TravelApplication类的main方法

方法二：命令行启动

cd travel

使用Maven编译打包

# Linux/macOS
./mvnw clean package -DskipTests
<h1 id="Windows">Windows</h1>
<p>mvnw.cmd clean package -DskipTests

运行生成的JAR文件

java -jar target/travel-0.0.1-SNAPSHOT.jar

方法三：使用批处理文件（仅Windows）

直接运行项目根目录下的run.bat文件。

后端服务将在 http://localhost:8088 上运行。

前端启动

cd travel-store

安装依赖

npm install

启动开发服务器

npm run dev

前端应用将在 http://localhost:5173 上运行。

项目结构

前端项目结构

travel-store/
├── public/               # 静态资源目录
│   ├── favicon.ico       # 网站图标
│   └── fonts/            # 字体文件
├── src/                  # 源代码目录
│   ├── assets/           # 资源文件(CSS, 图片等)
│   ├── components/       # 组件目录
│   │   ├── dialog/       # 对话框组件
│   │   ├── icons/        # 图标组件
│   │   └── panel/        # 面板组件
│   ├── router/           # 路由配置
│   ├── store/            # Pinia状态管理
│   │   ├── accountData.ts  # 账户数据
│   │   ├── messageData.ts  # 消息数据
│   │   └── travelData.ts   # 旅游数据
│   ├── views/            # 页面视图
│   │   ├── back/         # 后台管理视图
│   │   └── travel/       # 旅游相关视图
│   ├── App.vue           # 根组件
│   └── main.ts           # 应用入口
└── vite.config.ts        # Vite配置

后端项目结构

travel/
├── src/                  # 源代码目录
│   ├── main/             # 主要代码
│   │   ├── java/         # Java源代码
│   │   │   └── com/ep/travel/
│   │   │       ├── impl/     # 接口实现
│   │   │       ├── inter/    # 接口定义
│   │   │       ├── serve/    # 服务层
│   │   │       ├── table/    # 数据表实体
│   │   │       ├── tool/     # 工具类
│   │   │       └── test/     # 测试类
│   │   └── resources/    # 资源文件
│   │       └── application.yml  # 应用配置
│   └── test/             # 测试代码
├── images/               # 图片资源目录
│   ├── hotel/           # 酒店图片
│   └── view/            # 景点图片
└── pom.xml               # Maven配置

API接口

后端API基础URL为 http://localhost:8088，前端已配置API代理，所有/api开头的请求将被代理到后端服务。

主要API模块：

账户管理 /api/account
酒店管理 /api/hotel
消息管理 /api/message
旅游套餐 /api/package

账户信息

系统预设了以下账户：

普通用户：账号 12345678，密码 12345678
管理员：账号 admin，密码 000000

常见问题

前端启动问题

Node.js版本不匹配：确保使用Node.js 22.x版本
```
node -v  # 检查版本
```
依赖安装失败：尝试清除npm缓存
```
npm cache clean --force
npm install
```

后端启动问题

端口占用：如果8088端口被占用，可以修改application.yml中的端口配置
数据库连接失败：检查MySQL服务是否启动，以及用户名密码是否正确
JDK版本不匹配：确保使用JDK 17或更高版本
```
java -version  # 检查版本
```

生产环境部署

前端部署

构建生产版本
```
cd travel-store
npm run build
```
将生成的dist目录部署到Web服务器（如Nginx、Apache等）

后端部署

构建JAR包

cd travel
mvn clean package -DskipTests

使用以下命令运行JAR包

java -jar target/travel-0.0.1-SNAPSHOT.jar

或者使用Docker部署

# 构建Docker镜像
docker build -t travel-backend .
<h1 id="运行容器">运行容器</h1>
<p>docker run -d -p 8088:8088 --name travel-app travel-backend

运行

前端运行：

cd travel-store
npm run serve

后端运行：

cd travel
mvn spring-boot:run  
or  
java -jar target/travel-0.0.1-SNAPSHOT.jar
or 
. run.bat  # Windows系统

目录CONTENT

分享一个工作室成员们开发的小项目，都是半成品