效果：
.vue
<template> <div> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">学生管理</el-header> <el-container> <el-aside width="230px" style=" border: 1px solid #eee"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>信息管理</template> <el-menu-item index="1-1">学生管理</el-menu-item> <el-menu-item index="1-2">老师无法管理</el-menu-item> </el-submenu> </el-menu> </el-aside> <!------- 主展示区 --------------------------------------------------------------------------> <el-main> <el-main> <!-- 查询表单 -------------------------------------------------------------------> <el-form :inline="true" :model="searchform" class="demo-form-inline"> <!-- 表单项 --> <el-form-item label="姓名"> <el-input v-model="searchform.name" placeholder="姓名"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="searchform.gender" placeholder="性别"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <!-- 新增学生 --------------------------------------------------------------------------------> <el-button type="text" @click=" dialogFormVisible = true">新增学生</el-button> <el-dialog title="添加学生" :visible.sync="dialogFormVisible"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="学号" prop="studentId"> <el-input v-model="ruleForm.studentId"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="ruleForm.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="爱好" prop="hobbies"> <el-checkbox-group v-model="ruleForm.hobbies"> <el-checkbox label="足球" name="type"></el-checkbox> <el-checkbox label="篮球" name="type"></el-checkbox> <el-checkbox label="英雄联盟" name="type"></el-checkbox> <el-checkbox label="gta" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="专业" prop="major"> <el-select v-model="ruleForm.major" placeholder="请选择专业"> <el-option label="软件工程" value="软件工程"></el-option> <el-option label="信息工程" value="信息工程"></el-option> <el-option label="人工智能" value="人工智能"></el-option> </el-select> </el-form-item> <el-form-item label="电话号码" prop="phoneNumber"> <el-input v-model="ruleForm.phoneNumber"></el-input> </el-form-item> <el-form-item label="身份证号" prop="idCardNumber"> <el-input v-model="ruleForm.idCardNumber"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </el-dialog> <!-- 表格 ------------------------------------------------------> <el-table :data="tableData" border> <el-table-column prop="name" label="姓名" width="80"> </el-table-column> <el-table-column prop="gender" label="性别" width="80"> </el-table-column> <el-table-column prop="major" label="专业" width="100"> </el-table-column> <el-table-column prop="studentId" label="学号" width="100"> </el-table-column> <el-table-column prop="hobbies" label="爱好" width="140"> </el-table-column> <el-table-column prop="phoneNumber" label="电话" width="110"> </el-table-column> <el-table-column prop="idCardNumber" label="身份证号" width="180"> </el-table-column> <el-table-column label="操作" width="150"> <!--------------------------------------- 修改员工 --------------------------------------------------------------------------------------------------------> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="update(scope.row), dialogTableVisible = true">修改</el-button> <el-dialog title="修改学生信息" :visible.sync="dialogTableVisible"> <el-form :model="tabhuixian" :rules="rules" ref="tabhuixian" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名" prop="name"> <el-input v-model="tabhuixian.name"></el-input> </el-form-item> <el-form-item label="学号" prop="studentId"> <el-input v-model="tabhuixian.studentId"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="tabhuixian.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="爱好" prop="hobbies"> <el-checkbox-group v-model="tabhuixian.hobbies"> <el-checkbox label="足球" name="type"></el-checkbox> <el-checkbox label="篮球" name="type"></el-checkbox> <el-checkbox label="英雄联盟" name="type"></el-checkbox> <el-checkbox label="gta" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="专业" prop="major"> <el-select v-model="tabhuixian.major" placeholder="请选择专业"> <el-option label="软件工程" value="软件工程"></el-option> <el-option label="信息工程" value="信息工程"></el-option> <el-option label="人工智能" value="人工智能"></el-option> </el-select> </el-form-item> <el-form-item label="电话号码" prop="phoneNumber"> <el-input v-model="tabhuixian.phoneNumber"></el-input> </el-form-item> <el-form-item label="身份证号" prop="idCardNumber"> <el-input v-model="tabhuixian.idCardNumber"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm222('tabhuixian')">立即修改</el-button> <el-button @click="resetForm222('tabhuixian')">重置</el-button> </el-form-item> </el-form> </el-dialog> <!-- 空格 --> <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-main> </el-main> <!-- 主展示区 -------------------------------------------------------------------------------> </el-container> </el-container> </div> </template> <script> import axios from 'axios'; export default { data() { return { tabhuixian: { id: '', name: '', gender: '', major: '', studentId: '', hobbies: [], phoneNumber: '', idCardNumber: '', }, tableData: [], searchform: { name: "", gender: "" }, dialogFormVisible: false, dialogTableVisible: false, ruleForm: { name: '', gender: '', major: '', studentId: '', hobbies: [], phoneNumber: '', idCardNumber: '', }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], studentId: [ { required: true, message: '请输入学号', trigger: 'blur' }, { min: 8, max: 8, message: '长度8个字符', trigger: 'blur' }, { validator: (rule, value, callback) => { if (value && !value.startsWith('2023')) { callback('学号必须以2023开头'); } else { callback(); } }, trigger: 'blur' } ], major: [ { required: true, message: '请选择专业', trigger: 'change' } ], hobbies: [ { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], } } }, methods: { update: function (row) { axios.get("/getid", { params: { id: row.id } }).then((result) => { this.tabhuixian = JSON.parse(JSON.stringify(result.data)) this.tabhuixian.hobbies = this.tabhuixian.hobbies.split(","); }); }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //获取表单数据 const formData = this.$refs[formName].model; //把hobbits数组改成自负床方便后端接收 formData.hobbies = formData.hobbies.join(","); // alert(JSON.stringify(formData)) axios.post("/add", formData, { headers: { "Content-Type": "application/json" // 设置请求 Content-Type 为 application/json } }).then((result) => { console.log(result); }); } //重置表单 this.$refs[formName].resetFields(); //重新加载页面 location.reload(); }); }, submitForm222(tabhuixian) { this.$refs[tabhuixian].validate((valid) => { if (valid) { //获取表单数据 const formData222 = this.$refs[tabhuixian].model; //把hobbits数组改成自负床方便后端接收 formData222.hobbies = formData222.hobbies.join(","); // alert(JSON.stringify(formData)) axios.post("/update", formData222, { headers: { "Content-Type": "application/json" // 设置请求 Content-Type 为 application/json } }).then((result) => { console.log(result); }); } //重置表单 this.$refs[tabhuixian].resetFields(); //重新加载页面 location.reload(); }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, resetForm222(tabhuixian) { this.$refs[tabhuixian].resetFields(); }, onSubmit: function () { axios.get("/sub", { params: { name: this.searchform.name, gender: this.searchform.gender } }).then((result) => { this.tableData = result.data; }); }, del: function (row) { axios.get("/del", { params: { id: row.id } }).then((result) => { console.log(result.msg); }); this.tableData = this.tableData.filter(item => item.id !== row.id) } }, mounted() { axios.get("/select").then((result) => { console.log(JSON.stringify(result.data)); this.tableData = result.data }); } } </script> <style></style>
controller层
package com.wzy.controller; import com.wzy.StudentService; import com.wzy.pojo.Result; import com.wzy.pojo.Student; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController public class StudentController { @Autowired private StudentService studentService; @GetMapping("/select") public List<Student> getAllStudents() { return studentService.getAllStudents(); } @PostMapping("/add") public Result addStudent(@RequestBody Student student) { studentService.addStudent(student); return Result.success(); } @GetMapping("/del") public Result del(Integer id){ studentService.del(id); return Result.success(); } //条件查询 @GetMapping("/sub") public List<Student> sub(String name,String gender){ return studentService.sub(name,gender); } @GetMapping("/getid") public Student getbyid(Integer id){ return studentService.getbyid(id); } @PostMapping("/update") public Result update( @RequestBody Student student){ studentService.update(student); return Result.success(); } }
mapper层（service层省略)
package com.wzy.mapper; import com.wzy.pojo.Student; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Select; import java.util.List; @Mapper public interface StudentMapper { @Delete("delete from student where id =#{id}") void del(Integer id); @Select("select *from student") List<Student> getAllStudents(); @Insert("insert into student(id, name, gender, major, studentId, hobbies, phoneNumber, idCardNumber) values (#{id},#{name},#{gender},#{major},#{studentId},#{hobbies},#{phoneNumber},#{idCardNumber})") void addStudent(Student student); List<Student> sub(String name, String gender); @Select("select *from student where id =#{id}") Student getbyid(Integer id); void update(Student student); // Other mapper methods for update, delete and search }
mapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.wzy.mapper.StudentMapper"> <select id="sub" resultType="com.wzy.pojo.Student"> select * from student <where> <if test="name!=''"> name like concat('%',#{name},'%') </if> <if test="gender!=''"> and gender = #{gender} </if> </where> </select> <update id="update"> update student <set> <if test="name!=null and name!='' "> name=#{name}, </if> <if test="gender!=null and gender!='' "> gender=#{gender}, </if> <if test="major!=null and major!='' "> major=#{major}, </if> <if test="studentId!=null and studentId!='' "> studentId=#{studentId}, </if> <if test="hobbies!=null and hobbies!='' "> hobbies=#{hobbies}, </if> <if test="phoneNumber!=null and phoneNumber!='' "> phoneNumber=#{phoneNumber}, </if> <if test="idCardNumber!=null and idCardNumber!='' "> idCardNumber=#{idCardNumber}, </if> </set> where id=#{id} </update> </mapper>