Spring Boot + Vue 企业预约网站开发方案

企业预约网站适用于咨询、维修、培训、场馆和到店服务。系统不仅要展示服务内容，还要管理可预约日期、时间段、客户信息和订单状态。简单项目可以使用现成模板，复杂项目则可以采用 Vue 前端配合 Spring Boot 后端开发。

系统主要模块

预约网站通常包含服务项目、员工或资源、排班、预约记录、客户信息和后台管理。为了防止同一时段被重复占用，数据库设计和服务端校验是开发重点。

1. 数据表设计

sql 复制代码

CREATE TABLE appointment (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  service_id BIGINT NOT NULL,
  resource_id BIGINT NOT NULL,
  customer_name VARCHAR(50) NOT NULL,
  customer_mobile VARCHAR(20) NOT NULL,
  appointment_date DATE NOT NULL,
  start_time TIME NOT NULL,
  status VARCHAR(20) NOT NULL DEFAULT 'BOOKED',
  created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY uk_resource_time (resource_id, appointment_date, start_time)
);

唯一索引可以阻止同一资源在相同日期和时间被重复预约。若业务允许用户取消后重新开放时段，可以使用独立时段表维护占用状态，避免取消记录与唯一约束发生冲突。

2. Spring Boot 提交预约

java 复制代码

@RestController
@RequestMapping("/api/appointments")
public class AppointmentController {

    private final AppointmentService appointmentService;

    public AppointmentController(AppointmentService appointmentService) {
        this.appointmentService = appointmentService;
    }

    @PostMapping
    public Result<Long> create(@Valid @RequestBody AppointmentRequest request) {
        return Result.success(appointmentService.create(request));
    }
}

java 复制代码

@Transactional
public Long create(AppointmentRequest request) {
    boolean occupied = appointmentMapper.existsActiveAppointment(
        request.getResourceId(),
        request.getAppointmentDate(),
        request.getStartTime()
    );

    if (occupied) {
        throw new BusinessException("该时间段已被预约");
    }

    Appointment appointment = appointmentConverter.toEntity(request);
    appointment.setStatus("BOOKED");
    appointmentMapper.insert(appointment);
    return appointment.getId();
}

除了业务层查询，还应保留数据库唯一约束，并捕获并发提交产生的重复键异常。

3. Vue 预约表单

javascript 复制代码

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'

const submitting = ref(false)
const form = reactive({
  serviceId: '',
  resourceId: '',
  customerName: '',
  customerMobile: '',
  appointmentDate: '',
  startTime: ''
})

async function submitAppointment() {
  submitting.value = true
  try {
    await axios.post('/api/appointments', form)
    window.alert('预约提交成功')
  } catch (error) {
    window.alert(error.response?.data?.message || '预约提交失败')
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <form class="appointment-form" @submit.prevent="submitAppointment">
    <input v-model.trim="form.customerName" required placeholder="请输入姓名">
    <input v-model.trim="form.customerMobile" required placeholder="请输入手机号">
    <input v-model="form.appointmentDate" type="date" required>
    <select v-model="form.startTime" required>
      <option value="">请选择时间</option>
      <option value="09:00">09:00</option>
      <option value="10:00">10:00</option>
      <option value="14:00">14:00</option>
    </select>
    <button :disabled="submitting">{{ submitting ? '提交中' : '确认预约' }}</button>
  </form>
</template>
```

4. 后台管理

后台可以按照日期、服务项目和预约状态查询数据，并支持确认、完成与取消操作。涉及客户手机号等个人信息时，需要限制账号权限，记录操作日志，并避免在不必要的页面完整展示敏感字段。

5. 部署与安全

Vue 构建后的静态文件可以由 Nginx 提供访问，Spring Boot 服务部署到应用服务器，MySQL 不应直接暴露到公网。接口还应增加参数校验、访问频率限制、HTTPS 和定期备份。

模板方案说明

服务项目较少、不涉及复杂排班时，可以先使用【盈建云】制作预约展示和信息收集页面。若业务需要实时库存、多人排班、支付退款或连接内部系统，则应采用独立后端保障数据一致性。

总结

预约网站的核心不只是表单，而是资源与时间的准确管理。采用 Vue 和 Spring Boot 可以灵活扩展会员、支付、消息提醒与数据统计，但应在数据库和服务端同时处理并发预约问题。