wordpress主题 academy 模版免费下载搜索引擎优化核心
一、页面效果
实现管理员页面，完成管理员对应角色的中文名称显示，实现搜索栏，表格基本增删改查，分页等功能
二、修改问题
1、修改搜索框传递参数问题
(1)问题图示
如下图，之前搜索后，传递的数据不直接是一个value值，而是如下图的格式
查询可知这里传递的数据定义的是一个ref对象，所以不能直接传递其值，而是应该加上value
(2)方法解决
如下图直接在传递的数据上加入.value
解决之后的图示如下
2、增加下列列表change事件的判断
由于change事件不一定每一个页面都有，所以需要增加判断，如果存在change事件，就执行方法，反之不执行
写入方法，如果change字段存在就执行item.change方法并传递参数ruleForm，反之执行空方法
三、初步搭建
1、apifox—api建立
(1)管理员列表查询
建立接口
创建接口/admin/list
建立期望
{"code": 1,"msg": "成功","total":4,"data": [{id:1,username:"test1",nickname:"张三",roleid:1,createtime:"2025-04-05",lastlogintime:"2025-06-05"},{id:2,username:"test2",nickname:"李四",roleid:2,createtime:"2025-05-05",lastlogintime:"2025-06-06"},{id:3,username:"test3",nickname:"王五",roleid:3,createtime:"2025-06-05",lastlogintime:"2025-06-05"},{id:4,username:"test4",nickname:"赵六",roleid:4,createtime:"2025-06-06",lastlogintime:"2025-06-06"},]
}(2)管理员新增
新建接口
新建接口/admin/add，并写入参数用户名:username,昵称:nickname,角色id:roleid,密码:password
新建期望
(3)管理员修改
新建接口
新建接口/admin/edit,并写入参数修改行id:id,用户名:username,昵称:nickname,角色id:roleid,密码:password
新建期望
(4)管理员删除
新建接口
新建接口/admin/del,并写入参数删除行id:id
新建期望
2、创建新页面、路由、菜单
(1)创建新页面
建立页面AdminuserView.vue
(2)写入路由
(3)写入菜单
四、写入管理员页面
1、视图层
(1)引入表格组件
import Table from '@/components/Table.vue'(2)写入参数
在表格组件中，写入参数：
- 表格列—columns
- api路径(是否显示对应功能)—apiUrl
- 表单—formItems
- 是否显示分页—showPage
- 是否显示搜索栏—showSearch
- 导出Excel名称—exportName
<template><Table :columns="columns" :apiUrl='apiUrl' :formItems="formItems" :showPage="true" :showSearch="true" exportName="管理员数据"></Table>
</template>2、api路径写入
写入apiUrl,并写入查询list,删除del,新增add,编辑edit,导出功能export
//路径
const apiUrl = {list: '/admin/list',del: '/admin/del',add: '/admin/add',edit: '/admin/edit',export: true,
}3、获取全部角色组
(1)api中写入方法
在api/role.js中写入方法，获取全部的角色信息
(2)封装角色方法
在之前权限管理页面中，对角色下拉数据进行了处理，现在需要将其封装到工具方法中便于引用
如下图为权限管理页面RoleView.vue中使用了getRoles方法 ，需要将其方法封装
封装方法如下：
建立工具方法src/utils/tools.js，并将getRoles方法存入其中，并修改其为导出方法
(3)引用方法
- 引入vue的方法ref和reactive
- 引入获取全部角色的方法
- 引入处理角色名称方法
(4)获取全部角色方法
定义方法：存入角色下拉列表数组：parentOptions，存入角色组对象：roleObj
执行AllRoles方法
- ①对获取的数据首先处理角色名称
- ②将处理过名称的数据设置为下拉列表数据parentOptions，数据展示如下
- ③将处理的数据进行循环，并通过数组的方法存入roleObj，key为子项的value(id值)，value为子项的label(名称)，数据展示如下(为了便于写入到表格字段中)
图②
图③
4、表头定义
表头数据有：
- id：ID，隐藏搜索行
- username：用户名，搜索为模糊查询
- nickname：昵称，搜索为模糊查询
- roleid：角色组id，返回值为处理角色组对象对应的角色名称(根据行的id对应数组的key找到对应值)，搜索方式为下拉列表，搜索下拉列表的值为parentOptions的值
- lastlogintime：最后修改时间，隐藏搜索行
- createtime：创建时间，搜索方法为时间范围daterange
5、表单定义
使用的是reactive定义，所以内容的parentOptions不需要使用.value
- roleid：角色组，类型为下拉，下拉数据为变量parentOptions，加入规则
- username：用户名，类型为文本框，加入规则
- nickname：昵称，类型为文本框，加入规则
五、完整代码
1、角色名称处理工具类
src/utils/tool.js
// 定义父级分类
export function getRoles(data, index = 0) {let opts = [];index++let arr = [];for (let i = 0; i < index; i++) {if (i == 0) {arr.push('└')}else {arr.push('┴')}}//存储下拉列表的数组data.forEach(item => {opts.push({label: arr.join('') + item.name,value: item.id})//使用递归，如果存在子项且子项的值不为空，就递归调用自己，并且将子项获取的数据添加到opts中(先结构再传)if (item.children && item.children.length > 0) {// getRoles(item.children)opts.push(...getRoles(item.children, index))}});return opts;
}2、获取角色组api
src/api/role.js
import { get, post } from '@/utils/request'//获取全部权限列表
export function AllPurviews(data) {return get('/role/getallpurviews', data)
}//获取全部角色组
export function AllRoles(data) {return post('/role/list', data)
}3、管理员页面
src/views/AdminuserView.vue
<