IDEA+SSM+SpringBoot+Vue+Element UI实现班级管理增删改查

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