目录
- [1. 功能描述](#1. 功能描述)
- [2. 接口地址](#2. 接口地址)
- 3.后台Java代码
- 4.前端框架搭建：views/user添加UserManageVue组件
- [5. api/user.js中写请求接口代码](#5. api/user.js中写请求接口代码)
- [6 获取用户信息](#6 获取用户信息)
- [7 删除用户](#7 删除用户)
- [8 修改状态](#8 修改状态)
- [9 效果演示](#9 效果演示)
1. 功能描述
用户管理界面，对用户进行查询、状态变更、删除。
2. 接口地址
### 获取用户列表
GET http://localhost:8082/user/allUser
### 修改用户状态
PUT http://localhost:8082/user/updateStatus
### 删除用户
DELETE http://localhost:8082/user/deleteUser3.后台Java代码
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);
}
java
//删除用户
@DeleteMapping("/deleteUser")
public Result removeUser(@RequestParam("userId") Integer userId){
boolean result = iUserService.removeById(userId);
if (result) {
return Result.success("删除用户成功!");
} else {
return Result.error("删除失败，用户可能不存在!");
}
}
java
//管理员修改用户状态
@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组件
html
<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中写请求接口代码
javascript
// 获取所有普通用户数据
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 获取用户信息
javascript
// 导入userListService
import { userListService } from '@/api/user'
// 获取用户列表
const getUsers = async () => {
// 这里可以调用后端API获取用户列表
// 假设这里有一个返回用户列表的模拟函数
const result = await userListService()
users.value = result.data
}
// 初始化时获取用户列表
getUsers()7 删除用户
javascript
// 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 修改状态
javascript
// 调用接口
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)
});
}