环境搭建

SQL

  

   

    

     

    
    

     

      CREATE TABLE `tb_class` (
     
    
   

    

     

    
    

     

        `c_id` varchar(32) NOT NULL COMMENT '班级ID',
     
    
   

    

     

    
    

     

        `c_name` varchar(50) DEFAULT NULL COMMENT '班级名称',
     
    
   

    

     

    
    

     

        `desc` varchar(200) DEFAULT NULL COMMENT '班级描述',
     
    
   

    

     

    
    

     
  PRIMARY KEY (`c_id`)
     
    
   

    

     

    
    

     

      ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /*Data for the table `tb_class` */
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      insert  into `tb_class`(`c_id`,`c_name`,`desc`) values ('22','22','22'),('c001','Java12班','花儿222'),('c002','Java34班','艺术223'),('c003','虚拟的班级','111');
     
    
  
 

查询

前端

• - 需求：简单的查询所有
• - 步骤：
•   - 步骤1：编写查询所有班级的函数
•   - 步骤2：页面加载成功后调用
•   - 步骤3：展示查询结果
• - 实现

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 start -->
     
    
   

    

     

    
    

     
    <el-table
     
    
   

    

     

    
    

     
      :data="classesList"
     
    
   

    

     

    
    

     
      stripe
     
    
   

    

     

    
    

     
      style="width: 100%">
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cid"
     
    
   

    

     

    
    

     
        label="编号"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cname"
     
    
   

    

     

    
    

     
        label="班级名称"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="desc"
     
    
   

    

     

    
    

     
        label="描述"
     
    
   

    

     

    
    

     
        width="280">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        label="操作">
     
    
   

    

     

    
    

     
        <template slot-scope="scope">
     
    
   

    

     

    
    

     
          <!-- scope.$index, scope.row -->
     
    
   

    

     

    
    

     
          <el-button size="mini">编辑</el-button>
     
    
   

    

     

    
    

     
          <el-button size="mini" type="danger">删除</el-button>
     
    
   

    

     

    
    

     
        </template>
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
    </el-table>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 end -->
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      // 1.0 导入axios
     
    
   

    

     

    
    

     

      import axios from 'axios'
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  data() {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      classesList: [],      // 1.1 班级列表
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     
    async selectAllClasses() {  //1.2 查询班级
     
    
   

    

     

    
    

     
      // ajax 查询班级
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data:baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      // 保存数据
     
    
   

    

     

    
    

     
      this.classesList = baseResult.data
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    // 1.3 调用班级
     
    
   

    

     

    
    

     
    this.selectAllClasses()
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

后端

ClassesMapper：

  

   

    

     

    
    

     

      package com.czxy.mapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import tk.mybatis.mapper.common.Mapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @org.apache.ibatis.annotations.Mapper
     
    
   

    

     

    
    

     

      public interface ClassesMapper extends Mapper<Classes> {
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesService：

  

   

    

     

    
    

     

      package com.czxy.service;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      public interface ClassesService {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 查询所有班级
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public List<Classes> selectAllClasses();
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesServiceImpl:

  

   

    

     

    
    

     

      package com.czxy.service.impl;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.mapper.ClassesMapper;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import org.springframework.stereotype.Service;
     
    
   

    

     

    
    

     

      import org.springframework.transaction.annotation.Transactional;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @Service
     
    
   

    

     

    
    

     

      @Transactional
     
    
   

    

     

    
    

     

      public class ClassesServiceImpl implements ClassesService {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Resource
     
    
   

    

     

    
    

     
    private ClassesMapper classesMapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public List<Classes> selectAllClasses() {
     
    
   

    

     

    
    

     
        return classesMapper.selectAll();
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesController：

  

   

    

     

    
    

     

      package com.czxy.controller;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import com.czxy.vo.BaseResult;
     
    
   

    

     

    
    

     

      import org.springframework.web.bind.annotation.*;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @RestController
     
    
   

    

     

    
    

     

      @RequestMapping("/classes")
     
    
   

    

     

    
    

     

      @CrossOrigin
     
    
   

    

     

    
    

     

      public class ClassesController {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Resource
     
    
   

    

     

    
    

     
    private ClassesService classesService;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @GetMapping
     
    
   

    

     

    
    

     
    public BaseResult selectAll(){
     
    
   

    

     

    
    

     

              List<Classes> list = classesService.selectAllClasses();
     
    
   

    

     

    
    

     
        return BaseResult.ok("查询成功",list);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
  
 

添加：弹出框

前端

• 需求：使用弹出框完成添加
• 步骤：
• 步骤1：拷贝弹出框，并调试代码（变量）
• 步骤2：声明弹出框显示变量、表单变量（表单绑定）
• 步骤3：添加函数，与按钮绑定
• 实现

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div>
     
    
   

    

     

    
    

     
    <!-- 2.4 添加按钮 -->
     
    
   

    

     

    
    

     
    <el-button type="primary" round @click="openAddDialog">添加</el-button>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 start -->
     
    
   

    

     

    
    

     
    <el-table
     
    
   

    

     

    
    

     
      :data="classesList"
     
    
   

    

     

    
    

     
      stripe
     
    
   

    

     

    
    

     
      style="width: 100%">
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cid"
     
    
   

    

     

    
    

     
        label="编号"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cname"
     
    
   

    

     

    
    

     
        label="班级名称"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="desc"
     
    
   

    

     

    
    

     
        label="描述"
     
    
   

    

     

    
    

     
        width="280">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        label="操作">
     
    
   

    

     

    
    

     
        <template slot-scope="scope">
     
    
   

    

     

    
    

     
          <!-- scope.$index, scope.row -->
     
    
   

    

     

    
    

     
          <el-button size="mini">编辑</el-button>
     
    
   

    

     

    
    

     
          <el-button size="mini" type="danger">删除</el-button>
     
    
   

    

     

    
    

     
        </template>
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
    </el-table>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 end -->
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    <!-- 2.1 添加弹出框 start -->
     
    
   

    

     

    
    

     
    <el-dialog title="添加班级" :visible.sync="classesAddVisible">
     
    
   

    

     

    
    

     
      <el-form :model="classes" label-width="80px">
     
    
   

    

     

    
    

     
        <el-form-item label="班级编号">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cid"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级名称">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cname"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级描述">
     
    
   

    

     

    
    

     
          <el-input type="textarea" v-model="classes.desc"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
      </el-form>
     
    
   

    

     

    
    

     
      <div slot="footer" class="dialog-footer">
     
    
   

    

     

    
    

     
        <el-button @click="classesAddVisible = false">取 消</el-button>
     
    
   

    

     

    
    

     
        <el-button type="primary" @click="addClasses">确 定</el-button>
     
    
   

    

     

    
    

     
      </div>
     
    
   

    

     

    
    

     
    </el-dialog>
     
    
   

    

     

    
    

     
    <!-- 2.1 添加弹出框 end -->
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      // 1.0 导入axios
     
    
   

    

     

    
    

     

      import axios from 'axios'
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  data() {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      classesList: [],            // 1.1 班级列表
     
    
   

    

     

    
    

     
      classesAddVisible: false,    // 2.2 添加弹出框的变量
     
    
   

    

     

    
    

     
      classes: {},                // 2.3 班级表单
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     
    async selectAllClasses() {  //1.2 查询班级
     
    
   

    

     

    
    

     
      // ajax 查询班级
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data:baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      // 保存数据
     
    
   

    

     

    
    

     
      this.classesList = baseResult.data
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    openAddDialog() {       //2.5 显示弹出框
     
    
   

    

     

    
    

     
      this.classesAddVisible = true
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    async addClasses() {          //2.6 添加班级
     
    
   

    

     

    
    

     
      // ajax
     
    
   

    

     

    
    

     
      var url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data: baseResult } = await axios.post(url, this.classes) 
     
    
   

    

     

    
    

     
      // 处理结果
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 成功
     
    
   

    

     

    
    

     
        // 提示
     
    
   

    

     

    
    

     
        this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
        // 刷新页面
     
    
   

    

     

    
    

     
        this.selectAllClasses()
     
    
   

    

     

    
    

     
        // 关闭弹出框
     
    
   

    

     

    
    

     
        this.classesAddVisible = false
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 失败
     
    
   

    

     

    
    

     
        this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    // 1.3 调用班级
     
    
   

    

     

    
    

     
    this.selectAllClasses()
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

后端

ClassesService

  

   

    

     

    
    

     

      package com.czxy.service;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      public interface ClassesService {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 添加 | 修改 班级
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public boolean addClasses(Classes classes);
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesServiceImpl

  

   

    

     

    
    

     

      package com.czxy.service.impl;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.mapper.ClassesMapper;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import org.springframework.stereotype.Service;
     
    
   

    

     

    
    

     

      import org.springframework.transaction.annotation.Transactional;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @Service
     
    
   

    

     

    
    

     

      @Transactional
     
    
   

    

     

    
    

     

      public class ClassesServiceImpl implements ClassesService {
     
    
   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public boolean addClasses(Classes classes) {
     
    
   

    

     

    
    

     
        Classes cls = classesMapper.selectByPrimaryKey(classes.getCid());
     
    
   

    

     

    
    

     
        int result;
     
    
   

    

     

    
    

     
        if(cls != null){
     
    
   

    

     

    
    

     

                  result = classesMapper.updateByPrimaryKey(classes);
     
    
   

    

     

    
    

     

              }else{
     
    
   

    

     

    
    

     

                  result = classesMapper.insert(classes);
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        return result == 1;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesController

  

   

    

     

    
    

     

      package com.czxy.controller;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import com.czxy.vo.BaseResult;
     
    
   

    

     

    
    

     

      import org.springframework.web.bind.annotation.*;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @RestController
     
    
   

    

     

    
    

     

      @RequestMapping("/classes")
     
    
   

    

     

    
    

     

      @CrossOrigin
     
    
   

    

     

    
    

     

      public class ClassesController {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Resource
     
    
   

    

     

    
    

     
    private ClassesService classesService;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @PostMapping
     
    
   

    

     

    
    

     
    public BaseResult addupdateClasses(@RequestBody Classes classes){
     
    
   

    

     

    
    

     
        try {
     
    
   

    

     

    
    

     
            boolean b = classesService.addClasses(classes);
     
    
   

    

     

    
    

     
            if(b){
     
    
   

    

     

    
    

     
                return BaseResult.ok("添加 | 编辑 成功");
     
    
   

    

     

    
    

     

                  }else{
     
    
   

    

     

    
    

     
                return BaseResult.error("添加 | 编辑 失败");
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

              } catch (Exception e) {
     
    
   

    

     

    
    

     

                  e.printStackTrace();
     
    
   

    

     

    
    

     
            return BaseResult.error(e.getMessage());
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

修改：抽屉

前端

• 需求：使用抽屉完成修改功能
• 步骤
• 步骤1：点击修改按钮，打开一个抽泣，通过id查询详情，需要回显表单
• 步骤2：表单的绑定
• 步骤3：修改确定按钮
• 实现

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     

        <div>
     
    
   

    

     

    
    

     

          <!-- 2.4 添加按钮 -->
     
    
   

    

     

    
    

     

          <el-button type="primary" round @click="openAddDialog">添加</el-button>
     
    
   

    

     

    
    

     

          <!-- 1.4 班级列表 start -->
     
    
   

    

     

    
    

     

          <el-table
     
    
   

    

     

    
    

     

            :data="classesList"
     
    
   

    

     

    
    

     

            stripe
     
    
   

    

     

    
    

     

            style="width: 100%">
     
    
   

    

     

    
    

     

            <el-table-column
     
    
   

    

     

    
    

     

              prop="cid"
     
    
   

    

     

    
    

     

              label="编号"
     
    
   

    

     

    
    

     

              width="180">
     
    
   

    

     

    
    

     

            </el-table-column>
     
    
   

    

     

    
    

     

            <el-table-column
     
    
   

    

     

    
    

     

              prop="cname"
     
    
   

    

     

    
    

     

              label="班级名称"
     
    
   

    

     

    
    

     

              width="180">
     
    
   

    

     

    
    

     

            </el-table-column>
     
    
   

    

     

    
    

     

            <el-table-column
     
    
   

    

     

    
    

     

              prop="desc"
     
    
   

    

     

    
    

     

              label="描述"
     
    
   

    

     

    
    

     

              width="280">
     
    
   

    

     

    
    

     

            </el-table-column>
     
    
   

    

     

    
    

     

            <el-table-column
     
    
   

    

     

    
    

     

              label="操作">
     
    
   

    

     

    
    

     

              <template slot-scope="scope">
     
    
   

    

     

    
    

     

                <!-- scope.$index, scope.row -->
     
    
   

    

     

    
    

     

                <!-- 3.1 打开编辑抽屉 -->
     
    
   

    

     

    
    

     

                <el-button size="mini" @click="openEditDrawer(scope.row.cid)">编辑</el-button>
     
    
   

    

     

    
    

     

                <el-button size="mini" type="danger">删除</el-button>
     
    
   

    

     

    
    

     

              </template>
     
    
   

    

     

    
    

     

            </el-table-column>
     
    
   

    

     

    
    

     

          </el-table>
     
    
   

    

     

    
    

     

          <!-- 1.4 班级列表 end -->
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <!-- 2.1 添加弹出框 start -->
     
    
   

    

     

    
    

     

          <el-dialog title="添加班级" :visible.sync="classesAddVisible">
     
    
   

    

     

    
    

     

            <el-form :model="classes" label-width="80px">
     
    
   

    

     

    
    

     

              <el-form-item label="班级编号">
     
    
   

    

     

    
    

     

                <el-input v-model="classes.cid"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

              <el-form-item label="班级名称">
     
    
   

    

     

    
    

     

                <el-input v-model="classes.cname"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

              <el-form-item label="班级描述">
     
    
   

    

     

    
    

     

                <el-input type="textarea" v-model="classes.desc"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

            </el-form>
     
    
   

    

     

    
    

     

            <div slot="footer" class="dialog-footer">
     
    
   

    

     

    
    

     

              <el-button @click="classesAddVisible = false">取 消</el-button>
     
    
   

    

     

    
    

     

              <el-button type="primary" @click="addClasses">确 定</el-button>
     
    
   

    

     

    
    

     

            </div>
     
    
   

    

     

    
    

     

          </el-dialog>
     
    
   

    

     

    
    

     

          <!-- 2.1 添加弹出框 end -->
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <!-- 3.3 抽屉 start -->
     
    
   

    

     

    
    

     

          <el-drawer
     
    
   

    

     

    
    

     

            title="修改班级"
     
    
   

    

     

    
    

     

            :visible.sync="classesEditDrawerVisible"
     
    
   

    

     

    
    

     

            direction="rtl">
     
    
   

    

     

    
    

     

            <!-- 修改表单 start -->
     
    
   

    

     

    
    

     

            <el-form :model="classes" label-width="80px">
     
    
   

    

     

    
    

     

              <el-form-item label="班级编号">
     
    
   

    

     

    
    

     

                <el-input v-model="classes.cid"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

              <el-form-item label="班级名称">
     
    
   

    

     

    
    

     

                <el-input v-model="classes.cname"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

              <el-form-item label="班级描述">
     
    
   

    

     

    
    

     

                <el-input type="textarea" v-model="classes.desc"></el-input>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

              <el-form-item>
     
    
   

    

     

    
    

     

                <el-button type="primary" @click="editClasses">立即创建</el-button>
     
    
   

    

     

    
    

     

                <el-button @click="classesEditDrawerVisible = false">取消</el-button>
     
    
   

    

     

    
    

     

              </el-form-item>
     
    
   

    

     

    
    

     

            </el-form>
     
    
   

    

     

    
    

     

            <!-- 修改表单 end -->
     
    
   

    

     

    
    

     

          </el-drawer>
     
    
   

    

     

    
    

     

          <!-- 3.3 抽屉 end -->
     
    
   

    

     

    
    

     

        </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      // 1.0 导入axios
     
    
   

    

     

    
    

     

      import axios from 'axios'
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     

        data() {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     

            classesList: [],            // 1.1 班级列表
     
    
   

    

     

    
    

     

            classesAddVisible: false,    // 2.2 添加弹出框的变量
     
    
   

    

     

    
    

     

            classes: {},                // 2.3 班级表单
     
    
   

    

     

    
    

     

            classesEditDrawerVisible: false,  // 3.4 抽屉变量
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        methods: {
     
    
   

    

     

    
    

     

          async selectAllClasses() {  //1.2 查询班级
     
    
   

    

     

    
    

     
      // ajax 查询班级
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     

            let { data:baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      // 保存数据
     
    
   

    

     

    
    

     
      this.classesList = baseResult.data
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          openAddDialog() {       //2.5 显示弹出框
     
    
   

    

     

    
    

     
      this.classesAddVisible = true
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          async addClasses() {          //2.6 添加班级
     
    
   

    

     

    
    

     
      // ajax
     
    
   

    

     

    
    

     
      var url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     

            let { data: baseResult } = await axios.post(url, this.classes) 
     
    
   

    

     

    
    

     
      // 处理结果
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 成功
     
    
   

    

     

    
    

     
        // 提示
     
    
   

    

     

    
    

     
        this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
        // 刷新页面
     
    
   

    

     

    
    

     
        this.selectAllClasses()
     
    
   

    

     

    
    

     
        // 关闭弹出框
     
    
   

    

     

    
    

     
        this.classesAddVisible = false
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 失败
     
    
   

    

     

    
    

     
        this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          async openEditDrawer(cid) {  //3.2 打开编辑抽屉函数
     
    
   

    

     

    
    

     
      // 打开抽屉
     
    
   

    

     

    
    

     
      this.classesEditDrawerVisible = true
     
    
   

    

     

    
    

     
      // 查询详情
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes/${cid}`
     
    
   

    

     

    
    

     

            let { data: baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      this.classes = baseResult.data
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

          async editClasses() {   //3.4 修改班级函数
     
    
   

    

     

    
    

     
      // ajax
     
    
   

    

     

    
    

     
      var url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     

            let { data: baseResult } = await axios.put(url, this.classes) 
     
    
   

    

     

    
    

     
      // 处理结果
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 成功
     
    
   

    

     

    
    

     
        // 提示
     
    
   

    

     

    
    

     
        this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
        // 刷新页面
     
    
   

    

     

    
    

     
        this.selectAllClasses()
     
    
   

    

     

    
    

     
        // 关闭抽屉
     
    
   

    

     

    
    

     
        this.classesEditDrawerVisible = false
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 失败
     
    
   

    

     

    
    

     
        this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

        mounted() {
     
    
   

    

     

    
    

     
    // 1.3 调用班级
     
    
   

    

     

    
    

     
    this.selectAllClasses()
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

后端

ClassesService

  

   

    

     

    
    

     

      package com.czxy.service;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      public interface ClassesService {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 添加 | 修改 班级
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public boolean addClasses(Classes classes);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 查询指定班级
     
    
   

    

     

    
    

     

       * @param cid
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public Classes selectById(String cid);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesServiceImpl

  

   

    

     

    
    

     

      package com.czxy.service.impl;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.mapper.ClassesMapper;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import org.springframework.stereotype.Service;
     
    
   

    

     

    
    

     

      import org.springframework.transaction.annotation.Transactional;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @Service
     
    
   

    

     

    
    

     

      @Transactional
     
    
   

    

     

    
    

     

      public class ClassesServiceImpl implements ClassesService {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Resource
     
    
   

    

     

    
    

     
    private ClassesMapper classesMapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public boolean addClasses(Classes classes) {
     
    
   

    

     

    
    

     
        Classes cls = classesMapper.selectByPrimaryKey(classes.getCid());
     
    
   

    

     

    
    

     
        int result;
     
    
   

    

     

    
    

     
        if(cls != null){
     
    
   

    

     

    
    

     

                  result = classesMapper.updateByPrimaryKey(classes);
     
    
   

    

     

    
    

     

              }else{
     
    
   

    

     

    
    

     

                  result = classesMapper.insert(classes);
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        return result == 1;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public Classes selectById(String cid) {
     
    
   

    

     

    
    

     
        Classes classes = classesMapper.selectByPrimaryKey(cid);
     
    
   

    

     

    
    

     
        return classes;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  
 

ClassesServiceController

  

   

    

     

    
    

     

      package com.czxy.controller;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Classes;
     
    
   

    

     

    
    

     

      import com.czxy.service.ClassesService;
     
    
   

    

     

    
    

     

      import com.czxy.vo.BaseResult;
     
    
   

    

     

    
    

     

      import org.springframework.web.bind.annotation.*;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import javax.annotation.Resource;
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * @Author 刘嘉俊
     
    
   

    

     

    
    

     

       * @Date 2022/3/21
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      @RestController
     
    
   

    

     

    
    

     

      @RequestMapping("/classes")
     
    
   

    

     

    
    

     

      @CrossOrigin
     
    
   

    

     

    
    

     

      public class ClassesController {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @Resource
     
    
   

    

     

    
    

     
    private ClassesService classesService;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @PostMapping
     
    
   

    

     

    
    

     
    public BaseResult addupdateClasses(@RequestBody Classes classes){
     
    
   

    

     

    
    

     
        try {
     
    
   

    

     

    
    

     
            boolean b = classesService.addClasses(classes);
     
    
   

    

     

    
    

     
            if(b){
     
    
   

    

     

    
    

     
                return BaseResult.ok("添加 | 编辑 成功");
     
    
   

    

     

    
    

     

                  }else{
     
    
   

    

     

    
    

     
                return BaseResult.error("添加 | 编辑 失败");
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

              } catch (Exception e) {
     
    
   

    

     

    
    

     

                  e.printStackTrace();
     
    
   

    

     

    
    

     
            return BaseResult.error(e.getMessage());
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    @GetMapping("/{cid}")
     
    
   

    

     

    
    

     
    public BaseResult selectById(@PathVariable("cid") String cid){
     
    
   

    

     

    
    

     

              System.out.println(cid);
     
    
   

    

     

    
    

     
        Classes classes = classesService.selectById(cid);
     
    
   

    

     

    
    

     
        return BaseResult.ok("查询成功",classes);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
  
 

删除

基本功能

• 需求：点击删除按钮，完成删除操作

• 实现

  

   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     
  <div>
     
    
   

    

     

    
    

     
    <!-- 2.4 添加按钮 -->
     
    
   

    

     

    
    

     
    <el-button type="primary" round @click="openAddDialog">添加</el-button>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 start -->
     
    
   

    

     

    
    

     
    <el-table
     
    
   

    

     

    
    

     
      :data="classesList"
     
    
   

    

     

    
    

     
      stripe
     
    
   

    

     

    
    

     
      style="width: 100%">
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cid"
     
    
   

    

     

    
    

     
        label="编号"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="cname"
     
    
   

    

     

    
    

     
        label="班级名称"
     
    
   

    

     

    
    

     
        width="180">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        prop="desc"
     
    
   

    

     

    
    

     
        label="描述"
     
    
   

    

     

    
    

     
        width="280">
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
      <el-table-column
     
    
   

    

     

    
    

     
        label="操作">
     
    
   

    

     

    
    

     
        <template slot-scope="scope">
     
    
   

    

     

    
    

     
          <!-- scope.$index, scope.row -->
     
    
   

    

     

    
    

     
          <!-- 3.1 打开编辑抽屉 -->
     
    
   

    

     

    
    

     
          <el-button size="mini" @click="openEditDrawer(scope.row.cid)">编辑</el-button>
     
    
   

    

     

    
    

     
          <!-- 4.1 删除 -->
     
    
   

    

     

    
    

     
          <el-button size="mini" @click="deleteClasses(scope.row.cid)" type="danger">删除</el-button>
     
    
   

    

     

    
    

     
        </template>
     
    
   

    

     

    
    

     
      </el-table-column>
     
    
   

    

     

    
    

     
    </el-table>
     
    
   

    

     

    
    

     
    <!-- 1.4 班级列表 end -->
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    <!-- 2.1 添加弹出框 start -->
     
    
   

    

     

    
    

     
    <el-dialog title="添加班级" :visible.sync="classesAddVisible">
     
    
   

    

     

    
    

     
      <el-form :model="classes" label-width="80px">
     
    
   

    

     

    
    

     
        <el-form-item label="班级编号">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cid"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级名称">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cname"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级描述">
     
    
   

    

     

    
    

     
          <el-input type="textarea" v-model="classes.desc"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
      </el-form>
     
    
   

    

     

    
    

     
      <div slot="footer" class="dialog-footer">
     
    
   

    

     

    
    

     
        <el-button @click="classesAddVisible = false">取 消</el-button>
     
    
   

    

     

    
    

     
        <el-button type="primary" @click="addClasses">确 定</el-button>
     
    
   

    

     

    
    

     
      </div>
     
    
   

    

     

    
    

     
    </el-dialog>
     
    
   

    

     

    
    

     
    <!-- 2.1 添加弹出框 end -->
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    <!-- 3.3 抽屉 start -->
     
    
   

    

     

    
    

     
    <el-drawer
     
    
   

    

     

    
    

     
      title="修改班级"
     
    
   

    

     

    
    

     
      :visible.sync="classesEditDrawerVisible"
     
    
   

    

     

    
    

     
      direction="rtl">
     
    
   

    

     

    
    

     
      <!-- 修改表单 start -->
     
    
   

    

     

    
    

     
      <el-form :model="classes" label-width="80px">
     
    
   

    

     

    
    

     
        <el-form-item label="班级编号">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cid"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级名称">
     
    
   

    

     

    
    

     
          <el-input v-model="classes.cname"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item label="班级描述">
     
    
   

    

     

    
    

     
          <el-input type="textarea" v-model="classes.desc"></el-input>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
        <el-form-item>
     
    
   

    

     

    
    

     
          <el-button type="primary" @click="editClasses">立即创建</el-button>
     
    
   

    

     

    
    

     
          <el-button @click="classesEditDrawerVisible = false">取消</el-button>
     
    
   

    

     

    
    

     
        </el-form-item>
     
    
   

    

     

    
    

     
      </el-form>
     
    
   

    

     

    
    

     
      <!-- 修改表单 end -->
     
    
   

    

     

    
    

     
    </el-drawer>
     
    
   

    

     

    
    

     
    <!-- 3.3 抽屉 end -->
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      // 1.0 导入axios
     
    
   

    

     

    
    

     

      import axios from 'axios'
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     
  data() {
     
    
   

    

     

    
    

     
    return {
     
    
   

    

     

    
    

     
      classesList: [],            // 1.1 班级列表
     
    
   

    

     

    
    

     
      classesAddVisible: false,    // 2.2 添加弹出框的变量
     
    
   

    

     

    
    

     
      classes: {},                // 2.3 班级表单
     
    
   

    

     

    
    

     
      classesEditDrawerVisible: false,  // 3.4 抽屉变量
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  methods: {
     
    
   

    

     

    
    

     
    async selectAllClasses() {  //1.2 查询班级
     
    
   

    

     

    
    

     
      // ajax 查询班级
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data:baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      // 保存数据
     
    
   

    

     

    
    

     
      this.classesList = baseResult.data
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    openAddDialog() {       //2.5 显示弹出框
     
    
   

    

     

    
    

     
      this.classesAddVisible = true
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    async addClasses() {          //2.6 添加班级
     
    
   

    

     

    
    

     
      // ajax
     
    
   

    

     

    
    

     
      var url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data: baseResult } = await axios.post(url, this.classes) 
     
    
   

    

     

    
    

     
      // 处理结果
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 成功
     
    
   

    

     

    
    

     
        // 提示
     
    
   

    

     

    
    

     
        this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
        // 刷新页面
     
    
   

    

     

    
    

     
        this.selectAllClasses()
     
    
   

    

     

    
    

     
        // 关闭弹出框
     
    
   

    

     

    
    

     
        this.classesAddVisible = false
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 失败
     
    
   

    

     

    
    

     
        this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    async openEditDrawer(cid) {  //3.2 打开编辑抽屉函数
     
    
   

    

     

    
    

     
      // 打开抽屉
     
    
   

    

     

    
    

     
      this.classesEditDrawerVisible = true
     
    
   

    

     

    
    

     
      // 查询详情
     
    
   

    

     

    
    

     
      let url = `http://localhost:8888/classes/${cid}`
     
    
   

    

     

    
    

     
      let { data: baseResult } = await axios.get(url)
     
    
   

    

     

    
    

     
      this.classes = baseResult.data
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    async editClasses() {   //3.4 修改班级函数
     
    
   

    

     

    
    

     
      // ajax
     
    
   

    

     

    
    

     
      var url = `http://localhost:8888/classes`
     
    
   

    

     

    
    

     
      let { data: baseResult } = await axios.put(url, this.classes) 
     
    
   

    

     

    
    

     
      // 处理结果
     
    
   

    

     

    
    

     
      if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
        // 成功
     
    
   

    

     

    
    

     
        // 提示
     
    
   

    

     

    
    

     
        this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
        // 刷新页面
     
    
   

    

     

    
    

     
        this.selectAllClasses()
     
    
   

    

     

    
    

     
        // 关闭抽屉
     
    
   

    

     

    
    

     
        this.classesEditDrawerVisible = false
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        // 失败
     
    
   

    

     

    
    

     
        this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    deleteClasses(cid) {    // 4.2 删除功能
     
    
   

    

     

    
    

     
      // 询问
     
    
   

    

     

    
    

     
      this.$confirm('您确定要删除么?', '删除提示', {
     
    
   

    

     

    
    

     
        type: 'warning'
     
    
   

    

     

    
    

     

            }).then(async () => {
     
    
   

    

     

    
    

     
        // 确认
     
    
   

    

     

    
    

     
        let url = `http://localhost:8888/classes/${cid}`
     
    
   

    

     

    
    

     
        let { data:baseResult } = await axios.delete(url)
     
    
   

    

     

    
    

     
        if(baseResult.code == 20000) {
     
    
   

    

     

    
    

     
          // 成功
     
    
   

    

     

    
    

     
          this.$message.success(baseResult.message)
     
    
   

    

     

    
    

     
          // 刷新
     
    
   

    

     

    
    

     
          this.selectAllClasses()
     
    
   

    

     

    
    

     

              } else {
     
    
   

    

     

    
    

     
          // 失败
     
    
   

    

     

    
    

     
          this.$message.error(baseResult.message)
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            }).catch(() => {
     
    
   

    

     

    
    

     
        // 
     
    
   

    

     

    
    

     
        this.$message.info('用户已取消')         
     
    
   

    

     

    
    

     

            });
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    // 1.3 调用班级
     
    
   

    

     

    
    

     
    this.selectAllClasses()
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

校验关联信息

• 需求：如果有关联数据，先查询，再给出提示

• 步骤：

  • 步骤1：修改student mapper ，提供查询指定班级的学生

  • 步骤2：修改classes serivce，进行数据校验

• 步骤1：修改student mapper ，提供查询指定班级的学生

  

   

    

     

    
    

     

      package com.czxy.mapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import com.czxy.domain.Student;
     
    
   

    

     

    
    

     

      import org.apache.ibatis.annotations.Param;
     
    
   

    

     

    
    

     

      import org.apache.ibatis.annotations.Select;
     
    
   

    

     

    
    

     

      import tk.mybatis.mapper.common.Mapper;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import java.util.List;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      @org.apache.ibatis.annotations.Mapper
     
    
   

    

     

    
    

     

      public interface StudentMapper extends Mapper<Student> {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 通过班级id查询
     
    
   

    

     

    
    

     

       * @param classesId
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    @Select("SELECT *,s_id AS sid , c_id AS cid FROM tb_student WHERE c_id = #{classesId}")
     
    
   

    

     

    
    

     
    public List<Student> selectAllByCid(@Param("classesId") String classesId);
     
    
   

    

     

    
    

     

      }
     
    
  
 

步骤2：修改classes serivce，进行数据校验

  

   

    

     

    
    

     
    @Override
     
    
   

    

     

    
    

     
    public boolean delete(String cid) {
     
    
   

    

     

    
    

     
        // 校验：查询，如果有数据抛异常
     
    
   

    

     

    
    

     

              List<Student> studentList = studentMapper.selectAllByCid(cid);
     
    
   

    

     

    
    

     
        if(studentList.size() > 0 ) {
     
    
   

    

     

    
    

     
            // 有关联数据，不允许删除
     
    
   

    

     

    
    

     
            throw new RuntimeException("班级关联学生，请先删除学生！");
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
        // 删除班级
     
    
   

    

     

    
    

     
        int delete = classesMapper.deleteByPrimaryKey(cid);
     
    
   

    

     

    
    

     
        return delete == 1;
     
    
   

    

     

    
    

     

          }
     
    
  
 

 配置类

BaseResult

  

   

    

     

    
    

     

      package com.czxy.vo;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import java.util.HashMap;
     
    
   

    

     

    
    

     

      import java.util.Map;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      public class BaseResult<T> {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    //成功状态码
     
    
   

    

     

    
    

     
    public static final int OK = 20000;
     
    
   

    

     

    
    

     
    //失败状态码
     
    
   

    

     

    
    

     
    public static final int ERROR = 0;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    //返回码
     
    
   

    

     

    
    

     
    private Integer code;
     
    
   

    

     

    
    

     
    //返回消息
     
    
   

    

     

    
    

     
    private String message;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    //存放数据
     
    
   

    

     

    
    

     
    private T data;
     
    
   

    

     

    
    

     
    //其他数据
     
    
   

    

     

    
    

     
    private Map<String,Object> other = new HashMap<>();
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public BaseResult() {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public BaseResult(Integer code, String message) {
     
    
   

    

     

    
    

     
        this.code = code;
     
    
   

    

     

    
    

     
        this.message = message;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
    public BaseResult(Integer code, String message, T data) {
     
    
   

    

     

    
    

     
        this.code = code;
     
    
   

    

     

    
    

     
        this.message = message;
     
    
   

    

     

    
    

     
        this.data = data;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 快捷成功BaseResult对象
     
    
   

    

     

    
    

     

       * @param message
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public static BaseResult ok(String message){
     
    
   

    

     

    
    

     
        return new BaseResult<>(BaseResult.OK , message);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public static BaseResult ok(String message, Object data){
     
    
   

    

     

    
    

     
        return new BaseResult<>(BaseResult.OK , message, data );
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 快捷失败BaseResult对象
     
    
   

    

     

    
    

     

       * @param message
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public static BaseResult error(String message){
     
    
   

    

     

    
    

     
        return new BaseResult(BaseResult.ERROR , message);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    /**
     
    
   

    

     

    
    

     

       * 自定义数据区域
     
    
   

    

     

    
    

     

       * @param key
     
    
   

    

     

    
    

     

       * @param msg
     
    
   

    

     

    
    

     

       * @return
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     
    public BaseResult append(String key , Object msg){
     
    
   

    

     

    
    

     

              other.put(key , msg);
     
    
   

    

     

    
    

     
        return this;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public Integer getCode() {
     
    
   

    

     

    
    

     
        return code;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public String getMessage() {
     
    
   

    

     

    
    

     
        return message;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public T getData() {
     
    
   

    

     

    
    

     
        return data;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    public Map<String, Object> getOther() {
     
    
   

    

     

    
    

     
        return other;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
  
 

文章来源: blog.csdn.net，作者：陶然同学，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_45481821/article/details/123636755