工作项目中，对查询课时的前后端交互设计

一、设计思路

一开始设计这个功能的时候，应甲方需求，教师应该有查询该学生的课时，进行判断学生的基础与等级。从而判断从哪开始教学，有利于教程进度的顺利。

---

二、代码

此次代码，是根据输入框字段的双向绑定，进行返回值的定义。查询按钮绑定了点击事件，因为之前用submit.prevent阻止了默认事件的提交，所以就直接把点击事件用@click绑到按钮上

<template>
  <div>
    <h1>查询课时</h1>
    <div class="input-container">
      <label for="userId">用户ID：</label>
      <input class="input-box" type="text" v-model="userId" required>
    </div>
    <div>
      <label for="courseId">课程ID：</label>
      <input class="input-box"s type="text" v-model="courseId" required>
    </div>
    <div class="query-button-container">
      <button @click="getRemainingLessons">查询</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userId: '',
      courseId: '',
      remainingLessons: null
    };
  },
  methods: {
    async getRemainingLessons() {
      try {
        const response = await axios.get(``);//get类型后端接口请自己补齐
        if (response.data) {
              this.remainingLessons = response.data;
              console.log(response.data);
            } else {
              console.log('No remaining lessons found.');
              console.log(response);

            }
          } catch (error) {
        console.error('Error fetching remaining lessons:', error);
      }
    },
  }
};
</script>

<style>
/* 可以添加一些样式 */
.input-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin-bottom: 10px;
}

.input-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  width: 200px;
  outline: none;
  text-align: left; /* 居左对齐文本 */
}

.query-button-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
 

---

三、效果预览图

 前端一定要写返回数据console到控制台，不然到后端查还得麻烦到处切

 后端接收两个id，返回数据成功。

---

四、总结

此次踩了大坑，在下面这个问题打转了很久，后来和负责开发的同事一起找前后端的问题，发现是后端的关键字@RequestBody封装了两个id，前端用get传值不是JSON格式无法进入后端（尝试过强转JSON.Stringify,类型对了，跳过了检查，但是值还是进不来的）。所以开发时，一定要和后端人员要好好沟通，字符类型要保持一致。