10用户管理（Vue3+Spring Boot）

目录

  • 1. 功能描述
  • 2. 接口地址
  • 3.后台Java代码
  • 4.前端框架搭建：views/user添加UserManageVue组件
  • 5. api/user.js中写请求接口代码
  • 6 获取用户信息
  • 7 删除用户
  • 8 修改状态
  • 9 效果演示

1. 功能描述

用户管理界面，对用户进行查询、状态变更、删除。

在这里插入图片描述

2. 接口地址

### 获取用户列表
GET http://localhost:8082/user/allUser
### 修改用户状态
PUT http://localhost:8082/user/updateStatus
### 删除用户
DELETE http://localhost:8082/user/deleteUser

3.后台Java代码

//   获取用户列表@GetMapping("/allUser")public Result getAllUser(){
//      查询所有用户角色为USER的用户信息QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.eq("user_role","USER");
//        条件查询List<User> users = iUserService.list(queryWrapper);return Result.success(users);}
    //删除用户@DeleteMapping("/deleteUser")public Result removeUser(@RequestParam("userId") Integer userId){boolean result = iUserService.removeById(userId);if (result) {return Result.success("删除用户成功!");} else {return Result.error("删除失败，用户可能不存在!");}}

 //管理员修改用户状态@PutMapping("/updateStatus")public Result updataUserStatus(@RequestBody User user) {UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();updateWrapper.eq("user_id", user.getUserId()) // 使用目标用户 ID.set("user_status",user.getUserStatus());boolean result = iUserService.update(updateWrapper); // 调用 update 方法if (result) {return Result.success("状态重置");} else {return Result.error("修改失败，可能是其他问题!");}}

4.前端框架搭建：views/user添加UserManageVue组件

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, RefreshRight } from '@element-plus/icons-vue'// 用户表单数据模型
const userModel = ref({userId: '',userName: '',userEmail: '',userStatus: ''
})// 表单引用
const formRef = ref(null)// 用户列表数据模型
const users = ref([{"userId": 1,"userName": "张三","userEmail": "zhangsan@example.com","userStatus": '0'},{"userId": 2,"userName": "李四","userEmail": "lisi@example.com","userStatus": '1'},// 其他用户项...
])// 搜索关键词
const searchKeyword = ref('')// 表单验证规则
const rules = {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],userEmail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }]
}// 控制抽屉是否显示
const visibleDrawer = ref(false)// 获取用户列表
const getUsers = async () => {}// 初始化时获取用户列表
getUsers()// 搜索用户
const searchUsers = () => {if (searchKeyword.value.trim() === '') {// 如果搜索关键词为空，则显示所有用户getUsers()} else {// 根据关键词筛选用户users.value = users.value.filter(user =>user.userName.includes(searchKeyword.value) ||user.userEmail.includes(searchKeyword.value))}
}// 重置搜索
const resetSearch = () => {searchKeyword.value = ''getUsers()
}// 2、实现删除功能
const deleteUser = (userId) => {console.log("删除");
}// 切换用户状态
const toggleUserStatus = (userId) => {console.log("切换状态");
}</script><template><el-card class="page-container"><!-- 搜索表单 --><el-form inline><el-form-item label="用户名/邮箱："><el-input v-model="searchKeyword" placeholder="请输入用户名或邮箱"></el-input></el-form-item><el-form-item><el-button type="primary" @click="searchUsers">搜索</el-button><el-button @click="resetSearch">重置</el-button></el-form-item></el-form><!-- 用户列表 --><el-table :data="users" style="width: 100%" :default-sort="{ prop: 'userName', order: 'ascending' }"><el-table-column label="用户名" prop="userName" sortable></el-table-column><el-table-column label="邮箱" prop="userEmail"></el-table-column><el-table-column label="状态" prop="userStatus" sortable><template #default="{ row }"><el-switch v-model="row.userStatus" active-value="0" inactive-value="1" active-color="#13ce66"inactive-color="#ff4949" @change="toggleUserStatus(row.userId)"><template #active-value>已启用</template><template #inactive-value>已禁用</template></el-switch></template></el-table-column><el-table-column label="操作" width="300"><template #default="{ row }"><el-button :icon="Delete" circle plain type="danger" @click="deleteUser(row.userId)"></el-button></template></el-table-column></el-table></el-card>
</template><style scoped>
.page-container {padding: 20px;
}.header {display: flex;justify-content: space-between;align-items: center;
}
</style>

初始效果如下：
在这里插入图片描述

5. api/user.js中写请求接口代码

// 获取所有普通用户数据
export const userListService = () => {return request.get('/user/allUser')
}// 修改用户状态
export const userStatusUpdateService = (usersDatas) => {return request.put('/user/updateStatus', usersDatas)
}// 删除用户
export const userDeleteService = (userId) => {return request.delete('/user/deleteUser', { params: { userId: userId } })
}

6 获取用户信息

// 导入userListService
import { userListService } from '@/api/user'
// 获取用户列表
const getUsers = async () => {// 这里可以调用后端API获取用户列表// 假设这里有一个返回用户列表的模拟函数const result = await userListService()users.value = result.data
}// 初始化时获取用户列表
getUsers()

7 删除用户

// 1、导入userDeleteService
import { userDeleteService } from '@/api/user'
// 2、实现删除功能
const deleteUser = async (userId) => {await ElMessageBox.confirm('确定要删除该用户吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 用户点击了确定// 提交删除请求userDeleteService(userId).then(result => {ElMessage.success(result.message ? result.message : '删除成功')getUsers()})})
}

8 修改状态

// 调用接口
import { userStatusUpdateService } from '@/api/user'
// 切换用户状态
const toggleUserStatus = (userId) => {const user = users.value.find(u => u.userId == userId)// 这里可以调用后端API更新用户状态userStatusUpdateService(user).then(result => {ElMessage.success(result.message ? result.message : '状态更新成功')getUsers()}).catch(error => {ElMessage.error(error.message)});
}

9 效果演示

在这里插入图片描述
用户管理操作视频

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/56410.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux系统——lvm逻辑卷

Linux系统——lvm逻辑卷

Linux系统——lvm逻辑卷 一、lvm逻辑卷1、lvm操作流程2、操作指令 二、逻辑卷操作1、创建逻辑卷1.1 /dev/cloud/openstack 5G xfs /cloud/openstack1.2 /dev/cloud/docker 10G ext4 /cloud/docker 2、逻辑卷扩容2.1 扩容流程2.2 需求一&#xff1a;扩容ext4文件系统的逻辑卷2.3…
阅读更多...
Ubuntu-Ubuntu22.04下Anacodna3的qmake和Qt的qmake冲突问题

Ubuntu-Ubuntu22.04下Anacodna3的qmake和Qt的qmake冲突问题

Ubuntu22.04下Anacodna3的qmake和Qt的qmake冲突问题 一、问题描述二、原因分析三、解决办法 一、问题描述 Ubuntu22.04下Anacodna3的qmake和Qt的qmake冲突问题 zhyzhy-HP:~/Sources/mpv-examples/libmpv/qt$ make g -c -pipe -g -Wall -Wextra -D_REENTRANT -fPIC -DQT_WIDGET…
阅读更多...
TypeScript中 interface接口 type关键字 enum枚举类型

TypeScript中 interface接口 type关键字 enum枚举类型

type interface总是傻傻分不清~~~ Type Aliases (type) type 关键字用于为类型定义一个别名。这可以是基本类型、联合类型、元组、数组、函数等。type 定义的类型在编译后的 JavaScript 代码中会被移除&#xff0c;不会留下任何运行时的代码。 //联合类型 type StringOrNumbe…
阅读更多...
SQL JOIN的学习

SQL JOIN的学习

SQL JOIN (w3school.com.cn) 之前跟着老师学数据库的时候学过&#xff0c;最近又比较频繁的在使用。 再复习一下。 Id_P是主键 Id_O是主键 1. SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons, Orders WHERE Persons.Id_P Orders.Id_P 2. SEL…
阅读更多...
Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目 本文介绍如何使用idea 2023.2.7构建基于SpringCloud alibaba微服务项目&#xff0c;基于Nacos注册中心。 环境准备&#xff1a; JDK版本&#xff1a;jdk17 SpringBoot:3.3.4 SpringCloud:2023.0.3 Nacos服务端:2.4.3 1、创建父工程&a…
阅读更多...
指针的理解

指针的理解

int arr[3] {10, 20, 30}; int *parr arr; 1. *parr 、 *arr 分别代表什么 指针parr指向数组arr[3]的首元素地址&#xff0c;arr数组名单独使用表示数组首元素地址&#xff0c;即arr>&arr[0]&#xff1b; *parr和*arr是对首元素地址的解引用,代表访问arr[0]的空间…
阅读更多...
MongoDB 介绍

MongoDB 介绍

一、MongoDB 介绍 MongoDB 是一个开源的、面向文档的数据库管理系统。它采用了灵活的数据模型&#xff0c;以类似 JSON 的文档形式存储数据&#xff0c;具有高可扩展性、高性能和丰富的功能。 主要特点包括&#xff1a; 灵活的数据模型&#xff1a;文档型数据库允许存储不同…
阅读更多...
C++面试速通宝典——29

C++面试速通宝典——29

543. 简述#ifdef、#else、#endif和#ifndef的作用 利用#ifdef、#endif将程序功能模块包括进去&#xff0c;以向特定用户提供该功能。 在不需要时用户可轻易将其屏蔽。 #ifdef MATH #include "math.c" #endif 在子程序前加上标记&#xff0c;以便于追踪和调试。 …
阅读更多...
react hooks中在setState后输出state为啥没有变化，如何解决

react hooks中在setState后输出state为啥没有变化，如何解决

在 React Hooks 中&#xff0c;setState 的概念被 useState 或 useReducer 钩子所替代。与类组件中的 setState 一样&#xff0c;这些钩子也是异步更新状态的。因此&#xff0c;如果你尝试在调用 setState&#xff08;即 setXXX 函数&#xff09;后立即读取状态值&#xff0c;你…
阅读更多...
微知-BlueField DPU在lspci中显示Flash Recovery是什么意思？

微知-BlueField DPU在lspci中显示Flash Recovery是什么意思？

效果&#xff1a; lspci |grep BlueField10:00.0 Memory controller: Mellanox Technologies MT42822 Family [BlueField-2 SoC Flash Recovery] (rev 01)*原因&#xff1a; 表示此时flash是empty空的&#xff0c;或者在flash中的FW是无法工作的。比如烧录错误。 这里指的一提…
阅读更多...
How to list the environment variables in MySQL based on podman

How to list the environment variables in MySQL based on podman

有时候&#xff0c;我们期望系统的、完整的输出mysql中的环境变量&#xff0c;但是只是想看看&#xff0c;不想安装mysql&#xff0c;有没有什么好的办法呢&#xff1f; 其实&#xff0c;答案是有的。我们可以基于docker/podman来完成&#xff0c;这里推荐podman&#xff0c;示…
阅读更多...
从不一样的角度体会MATLAB

从不一样的角度体会MATLAB

MATLAB&#xff08;矩阵实验室&#xff09;是一个广泛使用的高性能语言&#xff0c;特别适合用于科学计算、数据分析和图形可视化。它的强大功能和灵活性使得它在工程、金融、科研及教育等领域得到了广泛应用。以下是对MATLAB的一些不同角度的介绍&#xff1a; 1. 编程环境 M…
阅读更多...
大数据测试：Charles修改响应数据

大数据测试：Charles修改响应数据

上一篇大数据测试&#xff1a;Fiddler修改响应数据-CSDN博客 &#xff0c;有同学反馈有没有Charles的方式修改响应数据&#xff0c;本篇就是Charles修改数据操作步骤&#xff0c;相比较fiddler&#xff0c;Charles相对简单&#xff0c;便捷&#xff0c;我很喜欢 1、背景&…
阅读更多...
为什么SSH协议是安全的？

为什么SSH协议是安全的？

SSH的传输层协议&#xff08;Transport Layer Protocol&#xff09;和用户鉴权协议&#xff08;Authentication Protocol&#xff09;确保数据的传输安全&#xff0c;这里只介绍传输层协议&#xff0c;是SSH协议的基础。 本文针对SSH2协议。 1、客户端连接服务器 服务器默认…
阅读更多...
serv00 恢复如初 清理 回到刚注册状态 重生

serv00 恢复如初 清理 回到刚注册状态 重生

内容介绍 本期主要介绍如何将serv00恢复到刚刚注册时的初始状态, 不管你是搭建了节点还是建立了个人博客网站, 使用本期介绍的方法, 都可以将已经写入了内容或者混乱的serv00重置到刚刚注册时的状态. 更多内容&#xff1a;https://lzphy.top/ 1 清除PM2进程 列出进程清单 …
阅读更多...
Web组态数据联动

Web组态数据联动

1. 通过get/post获取设备列表信息 2. websocket连接mqtt服务器&#xff0c;接收json报文信息 3. 通过Alpine进行数据联动 4. 封装svg对象&#xff0c;更新属性值 index.html <!DOCTYPE html> <html lang"en"> <head> <meta charset&qu…
阅读更多...
Wavelet Convolutions for Large Receptive Fields

Wavelet Convolutions for Large Receptive Fields

大感受野的小波卷积 论文链接&#xff1a;https://arxiv.org/abs/2407.05848v2 项目链接&#xff1a;https://github.com/BGU-CS-VIL/WTConv Abstract 近年来&#xff0c;人们一直试图增加卷积神经网络&#xff08;CNN&#xff09;的核大小&#xff0c;以模拟Vision Transfo…
阅读更多...
基于深度学习的车辆车型检测识别系统（YOLOV5）

基于深度学习的车辆车型检测识别系统（YOLOV5）

界面图&#xff1a; 项目简介&#xff1a; 网络&#xff1a;深度学习网络 yoloV5 软件&#xff1a;PycharmAnaconda 环境&#xff1a;python3.8 opencv PyQt5 torch1.9 文件&#xff1a;训练集8000张图片 测试集1000张图片 系统包含所有文件夹 环境文件 UI文件 功能&a…
阅读更多...
javascript中`Math.ceil` 和 `Math.floor`的区别

javascript中`Math.ceil` 和 `Math.floor`的区别

Math.ceil 和 Math.floor 都是 JavaScript 中的内置函数&#xff0c;用于对数字进行取整&#xff0c;但它们的行为有所不同&#xff1a; Math.ceil&#xff1a;向上取整。它返回大于或等于一个给定数字的最小整数。例如&#xff0c;Math.ceil(4.2) 返回 5&#xff0c;Math.ceil…
阅读更多...
解决php连接本地mysql连接错误的问题

解决php连接本地mysql连接错误的问题

我的服务器启用的nginx&#xff0c;配置了php的连接mysql的配置文件connect.php&#xff1a; <?php$server"localhost";//主机$db_username"root";//你的数据库用户名$db_password"root";//你的数据库密码$dbname "users";$conn…
阅读更多...
最新文章

Copyright @ 2022~2023