智能排课系统

小明：嘿，李老师，最近我在研究一个排课系统，想请教您一些问题。

李老师：当然可以，你对排课系统有什么具体的问题吗？

小明：我想知道，如果我要用前端技术来实现一个排课系统，应该怎么做呢？有没有什么好的建议或者参考代码？

李老师：很好，这是一个很实际的问题。排课系统在高校中非常常见，尤其是在南昌的一些高校，比如江西财经大学、南昌大学等，他们都需要一个高效的排课系统来安排课程。

小明：那我应该从哪些方面入手呢？前端的话，是不是需要使用一些框架？

李老师：是的，前端开发推荐使用现代框架，比如Vue.js或者React，它们能帮助你更好地管理组件和状态。不过，如果你只是想做一个简单的排课系统，也可以用原生JS加上HTML和CSS。

小明：那我可以先写一个基础的界面吗？比如课程列表、教师信息、教室信息这些。

李老师：没错，你可以先构建一个基本的页面结构。然后，再考虑如何将这些数据动态地展示出来。比如，用表格展示课程安排，用下拉框选择教师或教室。

小明：那具体的代码应该怎么写呢？有没有示例？

李老师：当然有，我可以给你一段简单的代码作为参考。下面是一个使用Vue.js实现的排课系统前端示例：

      <template>
        <div>
          <h2>课程排课系统</h2>
          <table border="1">
            <thead>
              <tr>
                <th>课程名称</th>
                <th>教师姓名</th>
                <th>教室编号</th>
                <th>时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(course, index) in courses" :key="index">
                <td>{{ course.name }}</td>
                <td>{{ course.teacher }}</td>
                <td>{{ course.room }}</td>
                <td>{{ course.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            courses: [
              { name: '计算机基础', teacher: '张老师', room: 'A301', time: '周一上午' },
              { name: '数据结构', teacher: '李老师', room: 'B202', time: '周三下午' },
              { name: '算法设计', teacher: '王老师', room: 'C101', time: '周五上午' }
            ]
          };
        }
      };
      </script>
    

小明：哇，这个看起来挺直观的。那这个代码能不能扩展成一个完整的排课系统呢？

李老师：当然可以，这只是前端的一部分。你需要配合后端API来获取和提交数据，但前端部分可以继续扩展，比如添加表单让用户输入新的课程信息，或者提供筛选功能。

小明：那怎么实现表单功能呢？比如添加新课程。

李老师：你可以添加一个表单，包含课程名称、教师、教室和时间字段。然后通过Vue的数据绑定来处理用户输入，并在点击“添加”按钮时将数据添加到courses数组中。

小明：那我可以写一个简单的表单吗？

李老师：当然可以，下面是一个带有表单的完整Vue组件示例：

      <template>
        <div>
          <h2>课程排课系统</h2>
          <form @submit.prevent="addCourse">
            <label>课程名称：<input v-model="newCourse.name" /></label>
            <br>
            <label>教师姓名：<input v-model="newCourse.teacher" /></label>
            <br>
            <label>教室编号：<input v-model="newCourse.room" /></label>
            <br>
            <label>时间：<input v-model="newCourse.time" /></label>
            <br>
            <button type="submit">添加课程</button>
          </form>
          <br>
          <table border="1">
            <thead>
              <tr>
                <th>课程名称</th>
                <th>教师姓名</th>
                <th>教室编号</th>
                <th>时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(course, index) in courses" :key="index">
                <td>{{ course.name }}</td>
                <td>{{ course.teacher }}</td>
                <td>{{ course.room }}</td>
                <td>{{ course.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            newCourse: {
              name: '',
              teacher: '',
              room: '',
              time: ''
            },
            courses: [
              { name: '计算机基础', teacher: '张老师', room: 'A301', time: '周一上午' },
              { name: '数据结构', teacher: '李老师', room: 'B202', time: '周三下午' },
              { name: '算法设计', teacher: '王老师', room: 'C101', time: '周五上午' }
            ]
          };
        },
        methods: {
          addCourse() {
            this.courses.push(this.newCourse);
            this.newCourse = { name: '', teacher: '', room: '', time: '' };
          }
        }
      };
      </script>
    

小明：这个表单功能太棒了！那接下来是不是要加入筛选和排序功能？

李老师：是的，这可以提升用户体验。比如，可以根据课程名称、教师或时间进行搜索，或者按时间排序。

小明：那我可以怎么实现呢？比如搜索功能。

李老师：你可以添加一个搜索框，然后根据输入的内容过滤courses数组。下面是修改后的代码示例：

      <template>
        <div>
          <h2>课程排课系统</h2>
          <input v-model="searchQuery" placeholder="请输入课程名称或教师姓名..." />
          <br><br>
          <form @submit.prevent="addCourse">
            <label>课程名称：<input v-model="newCourse.name" /></label>
            <br>
            <label>教师姓名：<input v-model="newCourse.teacher" /></label>
            <br>
            <label>教室编号：<input v-model="newCourse.room" /></label>
            <br>
            <label>时间：<input v-model="newCourse.time" /></label>
            <br>
            <button type="submit">添加课程</button>
          </form>
          <br>
          <table border="1">
            <thead>
              <tr>
                <th>课程名称</th>
                <th>教师姓名</th>
                <th>教室编号</th>
                <th>时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(course, index) in filteredCourses" :key="index">
                <td>{{ course.name }}</td>
                <td>{{ course.teacher }}</td>
                <td>{{ course.room }}</td>
                <td>{{ course.time }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            searchQuery: '',
            newCourse: {
              name: '',
              teacher: '',
              room: '',
              time: ''
            },
            courses: [
              { name: '计算机基础', teacher: '张老师', room: 'A301', time: '周一上午' },
              { name: '数据结构', teacher: '李老师', room: 'B202', time: '周三下午' },
              { name: '算法设计', teacher: '王老师', room: 'C101', time: '周五上午' }
            ]
          };
        },
        computed: {
          filteredCourses() {
            const query = this.searchQuery.toLowerCase();
            return this.courses.filter(course => 
              course.name.toLowerCase().includes(query) ||
              course.teacher.toLowerCase().includes(query)
            );
          }
        },
        methods: {
          addCourse() {
            this.courses.push(this.newCourse);
            this.newCourse = { name: '', teacher: '', room: '', time: '' };
          }
        }
      };
      </script>
    

小明：这样就实现了搜索功能，太好了！那接下来是不是还可以加入更多交互性？比如编辑或删除课程？

李老师：是的，这些功能也是排课系统常见的需求。你可以为每条课程添加“编辑”和“删除”按钮，让用户能够修改或移除课程信息。

小明：那我可以尝试写这部分代码吗？

李老师：当然可以，下面是一个带编辑和删除功能的示例代码：

      <template>
        <div>
          <h2>课程排课系统</h2>
          <input v-model="searchQuery" placeholder="请输入课程名称或教师姓名..." />
          <br><br>
          <form @submit.prevent="addCourse">
            <label>课程名称：<input v-model="newCourse.name" /></label>
            <br>
            <label>教师姓名：<input v-model="newCourse.teacher" /></label>
            <br>
            <label>教室编号：<input v-model="newCourse.room" /></label>
            <br>
            <label>时间：<input v-model="newCourse.time" /></label>
            <br>
            <button type="submit">添加课程</button>
          </form>
          <br>
          <table border="1">
            <thead>
              <tr>
                <th>课程名称</th>
                <th>教师姓名</th>
                <th>教室编号</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(course, index) in filteredCourses" :key="index">
                <td>{{ course.name }}</td>
                <td>{{ course.teacher }}</td>
                <td>{{ course.room }}</td>
                <td>{{ course.time }}</td>
                <td>
                  <button @click="editCourse(index)">编辑</button>
                  <button @click="deleteCourse(index)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <br>
          <div v-if="editingIndex !== null">
            <h3>编辑课程</h3>
            <label>课程名称：<input v-model="editingCourse.name" /></label>
            <br>
            <label>教师姓名：<input v-model="editingCourse.teacher" /></label>
            <br>
            <label>教室编号：<input v-model="editingCourse.room" /></label>
            <br>
            <label>时间：<input v-model="editingCourse.time" /></label>
            <br>
            <button @click="saveEdit">保存修改</button>
            <button @click="cancelEdit">取消</button>
          </div>
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            searchQuery: '',
            newCourse: {
              name: '',
              teacher: '',
              room: '',
              time: ''
            },
            editingIndex: null,
            editingCourse: {
              name: '',
              teacher: '',
              room: '',
              time: ''
            },
            courses: [
              { name: '计算机基础', teacher: '张老师', room: 'A301', time: '周一上午' },
              { name: '数据结构', teacher: '李老师', room: 'B202', time: '周三下午' },
              { name: '算法设计', teacher: '王老师', room: 'C101', time: '周五上午' }
            ]
          };
        },
        computed: {
          filteredCourses() {
            const query = this.searchQuery.toLowerCase();
            return this.courses.filter(course => 
              course.name.toLowerCase().includes(query) ||
              course.teacher.toLowerCase().includes(query)
            );
          }
        },
        methods: {
          addCourse() {
            this.courses.push(this.newCourse);
            this.newCourse = { name: '', teacher: '', room: '', time: '' };
          },
          deleteCourse(index) {
            this.courses.splice(index, 1);
          },
          editCourse(index) {
            this.editingIndex = index;
            this.editingCourse = { ...this.courses[index] };
          },
          saveEdit() {
            this.courses[this.editingIndex] = this.editingCourse;
            this.editingIndex = null;
            this.editingCourse = { name: '', teacher: '', room: '', time: '' };
          },
          cancelEdit() {
            this.editingIndex = null;
            this.editingCourse = { name: '', teacher: '', room: '', time: '' };
          }
        }
      };
      </script>
    

小明：这真是一个完整的排课系统前端实现！感谢您的指导，我现在对排课系统的前端开发有了更深入的理解。

李老师：不客气，排课系统在南昌的高校中非常重要，特别是像江西科技师范大学、南昌航空大学这样的学校，他们的教务系统都依赖于这样的前端技术。

小明：我会继续完善这个系统，可能还会加入更多功能，比如课程冲突检测、自动排课算法等。

李老师：很好，前端只是其中一部分，后面你还需要学习后端开发和数据库知识，才能真正实现一个完整的排课系统。

小明：明白了，谢谢您，我会继续努力的！

李老师：加油，期待看到你的成果！