14. 开发学生选课功能

2380 字约 5 分钟读完1221 次阅读更新于 2026/5/3

student_course SQL

CREATE TABLE `student_course` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课程名称',
  `no` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课程编号',
  `student_id` int(11) DEFAULT NULL COMMENT '学生ID',
  `course_id` int(11) DEFAULT NULL COMMENT '课程ID',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='学生选课';

开发学生选课接口

image.png
Service
image.png
Mapper
image.png

Mybatis 动态查询

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.mybatis.example.BlogMapper">
  <select id="selectBlog" resultType="Blog">
    select * from Blog where id = #{id}
  </select>
</mapper>

查询学生选课记录的动态 sql

<select id="selectAll" resultType="com.example.entity.StudentCourse">
    select * from student_course
    <where>
        <if test="name != null">and name like concat('%', #{name}, '%')</if>
        <if test="no != null">and no like concat('%', #{no}, '%')</if>
        <if test="studentId != null">and student_id = #{studentId}</if>
    </where>
    order by id desc
</select>

经典错误

image.png
**Invalid bound statement (not found): com.example.mapper.StudentCourseMapper.selectAll
**image.png

Vue 删除二次确认

const del = (id) => {
  ElMessageBox.confirm('删除数据后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/studentCourse/delete/' + id).then(res => {
      if (res.code === '200') {
        load()    // 重新获取数据
        ElMessage.success("操作成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(res => {})
}

Vue 根据角色动态拼接参数

image.png