10用户管理（Vue3+Spring Boot）

目录

• [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/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 效果演示

用户管理操作视频