新增的功能实现

Dialog对话框

到Dialog 对话框 | Element Plus (gitee.io)

选择自己需要的样式  

在data中添加相应的参数

Vue弹窗的代码

<el-dialog width=35% v-model="data.formVisible" title="课程信息 ">
      <el-form :model="data.form" label-width="100px" style="padding-right:40px">
        <el-form-item label="课程名称" >
          <el-input v-model="data.form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程编号" >
          <el-input v-model="data.form.no" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程描述" >
          <el-input v-model="data.form.descr" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课时" >
          <el-input v-model="data.form.times" autocomplete="off" />
        </el-form-item>
        <el-form-item label="任课老师" >
          <el-input v-model="data.form.teacher" autocomplete="off" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </template>

    </el-dialog>

按保存将数据提交到后台

后台新增接口

往数据插入数据一般是post请求

controller层

//    课程新增接口
    @PostMapping("/add")
    public Result add(@RequestBody Course course){
            courseService.add(course);

            return Result.success();

    }

service层

//    新增课程数据
    public void add(Course course) {
        courseMapper.insert(course);
    }

mapper层

   @Insert("insert into course(name,no,descr,times,teacher) values(#{name},#{no},#{descr},#{times},#{teacher})")
    void insert(Course course);

按保存请求失败看下是不是数据库没有勾选自增