10用户管理（Vue3+Spring Boot）

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)});
}