团队项目冲刺--Day6

团队项目冲刺--Day6

一、今日站立式会议照片

二、昨日已完成的内容（回顾）

成员	完成内容	Work Item
宋可月	邮件通知已成功挂在预约成功事件上	T-19
齐畅	预约成功反馈 UI（Toast + Result 页面）	T-13
颜宏宇	查询 API 加入场馆名称字段	T-14
戴清	邮件模板字段结构确定	T-9
缪子睿	邮件通知 + 预约流程测试已通过	T-20
曹伟斌	HTML 模板美化	T-19
赖彦彤	前端预约页面布局完成	T-13

三、今日计划工作

成员	今日任务	Work Item
宋可月	全链路测试（用户端）	T-10
齐畅	预约页面接入真实 API + axios 封装	T-13
颜宏宇	GET /my 接口加入排序、状态过滤	T-14
戴清	数据库优化 + 部分冗余字段合并	T-9
缪子睿	前后端联调测试（黑盒）	T-20
曹伟斌	增加邮件异常处理（try/except）	T-19
赖彦彤	预约完成页面美化 + 场馆卡片优化	T-7，T-13

四、今日遇到的困难

1️⃣ 前端跨域 GET + POST 顺序异常（齐畅）
由于浏览器预检 OPTIONS，请求没成功
原因：后端未正确配置 CORS(app, supports_credentials=True)
✔ 已解决

2️⃣ 前端组件时间格式与后端不一致（赖彦彤）
前端：
"2025-01-10T09:00:00.000Z"
后端需要：
"09:00"
✔ 增加前端格式化方法
✔ 增加后端自动解析多种格式（关键逻辑见 Day6 代码合集）

3️⃣ 全链路跑通时邮件发送阻塞 UI（宋可月）
用户创建预约后等待 1~2 秒页面无反应
✔ 采用前端先 toast 成功提示 → 后端后台发送邮件（同步但 UI 不等待）

4️⃣ 查询预约列表接口排序不正确（颜宏宇）
默认按 ID 排序，并非按时间
✔ 改为按 date, start_time 升序

五、燃尽图

六、代码

前端预约页面

<div id="app">
  <h2>预约场馆</h2>

  <label>选择场馆：</label>
  <select v-model="form.venue_id">
    <option v-for="v in venues" :value="v.id">{{ v.name }}</option>
  </select>

  <label>日期：</label>
  <input type="date" v-model="form.date" />

  <label>开始时间：</label>
  <input type="time" v-model="form.start" />

  <label>结束时间：</label>
  <input type="time" v-model="form.end" />

  <button @click="submitReservation">提交预约</button>

  <p v-if="msg">{{ msg }}</p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      venues: [],
      form: {
        venue_id: "",
        date: "",
        start: "",
        end: ""
      },
      msg: ""
    };
  },
  mounted() {
    axios.get("http://localhost:5000/api/venues/")
      .then(res => { this.venues = res.data.venues; });
  },
  methods: {
    async submitReservation() {
      const token = localStorage.getItem("token");

      const res = await axios.post(
        "http://localhost:5000/api/reservations/",
        this.form,
        { headers: { Authorization: `Bearer ${token}` } }
      );

      this.msg = res.data.msg + "，预约费用：" + res.data.price + " 元";
    }
  }
});
app.mount("#app");
</script>

后端：预约列表按时间排序

@reservation_bp.get("/my")
@jwt_required()
def get_my_reservations():
    uid = get_jwt_identity()["id"]

    res = Reservation.query\
        .filter_by(user_id=uid)\
        .order_by(Reservation.date.asc(), Reservation.start_time.asc())\
        .all()

    return {
        "list": [
            {
                "id": r.id,
                "venue_id": r.venue_id,
                "venue_name": r.venue.name,
                "date": str(r.date),
                "start": r.start_time.strftime("%H:%M"),
                "end": r.end_time.strftime("%H:%M"),
                "price": r.price,
                "status": r.status
            }
            for r in res
        ]
    }, 200

七、每日总结

宋可月： 全链路跑通了，很有成就感，明天补边界情况。

齐畅： 前端终于“活”起来了，能真正发请求了！

颜宏宇： 查询接口优化顺利，前端反馈更快。

戴清： 数据结构开始稳定，明天准备交付文档。

缪子睿： 黑盒测试通过率高，错误提示清晰。

曹伟斌： 邮件异常处理加上了，系统更稳了。

赖彦彤： UI 已经基本可用，明天做最后一轮美化。