由于篇幅所限，这里我将提供一个简化版的高校自习室预约系统的核心功能实现，即使用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 = {};