交互设计网站案例百度趋势搜索

管理员管理

搭建管理员页面

在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);//用来存放父级路由的labelconst 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-checkboxnode-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);//用来存放父级路由的labelconst 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>