酒店管理系统基于 JavaFX Spring Boot 和 React 重构经典项目实操-优快云博客

以下是基于现代技术栈的酒店管理系统实操指南，结合JavaFX、Spring Boot和React重构经典项目：

基于JavaFX + Spring Boot + React的酒店管理系统实战开发

一、技术选型与架构设计

1. 前端技术栈

JavaFX：替代Swing构建桌面客户端，提供更现代的UI组件和更好的性能
React：开发Web管理界面，支持响应式设计
Tailwind CSS：提供现代化的UI样式
Font Awesome：丰富的图标库

2. 后端技术栈

Spring Boot：简化后端开发，提供RESTful API
Spring Security：实现用户认证与授权
Spring Data JPA：数据库访问层
MySQL：关系型数据库存储业务数据

3. 系统架构

采用前后端分离架构，通过REST API通信
数据库设计包含客房、客户、订单、员工等核心实体
部署架构支持Docker容器化和微服务拆分

二、核心功能模块实现

1. 客房管理模块

下面是使用JavaFX实现的客房管理界面代码：

// RoomManagementController.java
public class RoomManagementController {

    @FXML private TableView<Room> roomTable;
    @FXML private TableColumn<Room, Integer> roomNumberCol;
    @FXML private TableColumn<Room, String> roomTypeCol;
    @FXML private TableColumn<Room, Double> priceCol;
    @FXML private TableColumn<Room, String> statusCol;
    
    @FXML private TextField roomNumberField;
    @FXML private ComboBox<String> roomTypeCombo;
    @FXML private TextField priceField;
    @FXML private ComboBox<String> statusCombo;
    
    private RoomService roomService;
    
    @FXML
    public void initialize() {
        // 初始化服务层
        roomService = new RoomServiceImpl();
        
        // 配置表格列
        roomNumberCol.setCellValueFactory(new PropertyValueFactory<>("roomNumber"));
        roomTypeCol.setCellValueFactory(new PropertyValueFactory<>("roomType"));
        priceCol.setCellValueFactory(new PropertyValueFactory<>("price"));
        statusCol.setCellValueFactory(new PropertyValueFactory<>("status"));
        
        // 加载客房数据
        loadRooms();
        
        // 初始化下拉框
        roomTypeCombo.getItems().addAll("标准间", "豪华间", "套房", "总统套房");
        statusCombo.getItems().addAll("空闲", "已预订", "已入住", "维修中");
    }
    
    @FXML
    private void addRoom() {
        try {
            Room room = new Room();
            room.setRoomNumber(Integer.parseInt(roomNumberField.getText()));
            room.setRoomType(roomTypeCombo.getValue());
            room.setPrice(Double.parseDouble(priceField.getText()));
            room.setStatus(statusCombo.getValue());
            
            roomService.saveRoom(room);
            loadRooms();
            clearFields();
            
            Alert alert = new Alert(Alert.AlertType.INFORMATION);
            alert.setTitle("成功");
            alert.setHeaderText("客房添加成功");
            alert.showAndWait();
        } catch (Exception e) {
            Alert alert = new Alert(Alert.AlertType.ERROR);
            alert.setTitle("错误");
            alert.setHeaderText("添加客房失败");
            alert.setContentText(e.getMessage());
            alert.showAndWait();
        }
    }
    
    private void loadRooms() {
        ObservableList<Room> rooms = FXCollections.observableArrayList(roomService.getAllRooms());
        roomTable.setItems(rooms);
    }
    
    // 其他方法...
}

2. 客户预订流程

下面是基于React实现的客户预订界面组件：

// ReservationForm.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { 
  FormControl, 
  InputLabel, 
  Select, 
  MenuItem, 
  TextField, 
  Button, 
  Grid, 
  Paper,
  DatePicker,
  LocalizationProvider 
} from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const ReservationForm = () => {
  const [rooms, setRooms] = useState([]);
  const [selectedRoom, setSelectedRoom] = useState('');
  const [checkInDate, setCheckInDate] = useState(null);
  const [checkOutDate, setCheckOutDate] = useState(null);
  const [guestName, setGuestName] = useState('');
  const [guestPhone, setGuestPhone] = useState('');
  
  useEffect(() => {
    // 从后端获取可用客房列表
    axios.get('/api/rooms/available')
      .then(response => {
        setRooms(response.data);
      })
      .catch(error => {
        console.error('获取客房列表失败:', error);
      });
  }, []);
  
  const handleSubmit = () => {
    const reservationData = {
      roomId: selectedRoom,
      checkInDate,
      checkOutDate,
      guestName,
      guestPhone
    };
    
    // 提交预订请求
    axios.post('/api/reservations', reservationData)
      .then(response => {
        alert('预订成功！预订号：' + response.data.reservationNumber);
        // 重置表单
        setSelectedRoom('');
        setCheckInDate(null);
        setCheckOutDate(null);
        setGuestName('');
        setGuestPhone('');
      })
      .catch(error => {
        alert('预订失败：' + error.response.data.message);
      });
  };
  
  return (
    <Paper elevation={3} style={{ padding: '20px', margin: '20px' }}>
      <h2>客房预订</h2>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <FormControl fullWidth>
            <InputLabel>选择客房</InputLabel>
            <Select
              value={selectedRoom}
              onChange={(e) => setSelectedRoom(e.target.value)}
            >
              {rooms.map(room => (
                <MenuItem key={room.id} value={room.id}>
                  {room.roomNumber} - {room.roomType} (¥{room.price}/晚)
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Grid>
        
        <Grid item xs={12} sm={6}>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              label="入住日期"
              value={checkInDate}
              onChange={(newValue) => setCheckInDate(newValue)}
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </Grid>
        
        <Grid item xs={12} sm={6}>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              label="退房日期"
              value={checkOutDate}
              onChange={(newValue) => setCheckOutDate(newValue)}
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </Grid>
        
        <Grid item xs={12} sm={6}>
          <TextField
            label="客人姓名"
            value={guestName}
            onChange={(e) => setGuestName(e.target.value)}
            fullWidth
          />
        </Grid>
        
        <Grid item xs={12} sm={6}>
          <TextField
            label="联系电话"
            value={guestPhone}
            onChange={(e) => setGuestPhone(e.target.value)}
            fullWidth
          />
        </Grid>
        
        <Grid item xs={12}>
          <Button 
            variant="contained" 
            color="primary" 
            onClick={handleSubmit}
          >
            提交预订
          </Button>
        </Grid>
      </Grid>
    </Paper>
  );
};

export default ReservationForm;

三、系统部署与优化

1. 数据库设计优化

采用规范化设计，主要数据表包括：

rooms：客房表（房间号、类型、价格、状态等）
guests：客户表（姓名、联系方式、身份证号等）
reservations：预订表（预订号、客房ID、客户ID、入住/退房日期、状态等）
employees：员工表（员工ID、姓名、职位、登录凭证等）
payments：支付记录表（支付ID、预订ID、金额、支付方式、时间等）

2. 部署方案

推荐使用Docker容器化部署：

# docker-compose.yml
version: '3'

services:
  hotel-backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - db
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/hotel_db?useSSL=false&serverTimezone=UTC
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: password
      
  hotel-frontend:
    build: ./frontend
    ports:
      - "3000:3000"
      
  db:
    image: mysql:8.0
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: hotel_db
      
volumes:
  mysql-data: