开发课程新增，编辑，删除功能

springboot/src/main/java/com/example/controller/CourseController.java

@@ -4,10 +4,7 @@ import com.example.common.Result;
 import com.example.entity.Course;
 import com.example.service.CourseService;
 import com.github.pagehelper.PageInfo;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 
@@ -17,12 +14,39 @@ public class CourseController {
 
       @Resource
       private CourseService courseService;
-
-      @GetMapping("/selectPage")
+    /**
+     * 分页条件查询课程
+     */
+    @GetMapping("/selectPage")
       public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                @RequestParam(defaultValue = "5") Integer pageSize,
                                 Course course){
           PageInfo<Course> pageInfo = courseService.selectPage(pageNum, pageSize,course);
            return Result.success(pageInfo);
     }
+    /**
+     * 新增课程
+     */
+    @PostMapping("/add")
+    public Result add(@RequestBody Course course){
+          courseService.add(course);
+          return Result.success();
+    }
+    /**
+     * 更新课程
+     */
+    @PutMapping("/update")
+    public Result update(@RequestBody Course course){
+        courseService.updateById(course);
+        return Result.success();
+    }
+
+    /**
+     * 删除课程
+     */
+    @DeleteMapping("/delete/{id}")
+    public Result delete(@PathVariable Integer id){
+        courseService.deleteById(id);
+        return Result.success();
+    }
 }

springboot/src/main/java/com/example/mapper/CourseMapper.java

@@ -1,11 +1,21 @@
 package com.example.mapper;
 
 import com.example.entity.Course;
+import org.apache.ibatis.annotations.Delete;
+import org.apache.ibatis.annotations.Insert;
 import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Update;
 
 import java.util.List;
 
 public interface CourseMapper {
     @Select("select * from course where name like concat('%',#{name},'%') and no like concat('%',#{no},'%') and teacher like concat('%',#{teacher},'%') order by id desc")
     List<Course> selectAll(Course course);
+    @Insert("insert into course (name, no, descr, times, teacher) values(#{name},#{no},#{descr},#{times},#{teacher})")
+    void insert(Course course);
+    @Update("update course set name=#{name},no=#{no},descr=#{descr},times=#{times},teacher=#{teacher} where id=#{id}")
+    void updateById(Course course);
+
+    @Delete("delete from course where id=#{id}")
+    void deleteById(Integer id);
 }

springboot/src/main/java/com/example/service/CourseService.java

@@ -21,4 +21,16 @@ public class CourseService {
            List<Course> coursesList = courseMapper.selectAll(course);
            return PageInfo.of(coursesList);
        }
+    //新增数据
+    public void add(Course course) {
+           courseMapper.insert(course);
+    }
+
+    public void updateById(Course course) {
+           courseMapper.updateById(course);
+    }
+
+    public void deleteById(Integer id) {
+           courseMapper.deleteById(id);
+    }
 }

vue/src/views/manager/Course.vue

@@ -8,7 +8,7 @@
   </div>
   <div class="card" style="margin-bottom: 10px">
     <div style="margin-bottom: 10px">
-      <el-button type="primary" >新 增</el-button>
+      <el-button type="primary" @click="handleAdd">新 增</el-button>
     </div>
     <div>
       <el-table :data="data.tableData" style="width: 100%">
@@ -20,8 +20,8 @@
         <el-table-column prop="teacher" label="任课老师" />
         <el-table-column>
           <template #default="scope">
-            <el-button type="primary" size="small" plain>编 辑</el-button>
-            <el-button type="danger" size="small" plain>删 除</el-button>
+            <el-button type="primary" size="small" plain @click="handleEdit(scope.row)">编 辑</el-button>
+            <el-button type="danger" size="small" plain @click="del(scope.row.id)">删 除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -31,12 +31,39 @@
                      @current-change = "handleCurrentChange"
                      background layout="prev, pager, next" :total="data.total" />
     </div>
+
+    <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>
   </div>
 </template>
 <script setup>
 import {reactive} from "vue";
 import {Search} from "@element-plus/icons-vue";
 import request from "@/utils/request";
+import {ElMessage, ElMessageBox} from "element-plus";
 
 const data = reactive({
   name:'',
@@ -45,7 +72,9 @@ const data = reactive({
   tableData:[],
   total:0,
   pageSize:2,//每页的个数
-  pageNum: 1//当前的页码
+  pageNum: 1, //当前的页码
+  formVisible:false,
+  form:{}
 })
 const load =()=>{
   request.get('course/selectPage',{
@@ -75,4 +104,45 @@ const reset =()=>{
   data.teacher = ''
   load()
 }
+
+const handleAdd = () => {
+  data.form = {}
+  data.formVisible = true
+}
+
+
+//保存数据到后台
+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)
+      }
+    })
+}
+
+const handleEdit=(row)=>{
+  data.form=JSON.parse(JSON.stringify(row))
+  data.formVisible=true
+}
+
+const del = (id)=>{
+  ElMessageBox.confirm('删除数据数据后无法恢复','确认删除吗',{type:'warning'}).then(() => {
+    request.delete('course/delete/' + id).then((res)=>{
+      if(res.code === '200'){
+        load()//重新获取数据
+        ElMessage.success("操作成功")
+      }else{
+        ElMessage.error(res.msg)
+      }
+    })
+  }).catch(res=>{})
+}
 </script>