SpringBoot2+Vue3旅游网站全栈开发实战

1. 项目概述

这个基于SpringBoot2+Vue3的旅游网站系统，是我最近完成的一个全栈项目实战。采用当下主流的技术栈组合，实现了从景点展示、酒店预订到订单管理的完整业务流程。系统前后端完全分离，后端用SpringBoot2构建RESTful API，前端用Vue3开发响应式界面，数据库选用MySQL8.0，通过MyBatis-Plus简化数据操作。

在实际开发中，我发现这套技术组合有几个显著优势：SpringBoot的自动配置让后端服务快速启动；Vue3的Composition API使前端逻辑组织更清晰；MyBatis-Plus的Wrapper条件构造器大大简化了复杂查询的编写。系统还整合了JWT认证和Redis缓存，既保证了安全性又提升了性能。

2. 技术架构详解

2.1 后端技术栈

后端采用SpringBoot2.7作为基础框架，其自动配置特性让项目初始化变得非常简单。我在pom.xml中主要引入了这些依赖：

xml复制<dependencies>
    <!-- Web支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- MyBatis-Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.3</version>
    </dependency>
    
    <!-- MySQL驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
    <!-- JWT支持 -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
</dependencies>

数据库连接配置在application.yml中：

yaml复制spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/travel_db?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
  redis:
    host: localhost
    port: 6379

2.2 前端技术栈

前端选用Vue3+Element Plus组合，通过Vite构建工具获得极快的开发体验。项目初始化后，package.json中的关键依赖包括：

json复制"dependencies": {
    "vue": "^3.2.47",
    "element-plus": "^2.3.3",
    "axios": "^1.3.4",
    "vue-router": "^4.1.6",
    "pinia": "^2.0.33"
}

前端工程结构采用模块化组织：

code复制src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── stores/         # Pinia状态管理
├── utils/          # 工具函数
└── views/          # 页面组件

3. 核心功能实现

3.1 用户认证模块

采用JWT实现无状态认证，后端核心代码如下：

java复制@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private UserService userService;
    
    @PostMapping("/login")
    public Result login(@RequestBody LoginDTO dto) {
        User user = userService.