黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作

黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作,第1张

黑马程序员视频_用户列表开发

目录

用户列表开发

一.创建用户列表组件

二.在router/index.js导入用户列表组件

三. 设置二级菜单点击时高亮

四.绘制用户列表的基本UI结构

1.头部面包屑导航区

2.卡片视图区域

 3.搜索与添加区域

 4.获取用户列表数据

 5.渲染用户列表数据

 五.搜索功能

          六.添加用户功能

七.修改用户信息

 八.删除用户

九.分配角色

十.提交代码


用户列表开发

点击用户列表,右侧显示用户列表的组件

一.创建用户列表组件

二.在router/index.js导入用户列表组件

设置为Home的子路由

 效果:

三. 设置二级菜单点击时高亮

在Home.vue设置default-active属性

思路:点击链接时,需要把链接的地址保存在sessionStorage,刷新页面时,可以从sessionStorage中取出值,动态赋值给el-menu的default-active属性

给二级菜单都绑定一个单击事件,把path存储起来

 点击用户列表,出现activePath

在data中创建一个空的activePath,

当刷新页面时,页面加载时,就将保存在sessionStorage的地址赋值给activePath

 我们再将activePath动态绑定给default-active

四.绘制用户列表的基本UI结构 1.头部面包屑导航区

 将代码复制到user组件中

 在plugins/element.js中导入组件,然后全局注册

 效果:

 改一下文字并删掉一个

2.卡片视图区域

 复制粘贴到users组件,在plugins/element.js中导入并注册

效果: 

 覆盖默认样式,我们在全局样式表中写样式比较好,给面包屑导航设置一个下外边距

 给卡片设置阴影

 效果:

 3.搜索与添加区域

 复制粘贴到卡片视图中,删除一些不需要的

 效果:

 

使用栅格系统绘制固定宽度

 创建一行两列,列占多宽,使用span属性,然后将搜索区域放进第一列里,还需要在plugins/element.js中导入并注册组件,

效果:

 将添加用户按钮添加到第二列

 效果:

 给row加gutter属性,gutter用来指定每一栏之间的间距

效果:

, 

 4.获取用户列表数据

查看api接口:

 发起数据请求:

首先定义一些基本代码结构,组件的私有数据,生命周期函数,方法

 接着我们在生命周期函数中发起当前组件的首屏数据请求,在created里面调用一个函数

在methods中定义这个函数,调用$http的get发起请求,第一个参数是请求地址,还要携带一些get参数,get参数是用params来进行指定,我们可以将这些参数写进一个对象中再使用

 

 在页面创建期间,就会调用getUserList这个函数,从而发起一次axios数据请求,get会返回一个Promise对象,为了简化Promise *** 作,我们可以使用async,await来优化这次异步 *** 作,既然用到了await,我们就会得到一个数据对象,我们就可以从这个数据对象中解构赋值出一个data属性,重命名为res

 

 控制台打印res:

 数据拿到了,我们可以进行赋值

在data中定义userlist和total,用来存储用户数据和用户数量

判断状态码是否为200,是则将数据赋值给userlist,用户数量赋值给total,不是则返回“”获取用户数据失败”提示信息

 5.渲染用户列表数据 (1)使用表格组件

 在card中写table和table-column,在plugins/element.js中导入并注册

接着为表格指定数据源,:data指定数据源,label指定标题,prop指定对应的值

 

(2)给表格添加边框线,给table添加border属性就可以了

  (3)添加隔行变色的效果:给table添加一个stripe属性

 (4)表格与头部区域之间设置一个间距,在全局样式表里添加样式

 

(5) 给用户列表添加索引列

只需要给table-column添加type=“index”就可以变成索引列 

 (6)改变状态列显示效果

将布尔值渲染成开关效果,只要我们拿到整一行的数据,就可以点出状态具体的值,就可以渲染出来了。


这里我们使用作用域插槽接收scope,就可以通过scope点出来row这个属性,scope.row就对应这一行的数据,拿到这一行的数据,我们就可以通过scope.row.mg_state获取状态的数据,获取到了状态数据,需要通过switch组件渲染成开关

 

 

 

给switch的v-model绑定属性值就可以了,使用switch组件不要忘记在plugins/element.js导入和注册

 

 效果:

 (7)作用域插槽渲染自定义列

在作用域插槽里面放三个图标按钮

size设置按钮尺寸,宽度不够,需要给 *** 作那一列设置宽度

 给分配角色按钮添加文字提示

不要忘记在plugins/element.js导入和注册组件

 

 效果:

实现鼠标加入提示框中提示框自动隐藏

 

 

 (8)实现数据分页效果

 不要忘记在plugins/element.js导入和注册组件

size-change——事件绑定,当下面这个下拉菜单切换时就会触发这个事件,在这个事件处理函数中我们可以拿到最新的pagesize

current-change——事件绑定,当页码值发生切换就会触发事件处理函数,考验拿到最新的页码值

current-page——表示当前显示第几页,我们将queryInfo里面的pagenum绑定到它身上

page-sizes—— 是一个数组,提供多少项,下拉菜单就会有多少项

page-size——表示当前情况下页面显示多少条,我们将queryInfo里面的pagesize绑定到它身上

layout——展示页面的一些功能组件

 total——表示一共有多少条数据

 我们需要把监听到的数据分别保存到queryInfo的pagenum和pagesize身上,最后还需要调用一下getUserList函数重新获取数据

 效果:

(9)用户状态修改

将用户状态的更改同步保存到后台数据库中去,第一步就是通过开关改变拿到用户的最新状态,第二步就是调用对应的api接口,把这次最新的状态保存到数据库中

switch是通过v-model双向数据绑定到用户的状态,我们将用户的数据传过来,如果用户数据发生改变就会触发事件处理函数

 调用api接口保存用户的最新状态,判断状态码是否为200,不是则返回提示信息,并且将用户状态恢复到一开始的样子

效果:刷新浏览器后用户数据还是修改后的样子

 五.搜索功能

首先将文本框的数据和data中的数据进行双向绑定,然后我们点击按钮的时候调用获取用户列表的函数进行数据的查询

 效果:

 完善:清空输入框后显示全部用户数据

 效果:点击清空就会显示所有的用户数据

 六.添加用户功能

 

 将代码复制到卡片视图区域下方,不要忘记在plugins/element.js导入和注册组件

title——对话框的提示标题

visible.sync——用来控制对话框的显示和隐藏,绑定到一个布尔值上

width——对话框的宽度

 before-close——对话框关闭之前会触发这个事件

 span——内容主体区

 点击按钮发现没显示对话框,我们需要给添加按钮绑定一个单击事件,在单击事件中将addDialogVisible重置为true就可以了

 效果:

 渲染添加用户的表单

复制代码粘贴替代内容主体区域的span,完善表单数据对象和验证规则对象

 对邮箱和手机进行自定义规则

定义一个箭头函数,代表一个校验规则,然后给校验规则起一个名字,在具体的规则中通过validator来使用自定义规则

 

 效果:

 实现添加用户表单的重置功能

监听对话框的关闭事件,在关闭事件中拿到表单的引用调用reserFields方法重置表单

 添加用户的预验证功能

给确定按钮绑定一个事件处理函数

 发起请求添加一个新用户

效果:

七.修改用户信息 1.显示对话框

(1)在添加用户对话框下方添加一个修改用户的对话框,在data中定义一个

editDialogVisible,值为false

(2)给修改按钮绑定一个单击事件,事件处理函数只要将editDialogVisible设置为true即可展示对话框

2.通过id获取用户数据

(1)使用作用域插槽的scope.row可以获取一行的数据,而我们就可以使用scope.row.id获取这一行数据的id

 (2)调用对应的接口,获取用户的信息

查看api接口

在data中定义一个空的用户数据对象

将接收到的id调用api接口查询用户的信息,并把查询到的信息保存到我们的表单数据对象上

 

 3.绘制表单

(1)将表单结构复制粘贴到对话框中

(2)对结构进行梳理

:model绑定的是表单数据对象,:rules是绑定表单验证规则对象,ref对应的是当前表单的引用对象

使用disabled属性就可以禁用

用户名:

 效果:

 邮箱和手机:注意v-model绑定的editForm.email和editForm.mobile,email和mobile是接口文档给好的名称,不能乱写

 效果:

 

4.实现关闭对话框后表单验证的重置

给对话框添加关闭响应事件,在事件函数中调用引用对象的resetFields方法

 

效果:

重新打开后:

 

 5.修改信息后的提交到后台之前的预验证

给确定按钮绑定单击事件函数,要对用户的信息进行预验证,发起预验证后才能进行真正的修改

6.发起修改用户信息的数据请求

 效果:

 八.删除用户 1.d框

 首先要在vue原型上挂载confirm函数,这样子每个组件都可以访问到confirm

在plugins/element.js中导入,然后进行全局挂载

 给删除按钮绑定一个单击事件函数,传入id作为参数

 在行为区域定义removeUserById函数

 复制d框的代码到removeUserById函数中,this.$confirm函数的返回结果是promise,我们就可以使用async和await来优化promise *** 作,用户确定删除则返回值为confirm,取消删除返回值为cancel

 2.发起请求删除对应的用户数据

 

九.分配角色

分配角色是与权限管理关联的,所以等权限管理完成后再回过头完成分配角色

十.提交代码

点击终端

git branch 查看当前处于哪个分支

git checkout -b user 新建一个子分支user并切换到user分支上

git branch 查看是否在user分支上

git status 检查user分支上的文件状态

git add . 将这些红色文件统一添加到暂存区

git status 重新检查状态

 git commit -m “完成了用户列表功能的开发”——所有代码的修改都提交到user这个子分支

git status——再检查一下状态

git push -u origin user ——把本地的user分支推送到云端的码云中

开发了一个功能应该立即把所有的代码合并到主分支身上

git branch ——查看当前所处分支

git checkout master——切换到主分支上

git merge user——把user子分支的代码合并过来,这样子本地的master里面的代码也变成最新的

git push——把本地的master代码推送到云端进行保存

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/563701.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-02
下一篇 2022-04-02

发表评论

登录后才能评论

评论列表(0条)

保存