SpringBoot+Vue民宿管理系统开发实战

Diane Lockhart

1. 项目概述

这套民宿管理系统采用当前主流的前后端分离架构，后端基于SpringBoot框架实现业务逻辑和API接口，前端使用Vue.js构建用户界面，数据存储选用MySQL关系型数据库。系统最大的特点是提供"开箱即用"的完整解决方案，源码经过完整测试并附带详细部署文档，开发者下载后只需简单配置即可启动运行。

我在实际部署测试过程中发现，这套系统特别适合两类用户：一是需要快速搭建民宿管理平台的小型创业团队，二是计算机专业学生用来学习企业级全栈开发技术栈。系统包含了民宿场景下的完整功能模块，从房源管理、订单处理到财务统计一应俱全。

2. 技术架构解析

2.1 后端技术栈

SpringBoot 2.7.x作为后端框架，采用经典的MVC分层架构：

Controller层：处理HTTP请求，参数校验
Service层：业务逻辑实现
DAO层：MyBatis-Plus操作数据库
实体层：POJO对象定义

特色技术实现：

使用Spring Security + JWT实现认证授权
采用Redis缓存热点数据（如房源信息）
集成Swagger生成API文档
使用Lombok简化代码
配置多环境profiles（dev/test/prod）

2.2 前端技术栈

Vue 2.x作为前端框架，主要技术组件：

Vue Router管理路由
Vuex进行状态管理
Axios处理HTTP请求
Element UI组件库构建界面
ECharts实现数据可视化

前端工程采用Webpack打包，支持：

按需加载组件
代码分割优化
环境变量配置
代理跨域设置

2.3 数据库设计

MySQL 5.7+数据库包含12张核心表：

用户表（sys_user）
角色表（sys_role）
权限表（sys_permission）
民宿表（homestay）
房型表（room_type）
订单表（order）
评论表（comment）
支付记录表（payment）
优惠券表（coupon）
系统日志表（sys_log）
字典表（sys_dict）
文件表（sys_file）

关键设计特点：

使用外键约束保证数据完整性
合理设置索引提升查询性能
字段注释完整规范
包含基础数据初始化脚本

3. 核心功能实现

3.1 房源管理模块

房源CRUD操作流程：

前端通过axios发送请求
后端Controller接收参数
Service层处理业务逻辑
MyBatis-Plus操作数据库
返回统一格式的JSON响应

特色功能实现代码示例：

java复制// 分页查询房源列表
@GetMapping("/list")
public R list(@RequestParam Map<String, Object> params){
    PageUtils page = homestayService.queryPage(params);
    return R.ok().put("data", page);
}

// 添加房源
@PostMapping("/save")
public R save(@RequestBody HomestayEntity homestay){
    homestayService.save(homestay);
    return R.ok();
}

3.2 订单处理流程

订单状态机设计：

待支付 -> 已支付
已支付 -> 已入住
已入住 -> 已完成
任意状态 -> 已取消

关键业务逻辑：

java复制// 创建订单
public R createOrder(OrderDTO orderDTO) {
    // 1. 校验房源可用性
    RoomEntity room = roomService.getById(orderDTO.getRoomId());
    if(room.getStatus() != 0){
        return R.error("房源不可用");
    }
    
    // 2. 计算订单金额
    BigDecimal amount = calculateAmount(orderDTO);
    
    // 3. 保存订单
    OrderEntity order = new OrderEntity();
    BeanUtils.copyProperties(orderDTO, order);
    order.setAmount(amount);
    order.setStatus(0); // 待支付
    orderService.save(order);
    
    // 4. 更新房源状态
    room.setStatus(1); // 已预订
    roomService.updateById(room);
    
    return R.ok().put("orderId", order.getId());
}

3.3 权限控制系统

RBAC权限模型实现：

用户-角色多对多关系
角色-权限多对多关系
权限分为菜单权限和操作权限
前端根据权限动态渲染菜单

权限校验流程：

java复制@Override
protected void doFilterInternal(HttpServletRequest request, 
    HttpServletResponse response, FilterChain chain) {
    
    // 1. 获取token
    String token = getToken(request);
    
    // 2. 解析token获取用户ID
    Long userId = jwtUtils.getUserIdFromToken(token);
    
    // 3. 查询用户权限
    Set<String> permissions = shiroService.getUserPermissions(userId);
    
    // 4. 校验当前请求权限
    if(!checkPermission(request, permissions)){
        response.sendError(403, "无权限访问");
        return;
    }
    
    chain.doFilter(request, response);
}

4. 系统部署指南

4.1 环境准备

基础软件要求：

JDK 1.8+
Maven 3.6+
Node.js 12+
MySQL 5.7+
Redis 5+

推荐开发工具：

IntelliJ IDEA（后端）
VS Code（前端）
Navicat（数据库）
Postman（接口测试）

4.2 后端部署步骤

导入MySQL脚本

bash复制mysql -uroot -p < homestay.sql

修改配置文件

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/homestay?useSSL=false
    username: root
    password: 123456
  redis:
    host: localhost
    port: 6379

打包运行

bash复制mvn clean package
java -jar target/homestay.jar

4.3 前端部署步骤

安装依赖

bash复制npm install

修改接口配置

javascript复制// src/utils/request.js
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

启动项目

bash复制npm run dev

5. 常见问题解决

5.1 启动报错排查

端口冲突问题：

log复制Description: Web server failed to start. Port 8080 was already in use.

解决方案：

bash复制# 查找占用进程
netstat -ano | findstr 8080
# 结束进程
taskkill /F /PID <pid>

数据库连接失败：

log复制Communications link failure

检查要点：

数据库服务是否启动
用户名密码是否正确
连接URL格式是否正确
防火墙是否放行端口

5.2 前端跨域问题

开发环境解决方案：

javascript复制// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

生产环境解决方案：

配置Nginx反向代理
或者开启CORS

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .maxAge(3600);
    }
}