当前位置： 首页 > article >正文

vue3+elementPlus之后台管理系统（从0到1）(day3-管理员管理)

article 2025/1/23 22:23:12

管理员管理

搭建管理员页面

在views中创建一个manager文件夹，并创建ManagerIndexView.vue、MangagerListView.vue、UserList.vue

<!-- src/views/manager/ManagerIndexView.vue -->
<template>
    <!--  作为一个占位符，用于渲染与当前 URL 匹配的组件 -->
    <router-view></router-view>
</template>

<script>
</script>

1、获取到所有管理员数据

<!--src/api/user.js-->
//获取管理员列表
export function adminList(){
    return ajax({
        method:'GET',
        url:'admin/list'
    })
}

2、渲染管理员列表

<template>
    <div>
        <el-table :data="computedTableData" style="width: 100%">
            <!-- type="index" 标记为索引序号， label列标题，prop列的数据字段 -->
            <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
            <el-table-column prop="adminname" label="管理员名称" width="180" />
            <el-table-column label="管理员权限">
                <template #default="scope">
                    <!-- <div>
                        {
  
  { scope.row.role == 1?'管理员':'超级管理员' }}
                    </div> -->
                    <el-tag :type="scope.row.role == 1?'':'success'">{
  
  { scope.row.role == 1?'管理员':'超级管理员' }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="adminname" label="操作" width="180" >
                <template #default>
                    <el-button size="small" type="primary">编辑</el-button>
                    <el-button size="small" type="success">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页显示 -->
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="tableData.length" />
    </div>
  
</template>


<script>
import { adminList } from '@/api/user';

export default{
    data(){
        return {
            tableData:[],
            //当前页码
            currentPage: 1,
        }
    },
    methods:{

    },
    mounted(){
        //获取管理员列表
        adminList().then(res=>{
            this.tableData=res.data;
        })
    },
    computed:{
        //计算当前页显示的数据
        computedTableData(){
            return this.tableData.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
        }
    }
}
</script>

分页处理

<el-table :data="computedTableData" style="width: 100%">
	<el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
	...
</el-table>

<!-- 分页显示 -->
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="tableData.length" />
        
computed:{
        //计算当前页显示的数据
        computedTableData(){
            return this.tableData.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
        }
    }

3、添加管理员的功能

页面布局，添加一个抽屉效果

<div class="header">
    <el-button type="success" @click="drawer=true">添加管理员</el-button>
</div>

<!--抽屉效果-->
<el-drawer v-model="drawer" title="添加管理员">
    <el-form label-with="120px">
        <el-form-item label="管理员账号">
            <el-input placeholder="请输入管理员账号" v-model="formData.adminname"/>
        </el-form-item>
        <el-form-item label="管理员密码">
            <el-input placeholder="请输入管理员密码" v-model="formData.password"/>
        </el-form-item>
        <el-form-item label="管理员角色">
            <el-select placeholder="请选择管理员角色" v-model="formData.role">
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="超级管理员" value="超级管理员"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-tree 
                ref="treeRef"
                :data="menus"
                show-checkbox
            >
            </el-tree>
        </el-form-item>
    </el-form>
    <el-button @click="add" type="primary">添加</el-button>
</el-drawer>

在添加按钮回调函数中获取我们用户输入的内容

将用户输入的内容发送给后端服务器

<!--src/api/user.js-->
//添加管理员
export function addAdmin(params){
    return ajax({
        method:'POST',
        url:'admin/add',
        data:params
    })
}

添加成功后关闭抽屉然后重新获取数据

 data(){
        return {
            //是否打开抽屉效果
            drawer: false,
            //路由信息
            menus: routes[0].children,
            //管理员数据
            formData:{
                adminname:'',
                password:'',
                role:'',
                checkedKeys:''
            }
        }
    },
    methods:{
        //获取树型结构中选中的值
        formatCheckedKeys(){
            //根据选中的值得到父级路由
            const list = this.$refs.treeRef.getCheckedNodes(true);
            //用来存放父级路由的label
            const tempList = [];
            //最终结果数组
            const result = [];
            //list是选中的子路由
            list.forEach(item=>{
                //parent：选中子路由的父级路由
                const parent = this.menus.find(mitem=>{
                    return mitem.children.some(child=>child.label==item.label)
                })

                //判断当前父级路由是否已存在
                if(tempList.includes(parent.label)){
                    result.find(item=>item.label==parent.label).children.push(item)
                }else{
                    //将对应的内容放到tempList中
                    tempList.push(parent.label)
                    result.push({
                        label:parent.label,
                        path: parent.path,
                        children:[item]
                    })
                }
            })

            //将路由的权限添加到formData中
            this.formData.checkedKeys = result
        },
        add(){
            //将管理员数据发送给服务器
            //1、收集数据
            this.formatCheckedKeys()
            this.formData.role = this.formData.role =='管理员' ? '1':'2'

            //2、将数据添加到服务器中
            addAdmin(this.formData).then(res=>{
                if(res.code=='200'){
                    ElMessage.success(res.message)

                    //关闭抽屉效果
                    this.drawer=false

                    //重新获取数据
                    adminList().then(res=>{
                        this.tableData=res.data;
                    })
                }else{
                    ElMessage.error(res.message)
                }
            })
        }
    },

4、修改管理员信息

添加一个drawerTitle属性判断是添加还是编辑管理员

<el-drawer @close="close" v-model="drawer" >
    <template #header>
        <h4>{
  
  { drawerTitle=='add'?'添加管理员':'编辑管理员' }}</h4>
    </template>
    ...
    <el-table-column prop="adminname" label="操作" width="180" >
        <template #default="scope">
            <el-button @click="edit(scope.row)" size="small" type="primary">编辑</el-button>
            <el-button @click="deleteClick(scope.row)" size="small" type="success">删除</el-button>
        </template>
    </el-table-column>
</el-drawer>

drawerTitle:'add'   //抽屉标题

打开抽屉，将当前数据渲染在抽屉中

请求前获取用户数据

将用户数据发送给后端

<!--src/api/user.js-->
//修改管理员
export function updateAdmin(params){
    return ajax({
        method:'POST',
        url:'admin/update',
        data:params
    })
}

重新加载最新数据

edit(row){
            //打开抽屉
            this.drawer=true;
            this.drawerTitle='edit'

            //获取当前一行数据
            this.formData.adminname = row.adminname;
            this.formData.password = row.password;
            this.formData.role = row.role=='1'?"管理员":'超级管理员';
            const checkedKeys = [];
            row.checkedKeys.forEach(parent=>{
                parent.children.forEach(item=>{
                    checkedKeys.push(item.path)
                })
            })
            this.defaultCheckedKeys=checkedKeys;
        },
        close(){
            this.formData={};
            this.defaultCheckedKeys=[];

            if(this.$refs.treeRef){
                this.$refs.treeRef.setCheckedKeys([]);
            }
        },
        update(){
            if(this.formData.adminname==''||this.formData.password==''){
                ElMessage.error("管理员或密码不能为空！")
                return
            }

            this.formData.role = this.formData.role=='管理员'?'1':'2';
            //获取当前用户的权限
            this.formatCheckedKeys()
            //提交修改信息
            updateAdmin(this.formData).then(res=>{
                if(res.code=='200'){
                    ElMessage.success(res.message)

                    //关闭抽屉效果
                    this.drawer=false

                    //重新获取数据
                    adminList().then(res=>{
                        this.tableData=res.data;
                    })
                }else{
                    ElMessage.error(res.message)
                }
            })
        },

5、删除管理员

添加点击时间，传递当前行数据

<el-button @click="deleteClick(scope.row)" size="small" type="success">删除</el-button>

发送删除请求进行删除，然后重新加载最新数据

<!--src/api/user.js-->
//删除管理员
export function deleteAdmin(params){
    return ajax({
        method:'POST',
        url:'admin/delete',
        data:params
    })
}

deleteClick(row){
            ElMessageBox.confirm(
                '确定删除？',
                'Warning',
                {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
                }).then(() => {
                    deleteAdmin({adminid:row.adminid}).then(res=>{
                        if(res.code=='200'){
                            ElMessage.success(res.message)

                            //重新获取数据
                            adminList().then(res=>{
                                this.tableData=res.data;
                            })
                        }else{
                            ElMessage.error(res.message)
                        }
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '删除取消',
                    })
                })
        }

ManagerListView完整代码

<template>
    <div>
        <div class="header">
            <el-button type="success" @click="addClick">添加管理员</el-button>
        </div>
        <el-table :data="computedTableData" style="width: 100%">
            <!-- type="index" 标记为索引序号， label列标题，prop列的数据字段 -->
            <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
            <el-table-column prop="adminname" label="管理员名称" width="180" />
            <el-table-column label="管理员权限">
                <template #default="scope">
                    <!-- <div>
                        {
  
  { scope.row.role == 1?'管理员':'超级管理员' }}
                    </div> -->
                    <el-tag :type="scope.row.role == 1?'':'success'">{
  
  { scope.row.role == 1?'管理员':'超级管理员' }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="adminname" label="操作" width="180" >
                <template #default="scope">
                    <el-button @click="edit(scope.row)" size="small" type="primary">编辑</el-button>
                    <el-button @click="deleteClick(scope.row)" size="small" type="success">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页显示 -->
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="tableData.length" />

        <el-drawer @close="close" v-model="drawer" >
            <template #header>
                <h4>{
  
  { drawerTitle=='add'?'添加管理员':'编辑管理员' }}</h4>
            </template>

            <el-form label-with="120px">
                <el-form-item label="管理员账号">
                    <el-input placeholder="请输入管理员账号" v-model="formData.adminname"/>
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input placeholder="请输入管理员密码" v-model="formData.password"/>
                </el-form-item>
                <el-form-item label="管理员角色">
                    <el-select placeholder="请选择管理员角色" v-model="formData.role">
                        <el-option label="管理员" value="管理员"></el-option>
                        <el-option label="超级管理员" value="超级管理员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-tree 
                        ref="treeRef"
                        :data="menus"
                        show-checkbox
                        node-key="path"
                        :default-checked-keys="defaultCheckedKeys"
                        :default-expand-all="true"
                    >
                    </el-tree>
                </el-form-item>
            </el-form>
            <el-button v-if="drawerTitle=='add'" @click="add" type="primary">添加</el-button>
            <el-button v-else @click="update" type="primary">修改</el-button>
        </el-drawer>
    </div>
  
</template>


<script>
import { adminList, addAdmin, updateAdmin, deleteAdmin } from '@/api/user';
import { routes } from '@/router';
import { ElMessage } from 'element-plus';

export default{
    data(){
        return {
            tableData:[],
            //当前页码
            currentPage: 1,
            //是否打开抽屉效果
            drawer: false,
            //路由信息
            menus: routes[0].children,
            //管理员数据
            formData:{
                adminname:'',
                password:'',
                role:'',
                checkedKeys:''
            },
            defaultCheckedKeys:[],
            drawerTitle:'add'   //抽屉标题
        }
    },
    methods:{
        addClick(){
            //打开抽屉
            this.drawer=true;
            this.drawerTitle='add'
        },
        //获取树型结构中选中的值
        formatCheckedKeys(){
            //根据选中的值得到父级路由
            const list = this.$refs.treeRef.getCheckedNodes(true);
            //用来存放父级路由的label
            const tempList = [];
            //最终结果数组
            const result = [];
            //list是选中的子路由
            list.forEach(item=>{
                //parent：选中子路由的父级路由
                const parent = this.menus.find(mitem=>{
                    return mitem.children.some(child=>child.label==item.label)
                })

                //判断当前父级路由是否已存在
                if(tempList.includes(parent.label)){
                    result.find(item=>item.label==parent.label).children.push(item)
                }else{
                    //将对应的内容放到tempList中
                    tempList.push(parent.label)
                    result.push({
                        label:parent.label,
                        path: parent.path,
                        children:[item]
                    })
                }
            })

            //将路由的权限添加到formData中
            this.formData.checkedKeys = result
        },
        add(){
            //将管理员数据发送给服务器
            //1、收集数据
            this.formatCheckedKeys()
            this.formData.role = this.formData.role =='管理员' ? '1':'2'

            //2、将数据添加到服务器中
            addAdmin(this.formData).then(res=>{
                if(res.code=='200'){
                    ElMessage.success(res.message)

                    //关闭抽屉效果
                    this.drawer=false

                    //重新获取数据
                    adminList().then(res=>{
                        this.tableData=res.data;
                    })
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
        edit(row){
            //打开抽屉
            this.drawer=true;
            this.drawerTitle='edit'

            //获取当前一行数据
            this.formData.adminname = row.adminname;
            this.formData.password = row.password;
            this.formData.role = row.role=='1'?"管理员":'超级管理员';
            const checkedKeys = [];
            row.checkedKeys.forEach(parent=>{
                parent.children.forEach(item=>{
                    checkedKeys.push(item.path)
                })
            })
            this.defaultCheckedKeys=checkedKeys;
        },
        close(){
            this.formData={};
            this.defaultCheckedKeys=[];

            if(this.$refs.treeRef){
                this.$refs.treeRef.setCheckedKeys([]);
            }
        },
        update(){
            if(this.formData.adminname==''||this.formData.password==''){
                ElMessage.error("管理员或密码不能为空！")
                return
            }

            this.formData.role = this.formData.role=='管理员'?'1':'2';
            //获取当前用户的权限
            this.formatCheckedKeys()
            //提交修改信息
            updateAdmin(this.formData).then(res=>{
                if(res.code=='200'){
                    ElMessage.success(res.message)

                    //关闭抽屉效果
                    this.drawer=false

                    //重新获取数据
                    adminList().then(res=>{
                        this.tableData=res.data;
                    })
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
        deleteClick(row){
            deleteAdmin({adminid:row.adminid}).then(res=>{
                if(res.code=='200'){
                    ElMessage.success(res.message)

                    //重新获取数据
                    adminList().then(res=>{
                        this.tableData=res.data;
                    })
                }else{
                    ElMessage.error(res.message)
                }
            })
        }
    },
    mounted(){
        //获取管理员列表
        adminList().then(res=>{
            this.tableData=res.data;
        })
    },
    computed:{
        //计算当前页显示的数据
        computedTableData(){
            return this.tableData.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
        }
    }
}
</script>

<style lang="scss" scoped>
.header{
    margin-bottom: 16px;
}
</style>


http://www.kler.cn/a/515469.html

相关文章：

  • css动画水球图
  • 【项目初始化】自定义异常处理
  • JSqlParser：Java SQL 解析利器
  • MySQL四种隔离级别
  • 55.【5】BUUCTF WEB NCTF2019 sqli
  • MDX语言的语法糖
  • STM32项目分享：智能厨房安全检测系统
  • docker 安装 mysql 详解
  • thinkphp8在使用apidoc时, 4层的接口会有问题 解决办法
  • Kafka-常见的问题解答
  • java提取系统应用的日志中的sql获取表之间的关系
  • html、js、css实现爱心效果
  • 消息队列篇--原理篇--Pulsar（Namespace，BookKeeper，类似Kafka甚至更好的消息队列）
  • I2S是什么通信协议？它如何传输音频数据？它和I2C是什么关系？
  • flutter_学习记录_00_环境搭建
  • 华为OD机试真题---战场索敌
  • 【MySQL】C# 连接MySQL
  • 面向对象编程——类的描述与项目文档
  • AIGC大模型详解（ChatGPT,Cursor,豆包，文心一格）
  • 【Hadoop面试题2025】
  • 鸿蒙harmony json转对象（2）
  • Gin 框架入门实战系列教程
  • C Linux 下常用锁介绍
  • python实战（十五）——中文手写体数字图像CNN分类
  • 【Oracle专栏】DBMS_CRYPTO 加密包、AES加解密
  • HTML常用属性