后台管理项目进展（第三天）

一、搭建用户管理组件，配置路由，样式布局

       

顶部利用element-ui的面包屑导航，页面主体使用了form表单，table栏

二、用户搜索功能

利用了获取用户数据列表中的query查询参数实现对用户名部分字段的匹配查询

当点击搜索框的删除按钮时，清空输入框，同时将用户列表自动恢复无关键字的状态

这里是采用了输入框的clear事件，当清空事件一触发，再次调取获取用户列表请求，重新渲染页面

三、添加用户

 添加用户设置在dialog图层上，当点击添加用户按钮时触发显示，其中稍微麻烦的部分在于每个输入框输入完毕失去焦点时表单的规则校验，提交表单时对整个form的规则校验。输入合法后提交时调用后台新增用户接口，并重新对界面进行渲染。其中表单数据需要通过ref拿到，在调用接口

四、分页设置

 

 根据选择的分页数据呈现相依条数的用户数据，便于用户筛选和查看

实现原理:在选择分页尺寸是，如2条每页，监听分页尺寸数据，提交到后台重新渲染页面

选择不同的页码时同理

五、用户信息修改

 实现原理与添加用户原理相差不大，其中需要注意的是对用户名应只是只读状态，其他的校验规则与添加用户时相同，注意完成修改后需对页面重新渲染

六、删除用户

        这个很简单，点击删除按钮获取到id，调接口删除数据，在对页面重新渲染