目录
前端代码:
后端代码:
controller
service层接口
service接口的实现
mapper层接口
xml
sql
效果:(点击操作列的删除,可删除一行数据。勾选多个多选框再点击批量删除,可删除多个)
前端代码:
<el-input placeholder="请输入姓名" v-model="keyWord" style="width: 400px"><el-button slot="append" icon="el-icon-search" @click="selectAllUser()"></el-button>
</el-input>
<el-button type="primary" @click="batchDeleteUser()">批量删除</el-button>
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="phone" label="电话" width="180"></el-table-column><el-table-column prop="grades" label="班级" width="180"></el-table-column><el-table-column prop="operate" label="操作" align="center" fixed="right"><template slot-scope="scope"><!-- (scope.row.userId)用于获取当前行数据对象中的用户ID(或其他字段) --><el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button><el-button size="mini" type="text" @click="deleteOneUser(scope.row)">删除</el-button></template></el-table-column>
</el-table>
export default {data() {return {tableData: [],selectedIds: [], // 存储选中行的ID的数组}},methods: {//判断用户选择了什么handleSelectionChange(selection) {this.selectedIds = selection.map(item => item.id);},//删除用户(删除多个)batchDeleteUser() {this.deleteUser(this.selectedIds)},//删除用户(删除单个)deleteOneUser(row) {let selectIdArray = [];selectIdArray.push(row.id);this.deleteUser(selectIdArray)},//删除用户逻辑deleteUser(selectIdArray) {this.$confirm('确认删除?').then(() => {//点击确定后的逻辑this.$axios({method: "post",url: "http://localhost:8080/api/user/deleteUser",data: selectIdArray}).then((res) => {if (res.data.code === '200') {this.$message({message: res.data.message,type: "success"});this.selectAllUser();} else {this.$message({message: res.data.message,type: "failed"});}})}).catch(() => {});}}
}
后端代码:
-
controller
@RestController
@RequestMapping("/user")
public class UserController {@AutowiredUserService userService;//删除用户@PostMapping("/deleteUser")public Result deleteUser(@RequestBody String[] userArray){return userService.deleteUser(Arrays.asList(userArray));}}
-
service层接口
public interface UserService {Result deleteUser(List<String> UserList);
}
-
service接口的实现
public Result deleteUser(List<String> userList) {// 判断userList是否为空if (CollectionUtils.isEmpty(userList)) {// 如果是空,则返回删除成功信息和删除数量为0return Result.succeed("删除成功", 0);}// 调用userMapper.deleteUser方法来删除指定的用户int count = userMapper.deleteUser(userList);// 判断删除是否成功if (count == userList.size()) {// 如果全部删除成功,则返回删除成功信息和删除的用户数量return Result.succeed("删除成功", count);} else {// 如果只有部分删除成功,则返回部分删除成功信息和删除的用户数量return Result.succeed("删除部分成功", count);}
}
-
mapper层接口
public interface UserMapper {int deleteUser(List<String> userList);}
-
xml
<update id="deleteUser">update usersetstatus='0'where id in<foreach collection="list" item="item" open="(" close=")" separator=",">#{item}</foreach></update>
数据库
-
sql
/*Navicat Premium Data TransferSource Server : databaseSource Server Type : MySQLSource Server Version : 80029Source Host : localhost:3306Source Schema : score_management_dbTarget Server Type : MySQLTarget Server Version : 80029File Encoding : 65001Date: 18/02/2024 13:52:16
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (`userId` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '账号',`name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '姓名',`password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '密码',`phone` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '手机号',`grades` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '班级',`sex` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '性别',`age` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '年龄',`address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '地址',`status` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT '1' COMMENT '状态',`id` int NOT NULL AUTO_INCREMENT,PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('zhangsan', '张三', '1234', '1778299200', '软件一班', '男', '341', '广西1', '1', 1);
INSERT INTO `user` VALUES ('zhangsi', '张四', '1234', '1778299200', '软件一班', '男399999', '3嗯嗯嗯', '广v', '1', 2);
INSERT INTO `user` VALUES ('liuliu', '刘六', '1234', '1778299200', '软件二班', '男', '34', '广西', '1', 3);
INSERT INTO `user` VALUES ('1', '陈万祥222', '1', '55566777888', '软件二班', NULL, NULL, NULL, '0', 10);
INSERT INTO `user` VALUES ('laoxiaming', '劳霞明', 'laoxiaming', '4646436', '软件二班', NULL, NULL, NULL, '1', 11);SET FOREIGN_KEY_CHECKS = 1;