基于nodejs+vue高校自习室预约系统的设计与实现python-flask-django-php

由于篇幅所限，这里我将提供一个简化版的高校自习室预约系统的核心功能实现，即使用Flask作为后端和Vue作为前端的一个简单示例。

后端（使用Flask）:

from flask import Flask, jsonify
 
app = Flask(__name__)
 
# 假设有一个简单的预约列表
appointments = [
    {'id': 1, 'title': '自习室预约1', 'start': '2023-04-01T10:00:00', 'end': '2023-04-01T11:00', 'room_id': 1},
    # ...更多预约
]
 
@app.route('/api/appointments', methods=['GET'])
def get_appointments():
    return jsonify(appointments)
 
@app.route('/api/appointments', methods=['POST'])
def create_appointment():
    data = request.get_json()
    appointment = {
        'id': len(appointments) + 1,
        'title': data['title'],
        'start': data['start'],
        'end': data['end'],
        'room_id': data['room_id']
    }
    appointments.append(appointment)
    return jsonify(appointment), 201
 
if __name__ == '__main__':
    app.run(debug=True)

前端（使用Vue）:

<!-- Vue模板 -->
<template>
  <div>
    <h1>预约列表</h1>
    <ul>
      <li v-for="appointment in appointments" :key="appointment.id">
        {{ appointment.title }}
      </li>
    </ul>
    <!-- 添加预约的表单 -->
    <form @submit.prevent="addAppointment">
      <input type="text" v-model="newAppointment.title" placeholder="标题" />
      <input type="datetime-local" v-model="newAppointment.start" />
      <input type="datetime-local" v-model="newAppointment.end" />
      <input type="number" v-model="newAppointment.room_id" />
      <button type="submit">添加</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      appointments: [],
      newAppointment: {}
    };
  },
  created() {
    this.fetchAppointments();
  },
  methods: {
    fetchAppointments() {
      fetch('/api/appointments')
        .then(response => response.json())
        .then(data => {
          this.appointments = data;
        });
    },
    addAppointment() {
      fetch('/api/appointments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.newAppointment)
      })
        .then(response => response.json())
        .then(appointment => {
          this.appointments.push(appointment);
          this.newAppointment = {};