07. 开发课程新增和编辑功能
Dialog 弹窗
新增
清空数据
打开弹窗
Vue
<el-dialog width="35%" v-model="data.formVisible" title="课程信息">
<el-form :model="data.form" label-width="100px" label-position="right" 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>
<span class="dialog-footer">
<el-button @click="data.formVisible = false">取 消</el-button>
<el-button type="primary" @click="save">保 存</el-button>
</span>
</template>
</el-dialog>
// 保存数据到后台
const save = () => {
request.post('/course/add', data.form).then(res => {
if (res.code === '200') {
load() // 重新获取数据
data.formVisible = false // 关闭弹窗
ElMessage.success("操作成功")
} else {
ElMessage.error(res.msg)
}
})
}
后台新增接口
@PostMapping("/add")
public Result add(@RequestBody Course course) {
courseService.add(course);
return Result.success();
}
@Insert("insert into course (name, no,descr,times,teacher) values(#{name}, #{no}, #{descr}, #{times}, #{teacher})")
void insert(Course course);
编辑
获取数据设置到表单里
打开弹窗
Vue
// 保存数据到后台
const save = () => {
request.request({
url: data.form.id ? '/course/update' : '/course/add',
method: data.form.id ? 'PUT' : 'POST',
data: data.form
}).then(res => {
if (res.code === '200') {
load() // 重新获取数据
data.formVisible = false // 关闭弹窗
ElMessage.success("操作成功")
} else {
ElMessage.error(res.msg)
}
})
}
后台 SQL
@PutMapping("/update")
public Result update(@RequestBody Course course) {
courseService.updateById(course);
return Result.success();
}
@Update("update course set name = #{name}, no = #{no}, descr = #{descr}, times = #{times}, teacher = #{teacher} where id = #{id}")
void updateById(Course course);