1、项目概述
1.1电商后台管理系统的开发模式（前后端分离）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VHQMH2Z7-1660612410777)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422123030991.png)]
技术选型
Jwt：状态保持的一个工具，通过这个可一模拟登录记录过程
Sequelize: 是操作数据库的一个框架。
2、项目初始化
1.安装vue脚手架
npm i -g @vue/cli@4.5.13
2.通过vue脚手架创建项目
前提：已经安装完vue-cli 3.x 版本
cmd中输入,图形可视化创建项目
vue ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lWAy1y62-1660612410778)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422234325347.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H1wRN6iI-1660612410779)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422234337138.png)] 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RvjqCLka-1660612410780)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422234432098.png)]
3.配置vue路由
必要安装的：
- Babel
- Router (路由)
- Linter/Formatter(将源代码进行格式校验)：弹幕说可以不选
- 使用配置文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RVJVmBl7-1660612410781)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422235224456.png)] 这个一定要关上
·
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K4xPnlUr-1660612410782)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220422235723976.png)]
遇到的问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6h73aY4Z-1660612410782)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423001738820.png)]
原因：原先cli版本太低了，升级到最新版本
解决办法：
删除原来版本
npm uninstall vue-cli -g
安装最新版本
npm i -g @vue/cli
4、配置Element UI组件库
创建完之后，下载vue-cli-element插件
然后进行配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8DkgeQW-1660612410782)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423003612013.png)] 选择import on demand，上面会过于臃肿。
5、配置axios库
点击依赖->安装依赖
6、初始化git仓库
如果没有公钥，要配置公钥。
如果看到 Hi XXX！说明公钥添加成功了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oNX8HVn2-1660612410783)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423153556573.png)]
7、本地项目托管到GitHub或码云中。
1、码云新建仓库
2、在powershell中查看项目状态
git status
添加到暂存区
git add .
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVfwFucJ-1660612410783)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423155750379.png)]
然后先在本地做一次提交
git commit -m "add files"
提交完之后，在git status查看项目状态
这样表示正处于主分支，工作是干净的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBiNSCHb-1660612410784)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423160139222.png)]
如果要把本地的仓库上传到码云中，
做下面两个操作
git remote add or、igin git@gitee.com:szyyds01/vue_shop.git//将本地仓库跟云端仓库做一下关联
git push -u origin "master"//将本地的vue源代码推送到远端
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VCqR5sl-1660612410784)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220423160255670.png)]
执行成功后，刷新码云仓库。
以后每实现一个功能，都要把功能上传道码云仓库中。
8、后台项目的环境安装配置
- 安装MySQL数据库
- 安装Node.js
- 配置项目相关信息
- 启动项目
- 使用Postman测试后台接口是否正常
1、下载php study
然后停掉其他的，只使用mysql。
2、导入数据库，支持api接口服务器的正常运行。
先运行后台项目
在vue_api_serve文件夹中，打开powershell运行项目
输入命令
npm install
node ./app.js
打开接口文档，用postman测试登录是否有效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-udJ08S95-1660612410784)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424001753340.png)] 这样就表示有效。
3、登录与退出功能（Login组件开发）
3.1登录概述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iLbbnBnX-1660612410785)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424123837111.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpAX1BNF-1660612410785)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424123847727.png)]
前端和后台接口之间不存在跨域问题
使用cookie和session记录登录状态。
如果存在跨域问题，则用token方式维持登陆状态
token主要是用于客户端与服务器端身份校验。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMZRWoAD-1660612410785)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424164800002.png)]
3.2登录功能的实现
1、登录界面的布局
通过Element-UI组件实现布局。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3mbi77Zk-1660612410786)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424165059781.png)]
包含三个el-form-item项。
开发新功能，尽量把新功能放在新的分支上去开发，开发 完毕之后，在合并到主分支master上。
先查看工作区是否干净，是否有需要提交的文件
git status
3.2.1创建分支
创建一个login 分支
git checkout -b login//创建并切换新分支
切换分支命令(前提是代码提交干净)
git checkout 要切到的分支
查看项目所有分支
git branch
打开vue可视化面板，查看一下运行状态
任务->serve->点击运行
编译完成。启动app。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLtz0SMc-1660612410787)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424171508865.png)] 想让他成为一个空白目录
src->App.vue删掉里面不要的组件（img,等）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5DCHEaa-1660612410787)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424204922141.png)]
vscode里的App.vue代码是白色，下载插件vetur，就解决了。
在router文件夹->index.js里的routes数组里面删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFVfgYYh-1660612410787)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220424205410625.png)]
遇到的问题：vue项目保存代码时，格式化为双引号，末尾加分号。
分析：Vetur插件主动识别vue文件，原本vetur自带格式化功能，但是和eslint会有冲突，所以我们在项目中会关闭vscode的自动格式化功能。
方法：将setting.json文件里自动格式化功能关闭
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSqcS3N2-1660612410788)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425082612605.png)]·
对vetur插件进行配置
"vetur.format.defaultFormatter.js": "vscode-typescript", // js 使用 typescript
// vue中标签内的多个属性自动换行
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true, // 格式化以单引号为主
"arrowParens": "avoid",
"bracketSpacing": true,
"proseWrap": "preserve" // 代码超出是否要换行 preserve保留
}
},
3.2.1 创建登录组件
//代表支持less语法格式，同时scoped是个指令，用来控制组件样式生效区间
//加了scope代表只在当前组件生效，去掉的话，就会全局生效
<style lang='less' scoped></style>
一个组件的样式，肯定是美化自己组件结构的。不应该影响到其他的组件。
只要定义的是单文件组件，一定要加scoped，防止组件之间的样式冲突。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p4t0gdmN-1660612410788)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425084841917.png)] 、
这个设置完之后，要在router里面通过路由的形式，把它渲染到app.vue组件中。
找到router里面的js文件
导入components里的Login组件
import Login from '../components/Login.vue'
设置路由规则
routes: [
{ path: '/login', component: Login }
]
再到APP组件中，设置路由占位符,这样通过路由，匹配到的这些组件都会渲染到router-view中去
<div id="app">
<router-view></router-view>
</div>
在路由规则中添加一个重定向
// 路由规则
routes: [
{ path: '/', redirect: '/login' },
// 用户访问/login的时候，通过component指定要展示的组件
{ path: '/login', component: Login }
]
没添加重定向的时候，启动项目是这样。要输入login才可以进入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-arhWUVr9-1660612410788)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425101050055.png)]
添加重定向之后，就是这样，自动进入login
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9q3unsg-1660612410789)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425100908410.png)]
3.2.2登录组件布局
1.登录组件背景色
注意要配置好less相关loader。
去vue ui里面找到依赖，安装新的依赖，点击开发依赖搜索less-loader
当然这个是最新版本的，需要指定低版本则npm命令。
npm install less-loader@4.1.0 -D
在安装开发依赖less
npm install less@3.9.0 -D
重启编译serve，打开app
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GuQ0oKpM-1660612410789)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425102644107.png)]
2.写样式，要让背景色充满整个屏幕
1)在src->assets里面新建global.css全局样式表
要让html，body，div（挂载app的）都占满全局
2)在入口文件里面导入全局样式表
完成后，放到这三个上面，会显示占满全局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DVmqh8pg-1660612410789)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425104334553.png)] 但是里面的class=login_container的div没有撑起来父元素
所以给这个元素给一个高度百分之百。
3.绘制白色盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yVMhdK2c-1660612410790)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425112826295.png)]
在login组件中绘制
宽高450px 300px。
圆角边框。
让盒子居中显示
4、绘制登录组件头部布局
成果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FWKV6hA-1660612410790)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425161222533.png)]
5.登录组件表单布局
用element-ui进行表单布局
拷贝form表单 前四行。
注意要在plugins->element.js文件导入
{}是按需导入
import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
完成效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8iXvDuhT-1660612410790)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425200220459.png)]
6、登录表单小组件布局
绘制一下用户和密码的小图标
打开element-ui 的input输入框
在找一下icon图标。如果没有可以通过第三方图标库（阿里图标库）
知识点：字体图标
在main.js导入字体图标样式表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2R0owmvB-1660612410791)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425210646179.png)]
注意：只复制选中部分
<el-input prefix-icon="iconfont icon-user"></el-input>
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqQswXPv-1660612410791)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220425211217454.png)]
综上：1、先导入字体图标样式表。
2、在对应的组件的input中，先加一个iconfont基础类，在把icon-名称复制过来。
密码隐藏和显示：
加入type="password"就是可以在输入密码的时候，隐藏密码。
show-password:可以控制密码显示还是隐藏
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入密码"></el-input>
3.2.3登录表单的数据
1、表单的数据绑定
用户名和密码对应的值，自动绑定到数据云上。
看element ui 对Form表单的定义
第一步：先为el-form加上：model进行数据绑定
第二步：每一个表单项里面的文本输入框，通过v-model属性绑定到数据对象上，具体的属性中。
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域"></el-select>
例如第一个数据会绑定到form对象的name属性。
第二个数据则会绑定到form对象的region属性
v-model，数据的双向绑定。
2、表单的数据验证
在element-ui中的Form表单中的表单验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KY4aORY1-1660612410791)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220426093712262.png)]
trigger: 'blur'//表示鼠标失去焦点的时候
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
使用prop="name"命令规则去验证下面这个表单数据项
<el-input v-model="ruleForm.name"></el-input>
综上：为表单添加验证规则的几个步骤
1、为el-form通过属性绑定指定一个rules校验对象
2、在data数据中定义这个校验对象，每一个属性都是一个验证规则
3、为不同的表单el-form-item项，通过prop指定不同的验证规则来验证
弹幕：全部交给后台，压力太大，前面检验不合法的直接拦截不给后端发请求服务器的资源利用不就得到了提升了。
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ET0ZdilI-1660612410791)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220426110046309.png)]
3、表单的重置
点击重置按钮，重置整个表单的数据校验结果
element-ui中Form表单的底部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I50mVefL-1660612410792)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220426110528427.png)] 只要拿到表单的实例对象，然后调用resetFields函数。
如何拿到表单的实例对象
给el-form加一个ref的引用。
直接通过这个实例对象来调用resetFields函数
给重置按钮绑定一个点击事件
输出的this就是组件的实例
实力里面有个属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KnUT4BA0-1660612410792)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220426113613682.png)]
所以当触发点击事件时，可以调用resetFiles函数
this.$refs.loginFormRef.resetFields()
4、登陆前的预验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coIRxNBn-1660612410792)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220426132142734.png)]
想要调用这个函数，只需要拿到表单的应用对象
刚刚已经添加了，只需要el-form添加一个ref属性。里面的属性值，就是表单的应用对象。
可以直接来调用。
给登录函数绑定一个点击事件。方法里面新增一个login函数。
在login函数里调用validate函数。
5、根据预验证是否发送请求
如果valid为false，则return出去，不发送请求
在具体请求之前，应该找到mian.js对axios进行全局的配置
//导入这个axios包
import axios from 'axios'
//把包挂载到原型对象上
Vue.prototype.$http =axios //这样每一个vue的组件都可以通过this，直接访问到$http,从而去发起ajax请求
//给axios设置一下请求的根路径
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
根路径在素材里面的API接口文档里面。
打开vue_api_serve文件夹，将app.js文件跑起来。
在Login.vue组件中的login函数
if (!valid) { return false }
const result = this.$http.post('login', this.loginForm)
console.log(result)
输入用户密码，点击登录是
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDBaRYuc-1660612410793)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427002825212.png)]
如果某方法访问值是Promise，可以用await和async
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwGdhB0v-1660612410793)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427003219140.png)]
发现是一个具体的响应对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11SIMlLI-1660612410793)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427003259243.png)] 里面有六个属性，六个属性都是axios帮我们封装好的
data才是服务器返回的真实数据。
除了data属性之外，其他5个属性，根本不需要
可以从对象身上，将data属性解构赋值出来。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ai1sKNfh-1660612410794)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427003703546.png)]
这样就可以访问倒真实的服务器数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OnrVmq8t-1660612410794)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427003827875.png)]
6、配置弹窗提示
在element.js中导入Message
这个跟其他几个例如Button、Form等不一样，它需要全局挂载。要挂载到Vue的原型对象上
这样每一个组件，都可以通过this访问$message,
7、登录组件成功后的行为
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YFrGjSHO-1660612410795)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427115651748.png)] token是登陆成功之后，是服务器给我们的登录令牌(身份认证信息)
在访问接口的时候，携带这个token，就可以访问成功。
为什么token是存储在sessionStorage而不是localStorage中，是因为localStorage是持久化的存储机制。
而sessionStorage会话期间的存储机制。
cookie不能跨域名，而不是不能跨域。
跨域指的是：浏览器不能执行其他网站的脚本。
登录成功之后，打印res，发现data里面有个token
下一步操作就是将token放到sessionStorage中。
然后在发生一次页面的跳转。
this.$router是一个编程式导航对象。push（‘地址’）
点击登录成功后，向sessionStorage里面保存一个登录值token
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8vDqJL6D-1660612410795)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427132523074.png)] 没有登录成功之前是没有token的，当然token也可以右击删掉。
4、主页Home组件开发
4.1组件的配置
1、创建Home.vue组件
在路由中导入Home组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WALlTCB6-1660612410796)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427154803850.png)] 点击登录之后，就会展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqAq0hGN-1660612410796)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427154859469.png)]
2、路由导航守卫控制访问权限
就是当把token清除的时候，处于未登录状态，还能访问到home页面。
需求，只有在登录情况下，才可以访问，或者从/home路径直接跳转到登录页
就需要用到路由导航守卫
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JG00fWD7-1660612410796)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427155802618.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NlHDVNZ-1660612410796)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427155829779.png)]
弹幕：token发送到服务器，后端应该要验证token的。
这里老师就判断了有无token，没判断token值
实际开发中前端只管拿到token和保存token，怎么验证怎么分配token是后端的事
3、登录退出功能
只需要把token给销毁。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wp1nnofX-1660612410797)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427173144106.png)]
1、在home页面中，新增一个退出的按钮。
<el-button type="info">退出</el-button>
2、给退出按钮绑定单击事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MkVVMBvo-1660612410798)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427174014394.png)] 点击home页面的退出按钮，会跳转到登录页面。
4、处理项目中的语法警告问题
创建一个配置文件，告诉编译器，格式化代码的时候，如何进行相关的代码格式化。
elint语法是没有冒号，单引号
使用vs自带的格式化代码，会更改为双引号和加上分号
格式化工具和eslint直接导致冲突。
解决：
在项目根目录中创建一个.prettierrc格式化文件的配置项。
添加以下配置：
{
"semi": false,
"singleQuote": true
}
如果想关闭相应的eslint文件格式，打开eslintrc.js文件
vscode里的eslint插件是帮助我们按照eslint语法格式来进行格式化。
5、提交登录功能代码。
查看项目改动情况
git status
将发生修改的文件提交到暂存区
git add .
提交暂存区文件
git commit -m '登录功能完成'
将本地两个分支合并
先切换到本地主分支master中。
git checkout master
然后将本地的login分支与master进行合并。
git merge login
将本地合并好的master远程推送到gitee仓库里面的master分支
git push
将本地login分支推送到远端的login分支上。(如果远端没有这个分支)
git push -u origin login
有的话直接git push
开发中，一般是远端的功能分支拉到本地，然后开发功能。
之后传到远端功能分支，然后本地切换到主分支，进行本地的代码合并，然后在推送到远端的主分支上
4.2 主页布局
1、借助element-ui里面的Container布局容器相关的组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zk4W04nV-1660612410798)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427230039341.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QdpJKy5O-1660612410798)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427224559533.png)]
因为element.js还没有按需导入。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEJMMQwi-1660612410799)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427234410721.png)]
给头部区域Header添加背景颜色
el-header组件名称可以直接当类名，给它加背景颜色。
给侧边栏Aside添加一个背景颜色
再给Main添加背景颜色
效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPY4qQxF-1660612410799)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220427235405726.png)]接再来让整个主体区域撑满整个屏幕。
先检查元素，是什么原因导致了没有占满屏幕。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcDesRp5-1660612410799)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220428112820582.png)]z 是section导致没有占满屏幕。
给外层的el-container加一个类home-container.(这里没有直接只用el-container当类是因为，内部主题区域也有一个el-container，重复了)
高度设置为100%就可以了
2、主页Header布局
1.头部布局
flex布局，让退出按钮和图片区域一头一尾。
最终效果图
2、左侧菜单项
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPpQ504g-1660612410800)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220501200708023.png)]
一级菜单组件：
二级菜单组件：
在element-ui找到导航菜单
搜索组件导航菜单
选中自定义菜单所对应的颜色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJJoYwGj-1660612410800)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220501205330105.png)]
复制粘贴到Home组件中的侧边栏区域
粘贴完之后，先删掉不需要的属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dY7gfdah-1660612410800)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220501205714920.png)]
之后按在element.js按需导入
只需要一级二级菜单，所以把多余的项删掉
删除< el-menu-item-group>内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lbSlOSl7-1660612410801)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220501235134869.png)]
设置完只会，发现一级菜单栏总会比侧边栏宽度少1px，设置一级菜单栏宽度与侧边栏一致。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPU6JUuN-1660612410801)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220502000059851.png)]
3、通过接口获取菜单的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lO3utYW4-1660612410801)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220503093925163.png)]
除了登录接口之外，其他所有的的接口必须要授权，才能够正常调用。
请求拦截相当于一次预处理过程，预处理这次请求。
请求头对象挂载一个自定义属性，它的值就是我们曾今保存到sessionStorage中的token值.
打开mian.js入口文件,在挂载到原型上之前,先设置一个拦截器。
点击登录后，打印出
接下来为请求头对象挂载自定义属性，值就是保存在sessionStorage里面的token字符串
所以在return之前，先为config做一些预处理
打印发现请求头中有Authorization,值是null，因为上面说了
除了登录接口之外，其他所有的的接口必须要授权，才能够正常调用。
登录之后，再去调用其它接口，再去监听这次请求的话，Authorization的值就不再是null了。
而是一个真正的token令牌。这样的话，服务器在接收到这次请求，他会先判断，你的Authorization
是否符合要求，如果符合要求的话，他才会真正的给你响应，如果不符合，或者说值不存在，服务器就直接驳回请求。
4.3发起请求获得左侧的菜单数据
1、打开接口文档
响应数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgGbyHTL-1660612410803)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220509221720003.png)]
2、打开Home.vue，拿到左侧菜单数据
因为在整个页面刚一加载的时候，就应该立即获取左侧菜单
所以在行为区域，定义一个生命周期函数
.get函数返回值是一个Promise
为了简化Promise操作，用async和await来进行简化。
请求路径在接口文档里面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QRSTH2FJ-1660612410803)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220509224055256.png)] 打印出来结果
children是嵌套的二级菜单。
3、数据拿到之后，如何在页面渲染
把获取到的数据，立即挂载到自己的data中。
在定义一个组件的私有数据
判断如果获取数据不成功就显示错误信息，成功就将data数据赋值给组件私有数据menulist[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzVunlkt-1660612410804)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220510224613535.png)]
4.4 左侧菜单UI绘制
绘制左侧菜单，双层for循环就行了，外层for循环主要渲染一级菜单，内层for循环主要用来渲染二级菜单。
找到一级菜单循环渲染 。
每一个v-for尽量都提供一个key属性。key值推荐如果有id尽量用id。
发现每个一级菜单都包含一个id属性
渲染结果
现在的问题是每个一级菜单名都是写死的，现在要将menulist里面每个item项对应的authName名字当做一级菜单名称。
为一级菜单的文本区域动态绑定菜单的名称，名称就是item.authName.
渲染结果：
现在遇到的问题是，点开第一个一级菜单，下面所有的都跟着展开了。
我们希望一个一级菜单标题，只展示对应的内容。
因为index被写死了，每一个菜单都应该有一个独属于自己的index值
来一个动态数据绑定
发现报错
报错原因是因为，index只接受字符串，不接收数值是，但是item.id是一个数值，所以要转化成字符串
最简单的方式，拼接一个字符串。
实现效果:问题解决
问题：二级菜单数据渲染
可以看到二级菜单是通过chidren嵌套了二级菜单列表。
实现效果：
对左侧菜单进行一个格式上的美化
希望选中之后的颜色是一个蓝色，将el-menu中的颜色改掉
现在任务是将所有的二级菜单的图标都变成小方格。
需要找一下element-ui中的icon找到方块图标
将二级菜单的图标更换
下面问题是修改一级菜单图标，一级菜单的图标都是不一样的。
需要通过自定义图标的形式来进行解决。组件库中的图标不够，还是用第三方的字体图标库
如何将这几个字体图标按照顺序加到一级菜单中？
这里面每一个一级菜单都是for循环自动生成的，我们怎么在自动生成期间给他修改不同图标呢？
解决方案：
先在data中定义一个字体对象iconObj:{}
每一个菜单项都有一个对应的id，就可以拿id当作它的key，id对应的图标当作值
第一项id是125
以此类推，记住字体图标不要带.,是复制点后面的类名。
之后再dom中，一级菜单图标区域动态绑定
实现效果：
任务：让图标和文本之间有间距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h29kTca3-1660612410811)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220512200529967-16523571486671.png)]
实现效果：
现在出现的问题是：每次只能展开一个，其他都默认是关闭状态。
element-ui为提供了一个属性
找到导航菜单
值为false时候，就是可以同时打开n多个菜单。为true则只能展开一个菜单。
这个属性是属于
赋值属性名，找到menu菜单项
记得要加:动态绑定
将侧边栏统一对其
任务：左侧菜单项的折叠和展开功能
1、先在菜单之上，放置一个折叠展开的按钮条。
找到侧边栏区域el-aside，在侧边栏菜单区域el-menu之前放一个div，再添加对应类名添加样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r8zEeglk-1660612410812)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220513105253591.png)]·
设置div盒子颜色吗，文本白色居中，字体合适大小。
效果图：
这个三个竖线挨得太近了，需要分割点距离。
添加样式属性
letter-spacing: 0.3em;
希望鼠标放上去的时候是一个小手
cursor:pointer;
下面实现点击功能，点击它实现左侧菜单的折叠与展开。
-
为按钮条绑定一个单击事件
找到element-ui中导航菜单中menu身上有个collapse属性 ，默认值为false。
改为true。接收的是布尔值，所以在前面加一个动态绑定，值为false
但是这边不用这种方式，用动态绑定属性isCollapse
当通过触发点击事件时候，将isCollapse进行布尔值的切换
再methods种
效果：默认展开，点击折叠，展开
接下来就是关闭折叠展开的动画，动画显示折叠过程很卡顿
再element-ui导航菜单中的Menu属性中，有一个collapse-transition属性，默认值是true，默认使用折叠动画
所以把它重置为false。保证它为布尔值，要给他来个动态数据绑定
实现效果：点击折叠动画消失
但是现在问题是，折叠的时候，背景区域并没有跟着变小
导致问题是：因为侧边栏写死了，所以没法跟着折叠
所以只要在isCollapse为true的时候，就是折叠的时候，将侧边栏宽度变小
当为false的时候(展开的时候)，将侧边栏宽度值在恢复成200px
操n作：先F12检查一下折叠状态下宽度是多少
发现宽度是64px
接下来在侧边栏宽度动态的赋值
利用三目运算符
发现可以折叠
如果需要添加折叠与展开动画，在 el-aside 的css加一行 transition: 0.5s;
4.5 首页路由重定向
想要实现效果就是：在登录成功之后、
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYwSWul0-1660612410817)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220514083630072.png)]
在Main区域展示一个welcome欢迎的页面
思路：
1、首先定义一个welcome组件，然后在home页面中Main的位置上放一个路由的占位符
2、紧接着把welcome路由设置为home路由的子路由规则
3、就在home页面中，嵌套显示了welcome的子组件
做法：
1、components文件夹中新建一个Welcome.vue文件，然后输入vue
2、再router文件夹中的index.js文件，导入Welcome.vue组件。
然后希望welcome组件是以子路由规则的形式存在于home规则中，
因为是在home页面中，嵌套着去显示这个欢迎页面。所以要新增一个children属性(子路由的意思)
然后定义路由规则
3、 定义完路由规则之后，应该在home对应的位置，就是main主题区域放一个路由的占位符
实现效果:在登录后，路径是welcome
4.6左侧菜单改造为路由链接
就是下图，点击左侧菜单不同的二级菜单，可以在右侧主题区域切换显示不同的组织页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMJ2FzDY-1660612410819)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220521120130278.png)]
具体实现：就是把每一个二级菜单改为路由链接就行了。
不用单独去给给他们修改成rounter-link，
而是在element-ui中的menu中有一个属性，叫做router，值是一个boolean值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rO2idPTK-1660612410819)(https://raw.githubusercontent.com/joseph-sz/image-sz/master/picgo/image-20220521232049204.png)] 值改为true之后，就代表我们启用了v-router模式，这个模式会在激活导航的时候，以index值，作为path路径来进行跳转。
具体做法：给el-menu加一个属性：:router=''true''如果要把某个值重置为true的时候，直接写router也可以，代表为整个侧边栏开启路由模式。
点击用户列表
然后跳转到这
这个110就是当前二级菜单的用户管理所对应的index值，这个值就是id。
所以110就是用户列表的id值。
可以看一下打印数据，确认是id值
但是拿id作为跳转地址并不是很合适，最好是拿当前这一项的path属性。
作为唯一的跳转路径。
发现这个path服务器并没有加/,但是我们应该知道，每一个路由地址必须以斜线开头
所以说在设置的时候，手动在前面补上一个/
接下来进行一个改造，既然开启路由模式了，那么点每一个二级菜单，都希望它跳转到path地址中
在index中手动凭借/,然后在后面添加subItem.path
实现效果：点击用户管理之后，路由显示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TyytmYWt-1660612410821)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220522191655020.png)]
去角色列表，路由则是roles
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vr2kKJK-1660612410821)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220522194309445.png)]
现在就是实现了，侧边栏路由的改造。
弹幕说没有斜线也可以，会自动加上。
5用户管理开发
当前，点击二级菜单路由连接，并没有显示显示出对应的主页面。
接下来要实现的是这样，点击用户列表，展示的是主题区域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ae4635Rg-1660612410822)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220522231052167.png)]
首先创建用户列表连接对应的那个组件页面。
在components里面新建一个user文件夹，创建一个Users.vue组件
scoped是防止组件之间的样式冲突
组件定义完之后， 通过路由的形式，在右侧主题区域，将用户列表展示出来。
操作：
首先打开router文件夹，在index.js文件中先导入用户列表文件。
然后定义一个路由规则
要被用户列表组件嵌套着显示到home里面去。就是home里面包含了一个子路由叫做用户列表
在home路由规则中的children属性中，新增一个子路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ysTnOJxj-1660612410822)(https://raw.githubusercontent.com/joseph-sz/image-sz/master/picgo/image-20220522234019032.png)]
显示效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UafWEiCU-1660612410823)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220522234053474.png)]
弹幕说：这里要加斜线是因为elementui自己给用户列表添加的path是/users不是/home/users所以加个斜线
现在要把用户连接设置成高亮
在element-ui中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9BTIVek7-1660612410823)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523093430902.png)]
就是说：如果你想让菜单中的每一项高亮，被激活。就把这一项对应的index值赋值为整个menu的属性
叫做default-active。
给整 个菜单手动设置一个default-active值等于/users。
在每次点击这个连接的时候，应该吧对应的地址先保存到sessionStorage，这样就把需要激活的连接保存起来了
等我们刷新页面的时候，可以从sessionStorage里面把那个值取出来，动态的赋值el-menu的default-active
思路：
1、点击连接的时候，把对应的地址保存到session storage里面中
2、当下一次刷新页面的时候，就是home组件刚被创建的时候，就立即把值取出来，就立即赋值给左侧菜单列表
实际操作：
1、给二级菜单都绑定一个单击事件saveNavStates，在单击事件中，把path值存储起来。
2、然后将index值赋值给保存链接状态的单击事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3KcOYoll-1660612410823)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523100150163.png)]
下面定义一下函数，将路径保存到sessionStorage中，设置键名和键值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XHBpqCCR-1660612410823)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523101142309.png)]
演示一下点击二级菜单，sessionStorage中是否保存activePath
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SSoevhp-1660612410824)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523101334415.png)]
在data中定义一个数据，来保存咱们激活的连接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dv50EaRy-1660612410824)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523101727132.png)]
然后将activePath动态绑定到el-menu中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H3LFp8A2-1660612410824)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523103907737.png)]
接下来要做的事情，就是给它动态赋值
在整个home组件一被创建的时候，我们就立即从sessionStorage中取出来然后赋值给它
整个组件被创建的时候，肯定会执行created()这个生命周期函数
所以在这进行赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0GnMju7-1660612410824)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523104440007.png)]
演示：发现动态变化了
并且处于高亮激活状态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FS5gYiX9-1660612410825)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523105301593.png)]
点击用户列表，activePath值发生变化，但是用户列表这个组件对应的连接并没有被高亮
还缺少一步，就是点击不同连接的时候，为activePath重新赋值
操作：
找到点击事件，给data里面的activePath重新赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9gISw5nw-1660612410825)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523172827339.png)]
发现先点击 角色列表高亮，回退点击用户列表也高亮
总结：就是home页面，刚被刷新创建的时候，立即把值取过来在赋值给左侧菜单进行激活
同时，再点击每一个二级菜单的时候，还需要立即给这个data中的activePath重新赋值，这样才能实现高亮效果的动态切换
5.1绘制用户列表基本的UI解构
5.1.1绘制面包屑导航区域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y782Dw9K-1660612410826)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523173603046.png)]
在element-ui中
选中代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X1jj3rVC-1660612410826)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523173737786.png)] 打开Users.vue组件粘贴
找到element.js按需导入el-breadcrumb和对应item
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvoFV9fF-1660612410826)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523180436331.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RT0ynktB-1660612410826)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523180500513.png)]
点击首页的时候，会跳转到/home
点击首页会进入到wekcome页面
5.1.2 绘制主题卡片区域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v8IcXtqc-1660612410827)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523181120998.png)]在ui库中找到对应的组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hNulQbfp-1660612410827)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523184641933.png)]
粘贴到Users.vue组件中，然后进行一下删减
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCTKewsy-1660612410827)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523225222612.png)]
在element.js中进行按需导入
展示效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uWNQtqld-1660612410828)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220523225350276.png)]
发现之间距离太近了，给面包屑来一个margin-botton
覆盖默认样式卸载assets中的css样式里的gloabal.css文件中
具体操作：
通过类名选择器，选中这个卡片式图片。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qN0lWSN-1660612410828)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524105307398.png)]
给卡片视图重置一下阴影样式
找到卡片的类名，进行样式设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxVCMGDX-1660612410828)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524105919298.png)]
box-shadow里面的rgba
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wzvT8hsn-1660612410828)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524105911196.png)] 实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQiASBZL-1660612410829)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524110417074.png)]
下面对input搜素框进行绘制，在组件库中寻找
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJGvHSit-1660612410829)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524113515135.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XrUCD5vt-1660612410829)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524115101998.png)] 显示页面：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2g08J7N-1660612410830)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524115119838.png)] 接下来给input框设定一个固定的宽度
可以使用组件库中的Layout布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCF29rd3-1660612410830)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524115616643.png)]20代表每一个格子之间的距离
然后宽度是24，则每一个格子的span是6.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5QSWojKT-1660612410830)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220524225934321.png)]
然后将input输入框放到第一列里面去
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E85T0hxQ-1660612410831)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525010520847.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6iXveJs-1660612410831)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525010533571.png)]
然后通过el-row的gutter属性来控制间距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hi0ap95R-1660612410832)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525102222128.png)]
5.2 获取用户数据列表
查看api文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-miWLu4n1-1660612410832)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525104421613.png)]
清楚了api接口之后，发起数据请求。
在发起请求之前，先建立基本的代码结构。
1、data：代表当前组件的私有数据
2、created：生命周期函数
3、methods：用来定于当前组件的一些事件处理函数
创建完这三个结点之后
首先在生命周期函数中，来发起当前组件的数据请求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcZcap0C-1660612410832)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525114811887.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SVYjP6PB-1660612410833)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525114827615.png)]
这样再页面创建期间，就会调用生命周期函数。发起一次ajax数据请求。
接下来this.$http.get函数会返回一次proimse对象。
简化Promise操作，可以用async，await来优化这次异步操作
用到await就会得到一个数据对象，紧接着就从这个数据对象身上，解构赋值出一个data属性，
然后重名为res，接下来打印res.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9BY2DjQ-1660612410833)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525120649144.png)]
打印结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUh3zLz6-1660612410833)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525125743813.png)]
其中total是所有的用户数量，通过total实现数据分页
users是数组，里面内包含了第一页中的两个用户
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWKWeUrG-1660612410834)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525130012464.png)]
现在数据拿到了，可以进行一个赋值。
进行一个判断，数据获取成功，则将数据保存到data身上。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXLRrfJI-1660612410834)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525130957781.png)]
定义用户列表和数据总条数初始值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXHKICKf-1660612410834)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525131046417.png)]
5.3 渲染用户列表数据
渲染期间会用到element提供的Table表格组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujOEnlTZ-1660612410835)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525132158230.png)] 渲染姓名：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQPKmqWA-1660612410835)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525132957071.png)] prop查看api文档，姓名的键名是username
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3n8dWIz-1660612410835)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525133029880.png)] 下面依次类推，依次渲染以下数据
目标：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VeSRVtOK-1660612410836)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525133450848.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFvmjp2U-1660612410836)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525154113788.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFmCCb4d-1660612410836)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525154120962.png)]
进行一下美化处理，添加边框线
可以在组件库选择不同的边框线，
之间加一个border属性就有边框了，然后加一个stripe属性就有斑马纹效果了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f818cB9A-1660612410836)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525154910060.png)]
接下来是希望表格和头部区域，有一个间距
找到global.css文件，进行样式修改
5.4为用户列表添加索引列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ye9VbpXC-1660612410837)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525160140027.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rih5VMm-1660612410837)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525160151519.png)]
5.4改造状态列的显示效果
因为mg_state指向的是一个Boolean值 ，无法直接在页面上渲染出来。
希望讲Boolean值渲染为一个开关效果。
如果为true，开关处于一个打开的状态，如果为false，则开关处于一个关闭的状态。
通过scope来查看当前这一行的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTb5ut1l-1660612410837)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525162722150.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJmn0hum-1660612410837)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525162316108.png)]
在状态这一列，只要通过作用域插槽接收了scope，就可以通过scoped.出来的row这个属性
scope.row就代表这一行对应的数据，这一行的数据拿到了，就可以点出来状态具体的值
拿到这样的数据，该如何渲染这个开关呢?
在组件库中有一个switch开关
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBkOulOk-1660612410838)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525163552720.png)]
双向数据绑定，可以将开关状态和数据做一下关联。关联到scope.row.mg_state就行了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P49gFwTX-1660612410838)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220525164804880.png)]
实现效果：
在状态这一列中，定义了一个作用域插槽，通过slot-scope接收了当前数据，
然后可以通过scope.row拿到对应这一行数据，需要把开关状态绑定到对应这一行的数据。
需要把开关状态绑定到每个属性身上，就在v-model中，绑定具体的属性值就行了。
5.5 操作自定列的渲染
因为操作这一列要拿到对应的id才能够进行操作，比如修改、删除…要根据id来进行操作。
这里必须只能使用作用域插槽来决定操作内容渲染。
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mN01pCrq-1660612410838)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526114452784.png)]
下面调整一下按钮的尺寸：在组件库中可以指定尺寸
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbOR0vki-1660612410839)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526114744293.png)]
实现效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWxZXEMm-1660612410839)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526121309994.png)]
现在，鼠标放在图标按钮上方的时候，显示提示文字。在组件库中查找
实现效果：
实现显示自动隐藏，通过enterable属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brPlA4SQ-1660612410839)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526124208054.png)]
实现效果：鼠标放到提示文字上面，提示文字一会会自己消失
5.6实现用户分页效果
查找element-ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lA68cY9e-1660612410839)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526130956696.png)]
需要对他进行一些处理：
找到data
然后将数据绑定到
接着修改一下pagesize
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAxtH5m9-1660612410840)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526132808223.png)]
对应着下拉菜单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5q4QI62-1660612410840)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526132826306.png)]
渲染一下当前每页显示多少数据
通过page-size
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jBDja5R4-1660612410840)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526133611304.png)]
最后动态绑定一下，total的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H2uigsDi-1660612410840)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526134538057.png)]
展示效果：
点击下对应条数，打印出结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zSKzVAS-1660612410841)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526134529062.png)]
打印出2
如果我修改每页展示多少条数据，则最新的打印结果就会显示出来。
既然拿到了最新的pagesize，那可以把这个监听到的值，再保存到data数据的queryInfo里的pagesize上去
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fB6POfjF-1660612410841)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526135239062.png)]
实现效果：下拉选择展示几条数据，就展示几条
接着为pagenum做一下赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZX4viC5-1660612410841)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526230849835.png)]
实现效果：跳转其他页面，刷新数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHpCIaJb-1660612410842)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526230835889.png)]
下面区域离表格太近了，加一些间隙。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atAO5QGt-1660612410842)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526232423557.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7SIWpqT-1660612410842)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526232432510.png)]
5.7实现用户状态的修改
现在有一个问题是，点击状态按钮，刷新页面恢复默认。
解决这个问题，就是将用户状态的更改同步保存到数据库中
首先第一步，要监听到switch开关状态的改变。从而拿到最新的状态。
第二步，调用对应的api接口，把这次最新的状态保存到数据库就行了。
如何监听switch开关状态的改变呢？
找到组件库中switch开关的api文档，找到event事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1zBYa7u-1660612410843)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220526234907187.png)]
找到状态这一列。
只要调用这个函数，就能把当前用户信息传过去
因为当前这个switch是通过v-model属性双向绑定到scope.row.mg_state中。
所以只要状态改变了，那么mg_state也会跟着发生变化。所以直接把scope.row这一行的数据传到回调函数中。
疑问？为啥是scope.row而不是mg_state.
弹幕回答：因为要调的那个后台需要你传这一行的其他值，比如id 这样才能在数据库修改对应的数据。
但是userStateChanged()函数并没有定义，所以在methods中，定义函数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Hd8pNrV-1660612410843)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220527234756646.png)]
点击按钮时，打印结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whnEK5uy-1660612410843)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220527234714638.png)]
按钮打开，状态会显示true
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SA0q3MLA-1660612410843)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220527235114244.png)]
按钮关闭时，状态会显示false
获取到dom上面用户的操作最新状态后，要保存用户的最新状态。
查看api文档来保存，查看用户管理->修改用户状态
一般发生修改都是put请求。通过axios发送一个put请求
这里拼接一些动态参数，要将单引号修改成模板字符串。
:uId和:type可以从userinfo中来获取。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLAQGKVA-1660612410844)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528000519691.png)]
发起这次请求之后，会返回一个Promise对象，为了简化操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zNjGV5c2-1660612410844)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528002344640.png)]
然后如果页面修改失败，数据库中信息没有发生变化，就要将页面中已经修改的按钮重新修改回去。
就将userinfo状态信息做一下取反就行了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1Z6fmlt-1660612410844)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528001911181.png)]
5.8实现搜索功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lRuaMomr-1660612410844)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528101904148.png)]
当用户在文本框中输入不同的名称之后，点击按钮，指定的名称来搜索不同的用户。
思路：
首先将文本框和data中的数据做双向绑定，绑定完之后点击按钮可以调用回去用户列表的函数进行数据的查询
然后给搜索框绑定一个单击事件，绑定到获取用户列表数据的方法中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zh1cHYi4-1660612410845)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528104718939.png)]
点击事件绑定的函数加不加()都可以，如果需要传参数就必须加
实现效果:再搜索框中搜索姓名，点击搜索按钮，就会出现对应的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8JjLyq3-1660612410845)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528123829504.png)]
缺点是如果要查询所有用户的信息，就要删掉搜索框内容，然后点击搜索按钮，比较繁琐。
所以实现一个一键清空搜索框的按钮
根据组件库中，只需要给input添加一个 clearable>属性
但是现在只是可以清空文本框内的文字，但是下面数据并没有变化，没有展示所有数据。
解决方法:在组件库中寻找事件clear，只要单击了清空按钮，就会立即调用这个clear事件。
在此事件中，我们可以重新发起请求。
绑定的函数还是获取用户列表的函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEfQR8Jp-1660612410845)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528174126676.png)]
实现效果：
搜索完之后，点击清空，就展示所有数据
5.9实现添加用户功能
点击添加用户按钮，会实现添加用户对话框。
在组件库中Dialog对话框
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
title表示弹出对话框的标题：
：visible.sync是一个属性绑定，用来控制对话框的显示和隐藏。
所以要将它绑定在一个boolean值身上。
定义一下这个布尔值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F60vr6US-1660612410845)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528203620523.png)]
width是控制对话框的宽度：50%，占屏幕宽度的一半
:before-close代表对话框关闭之前会触发这个事件，现在暂时不需要，就删掉
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zx2eRcx7-1660612410846)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528210904254.png)]
下面底部是两个按钮区域。
将点击事件绑定的布尔值替换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6u2juH9-1660612410846)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528212621091.png)]
只要点击了取消或者确定，都会隐藏对话框
然后现在为添加用户按钮绑定单击事件。然后给它重置为true，因为true是显示弹出对话框，false是不显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDQuQM05-1660612410846)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528212725484.png)]
显示结果：点击添加用户按钮，会弹出对话框，然后对话框。
5.9.1添加用户的对话框中渲染一个添加用户的表单
预期效果图
表单在登录界面已经介绍过了，在组件库中找到Form表单
找到带有表单验证的ui结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1aWQSo8-1660612410846)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528220116769.png)]
复制粘贴到内容主题区域、
然后将代码做一下基本的梳理。
首先一个：model是一个数据绑定。修改为添加表单 addForm，然后在下面定义一个数据对象{}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0rMARhX-1660612410847)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528220959442.png)]
紧接着rules是验证规则，改成addFormRules,同样的需要在下面定义一下。
以此类推，ref修改成addFormRef,他的含义是给el-form起了一个引用名称。就不需要在下面进行定义了
label-width修改成70px；class可以暂时删除。
继续往下面梳理，label改成用户名,prop是验证规则属性，改为username。
因为这也是验证规则，所以也叫加一个usename的验证规则
message是错误消息，告诉它请输入用户名，trigger是触发验证时机。上图代表在失去焦点的时候触发这次验证
这是用户名的验证规则，同时还要有长度上的限制。
再加一个长度验证规则对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C9J7zWP0-1660612410847)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528223945894.png)]
综上，username的表单定义规则就定义完毕了。包含两项：一个是必填项，一个是长度的验证规则。
接下来要将el-input进行一下梳理。
修改一下v-model绑定的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwXiFtqI-1660612410847)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528224833761.png)]
然后在下面添加一个username
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyBPLDcF-1660612410848)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528225244636.png)]
实现效果：点击添加用户弹出
然后继续完善其他表单信息
例如密码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kc0vmSP3-1660612410848)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220528225954452.png)]
添加密码校验规则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GK3Yq5Ki-1660612410848)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529093947145.png)]
继续往下面梳理
以此类推。添加下面的邮箱和手机，但是不需要这两个不需要长度验证
实现效果：
以后输入的所有的数据都会同步到addForm中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTfgi4F8-1660612410848)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529143145013.png)]
但是表单输入的都不是正确的信息，如何自定义校验规则
在组件库中，找到Form表单api文档里的表单验证。
但是里面只有官方提供的一些必填号，长度之类的判断，并没有校验邮箱或手机号验证规则。
就需要用到自定义校验规则。实现邮箱和手机号的校验。
包括3个参数，分别rule代表验证规则、value需要验证的值、callback回调函数
验证通过了，就可以在这个箭头函数中，直接调用这个callpack()
会出现一个绿色的对话框效果，如果验证失败在调用callpack的同时，必须提供一个error对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NO4IoC6q-1660612410849)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529152917716.png)] 里面的字符串就是错误提示信息。
总结：自定义校验规则总共分为两步：
1、定义一个箭头函数、给箭头函数起个名字
2、在具体的规则中通过validator来使用刚才自定义的规则
首先先通过正则表达式校验邮箱和手机
邮箱：
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if (regEmail.test(value)) {
// 合法邮箱
return cb()
}
cb(new Error('请输入合法的邮箱'))
}
手机：
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile =
/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
// 合法手机号
return cb()
}
cb(new Error('请输入合法的手机号'))
}
然后在校验规则中添加表单的邮箱和手机号验证规则
return {
// 添加表单的验证规则对象
addFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' },
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
}
}
弹幕说：建议可以安装一个any-rule插件，常用正则表达式都有。
实现效果：
5.9.2实现添加表单的重置功能
就是点击取消的时候，再次点击添加用户按钮，里面信息都处于一个默认状态，就是上一次在input框填的数据
都处于清空状态。
就是在整个对话框关闭时，重置表单
两个需要注意的点：
1、监听对话框的关闭事件
2、关闭事件中重置这个表单
首先找到代码中的对话框el-dialog，紧接着为它绑定一个close事件(当el-dialog关闭期间触发)。
然后在下面定义一下。
重置表单需要找到ref的引用，然后通过引用调用resetFields方法
实现效果：填入信息之后关闭对话框，再进入之后，信息重置
注意点：
1、监听对话框的close事件
2、在close事件的处理函数中，表单的引用调用resetFields
5.9.3 添加用户前的表单预校验
在点击对话框按钮的时候，不应该直接关闭对话框，
而是再点击这个函数的时候，调用一个函数，在函数中对整个表单进行一下预验证
首先：
1、现为确定按钮绑定一个事件处理函数
2、删掉确定按钮原来点击事件绑定的操 作，加入一个addUser操作处理。
使用一个箭头函数函数validate
实现效果：
当对话框什么都不填，点击确定，发现校验失败。
放按照校验规则输入正确时，打印出true
然后如果校验失败就return出去，没有return出去则是校验成功
就发起真正的添加请求。在api接口文档中找到添加用户
状态是201，代表请求成功。
步骤：先通过post方法，然后路径users和四个参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0S42MBjZ-1660612410849)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529213643328.png)]
但是之前四个参数之前已经在对象addForm中了，所以可以直接把this.addFormd对象丢到请求的
请求体中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYfLlLFw-1660612410849)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529214205964.png)]
post函数会返回一个Promise，所以用await和async。然后判断一下res里面的状态码是否为201
添加用户成功之后，应该隐藏对话框。
显示与隐藏是通过addDialogVisible
所以将确定按钮的addDialogVisible重置为false。
接下来还需要刷新用户的列表，因为用户有新增。新增了就要刷新列表
刷新方法：只需要重新调用getUserList（）这个用户列表函数
实现效果：可以添加新用户
5.9.4点击对话框叉号时，弹出确认对话框
在组件库中添加这个属性
然后在下方添加
同时需要在element.js文件中将$confirm挂载高原型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W01Ne7lU-1660612410850)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220529224653961.png)]
在导入MessageBox。
就可以实现点击叉号弹出确定的对话框了
5.10修改用户
点击修改某一个用户，会弹出这样一个对话框
点击确定就会修改当前用户的信息。
5.10.1点击修改按钮弹出对话框
打开组件库，找到对话框。
在添加用户对话框后面去修改对话框。
弹幕说：确实应该封装一下增删改常用的组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W0f3U63k-1660612410850)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530111316000.png)]
内容区域直接复制之前添加用户的对话框。
编辑一下修改用户的弹出对话框的显示与隐藏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVee9gJb-1660612410851)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530111408596.png)]
找到对应的点击修改用户按钮的点击事件处理函数
进行一个为editDialogViseible重新赋值的操作。
实现效果：点击
5.10.2根据id查询对应用户的信息
当点击修改按钮之后，除了出来一个对话框，还要将用户之前的旧数据填充到对应的input框中
所以点击修改用户的按钮同时查询到对应的旧数据并且将它保存起来，供咱们在表单中进行填充。
首先要拿到用户的id，通过形参的形式，在修改按钮的单击实践中传入。
这个修改按钮通过作用域插槽接收到了scope这个数据对象。
通过scope.row就拿到了这一行对应的数据信息
所以在单击事件中传入这样的参数
打印这个id试一下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NN5lsQpp-1660612410851)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530113814002.png)]
id拿到了，紧接着就应该调用对应的接口获取用户的信息
查看api文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NBQ2gkzM-1660612410851)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530123923368.png)]
这里id是动态的所以用字符串拼接的方式
带data中定义一个表单数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQ5LtjQZ-1660612410852)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530222546382.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qctm6i1I-1660612410852)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220530222734300.png)]
到此为止，就查询到了用户的信息。
整个经过：
先在调用单击事件方法的时候，把用户的id通过scope.row.id给传进去。
下面接受到的id调用api接口查询id，并且将查询到的id保存到了editForm这个表单数据对象上
5.10.3绘制一下修改用户的表单
预览图：
主要就是为邮箱和手机号添加对应的校验规则
类似添加用户的操作
不需要校验规则的就删掉prop="username"
对应的用户这个文本输入框，应该双向绑定到editForm上的用户名属性中。
然后将用户名处于一个禁用的状态
定义表单的规则校验对象。直接复制添加用户中的校验规则。
实现修改表单关闭之后的重置操作
监听对话款的close事件，重置表单
跟上述添加用户表单的重置一样
、
演示效果：
接下来提交修改之前的表单预验证。
为确定按钮绑定一个验证的处理函数。
表单预验证通过之后，就发起网络请求。
查看api文档请求接口
具体实现效果：
5.11删除用户
5.11.1点击删除按钮弹出框
点击删除按钮的时候提示用户吗，是否确定删除
查找组件库中的messageBox弹框
$confirm需要挂载才可以使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dQ7V9Ql9-1660612410852)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220531233802316.png)]
将组件库中的代码粘贴到行为区域
然后根据id删除对应的用户信息
某个函数调用的结果返回值 是Promise，就可以用async和await来进行优化
删除弹窗点击确定打印出字符串confirm
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TNnmdNhL-1660612410853)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601103657258.png)]
对于组件的方法还是老师的方法？
弹幕说：其实then也还好,不用判断confirm结果字符串,确定就then.取消就catch,但复杂一点建议用await,并且是阻塞式同步,可读性更高。
5.11.2完成删除用户的操作
演示结果删除用户成功，列表自动发生刷新
5.12分配角色
分配角色是跟权限管理有关联的。
要在做完权限管理之后，回过头再做分配角色功能
（已做完分配权限，现在开发分配角色功能）
预期实现图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4NWJHEAa-1660612410853)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805204001473.png)]
1、先实现打开分配角色按钮，弹出对话框
仿照前面的删除和编辑，
先给按钮绑定一个点击事件，然后复制组件中的对话框，之后修改一下visible.sync（是一个布尔值，表示对话框的显示与隐藏)和width
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzHnvtrC-1660612410853)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805203343854.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZbZaOXf-1660612410854)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805202753429.png)]
在data中写一个控制对话框显示与隐藏的属性，默认值为false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wg3nSH70-1660612410854)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805203504853.png)]
然后在methods中对点击事件函数进行操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lznm1if6-1660612410854)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805203616566.png)]
实现效果：点击分配角色按钮会弹出对话框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SI3hIpj5-1660612410855)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805203655244.png)]
2.打开对话框的时候 将当前用户的基本信息渲染到对话框当中
在点击按钮的时候，直接将这一行的scope.row传入点击事件就就行了
然后在data中定义一个userInfo
再点击事件中传入userInfo
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qLtiP2Ig-1660612410855)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806091744861.png)]
这样已有的用户信息就被保存到data中去了
然后根据对应的prop值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-40UYhRYa-1660612410856)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806092039784.png)]
来插值渲染出对应的信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FnHJXm1x-1660612410856)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806092210775.png)]
渲染结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfbjQr7L-1660612410856)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806092229617.png)]
3.提供一个下拉菜单供他去选择一个新的角色来进行分配
3.1获取角色列表数据
点击按钮的同时，现将角色列表加载出来。
所以在按钮的时间处理函数中，除了要展示对话框，还要获取所有角色的数据列表
**注意：**通过接口文档获取数据列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9esYtDw-1660612410857)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806093855889.png)]
其中的rolesList需要在data中定义。可以打印一下this.rolesList是否成功获取到
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEHMPxKH-1660612410857)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220806094245963.png)]
上面表示成功获取到角色列表数据
3.2 将获取到的角色列表渲染成一个下拉菜单
在组件库中找到select选择器
复制完之后对内容进行梳理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aW475eQS-1660612410857)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220810005142971.png)]
记得要在data中定义一下v-model值。这样选中的数据才可以双向绑定到data中
4.下面就是点击确定时候，将我们分配的新角色保存到当前的用户信息中
4.1首先要为确定按钮绑定一个事件处理函数(saveRoleInfo), 然后触发这个事件处理函数的时候，应该判断，
它是否选择了一个新的角色。如果没选择，则提示用户。如果选择了就要发起请求，保存这次用户的请求。
（看官方文档）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ue4enRDF-1660612410858)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220810011505861.png)]
打印出结果res看看是否发起请求成功。
如果成功，要进行状态码判断 然后 刷新用户列表并关闭对话框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LEKsDkhP-1660612410858)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220810012442061.png)]
但是有个小问题，就是点击确定之前，关闭对话框没有重置选择项
所以应该监听对话框的关闭事件（close）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0Rnc9P5-1660612410858)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220810012904223.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LFGjKivi-1660612410859)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220810013229398.png)]
下面提交代码到仓库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dx1H0L7V-1660612410859)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601113404274.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRLL71A9-1660612410859)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601113550050.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuCpwzD8-1660612410860)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601113614886.png)]
将发生修改的文件添加到暂存区
git add .
查看状态
git status
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D7u6zZHm-1660612410860)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601113836842.png)]
下面就是把user分支提交到本地仓库中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qD9pU6n3-1660612410860)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601114246667.png)]
然后推送到远端仓库中
因为是user第一次推送，需要将本地分支与云端分支建立链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8ungDO5-1660612410860)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601115019752.png)]
查看git仓库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IW2MvKww-1660612410861)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601115154890.png)]
有了本地的user新分支
然后user分支上的将所有的 代码合并到主分支上
先检查是否处于哪个分支上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kuYh9Ytn-1660612410861)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601115420758.png)]
先切换到主分支
判断是否在master主分支上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VNwcdFGu-1660612410861)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601115614685.png)]
将本地user代码合并到本地master分支上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ohIXxUBM-1660612410861)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601120018377.png)]
现在本地的master是最新的
现在需要将本地最新的master代码推送到云端master中
git push
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suw1ETV5-1660612410862)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601120408969.png)]
因为这次云端已经有master分支，就直接git push就行了
6、权限管理开发
6.1权限列表
先在本地新建一个rights分支，用户开发权限管理的新功能
git checkout -b rights
然后将本地的rights推送到云端进行保存
第一次推送，所以要写一个-u命令
git push -u origin rights
刷新gitee仓库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdNhtIk3-1660612410862)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601190943870.png)]
接下来所有的功能都可以基于这个rights子分支来进行开发
6.1.1权限列表的路由规则
先创建对应的组件，再创建对应的路由规则
1、在components文件夹下新建一个power文件夹，所有跟权限管理相关的页面，都放在power子目录中
然后在文件夹中新建一个Rights.vue组件。
新建完之后，直接输入vue创建模板。
2、在对应的路由规则中导入组件
路由规则还是在home组件的children属性中添加
监听的路由地址path点击权限列表之后所访问的地址来决定
组件就通过路由的形式加载过来了
6.1.2绘制一下权限列表基本页面布局
预览图
上面的面包屑导航，直接在之前开发的组件中复制粘贴
效果演示：
6.1.3请求权限列表数
查看api文档中的。 的请求方法
:type的值直接给它写死为list。
然后进行await和async进行修改
通过解构赋值data重命名为res。
判断请求是否成功。失败返回信息
成功之后将获取的数据挂载到data里面的rightsList中
供页面的模板结构进行使用。
弹幕说：这个请求封装起来好点吧 传入地址参数消息信息。(老师是为了更熟悉使用)
可以尝试着打印一下this.rightsList,有48条数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBr4ZFBF-1660612410862)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601235508145.png)]
第一项数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1an27QK-1660612410863)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220601235727940.png)]
6.1.4将数据渲染成表格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l1bLQeY3-1660612410863)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220602004728399.png)]
演示效果：
现在将第二列权限名称的数据渲染出来
el-table-column是一列
prop对应的值需要查看api文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wONbJ0EL-1660612410863)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220602005623754.png)] 
以此类推根据预览图添加 路径 权限等级
渲染效果：
接下来对表格做一个美化
1、给表格加一个边框线：在el-table中添加border属性。
2、给表格加一个隔行变色：stripe
3、美化一下权限等级几个标签
0代表一级权限 1代表二级权限 2代表三级权限
在组件库中寻找tag标签
因为要自定义权限等级的队列要渲染成什么样子，所以要通过作用域插槽的形式来自定义他的输出格式
记得在element.js文件中导入el-tag。
上图的type代表了不同颜色
进行按需展示，只展示对应的等级标签
给三个添加v-if判断
刷新页面：
6.1.5权限管理业务分析
6.2角色列表
6.2.1角色列表路由的切换
点击角色列表在主题区域展示对应的角色。
在power文件夹中，新建一个组件 Roles.vue
然后进行路由的形式加载组件内容等等操作
6.2.2 实现角色列表布局
预期实现：
先放一个面包屑
然后放卡片视图，将添加角色按钮放在一行el-row然后在这一行里面的一列里放一列el-col
按钮下面就是角色列表区域
想要渲染出角色列表：
首先要拿到角色列表的数据，就需要查看api文档查看获取数据方法
举例：
图中的商品管理属于主管这个角色的一级权限，然后在商品管理的权限之下通过children属性
嵌套一个二级权限叫做商品列表，然后这个商品列表又通过一个children属性嵌套一个三级权限
叫做添加商品，因为三级权限已经是极限了，所以他就没有自己的children属性。
下面请求获取所有的角色列表：
查看打印结果：
下面渲染一下角色列表中的table数据。
预览图：
代码：
删除和角色配分类似。
注意一下分配权限的图标
实现效果：
现在前面还有一列用户展开展示详细信息的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qF8gJENV-1660612410863)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220607211403452.png)]
效果：
6.2.3作业：添加用户，完成增删改
根据用户列表的增删改查来完成。
注意发起修改请求这一步。传入的参数id是roleId。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vXPO5YTn-1660612410864)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220609204132199.png)]
因为后台返回的res.data中的数据是roleId
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrsfmFz0-1660612410864)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220609204837980.png)]
6.2.4角色下权限数据的渲染
预览图：
要在展开行中拿到角色对应的所有权限。
如何去拿：
请求这个数据列表时候，服务器返回的数据中，已经包含了每个角色下的所有信息。
每一个对象身上的children属性就是角色所拥有的所有权限。
通过作用域插槽去拿。
可以获取到数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lovvQoCK-1660612410864)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220613004842855.png)]
可以通过pre标签对数据进行一个美化。
展示效果：
scope.row.children属性下就是当前主管所有的权限
因为chidren也是一个数组，可以循环里面的每一个对象。
就把所有的一级权限就给渲染出来了。
然后所有的一级权限中又通过chindren属性嵌套类所有的二级权限
想要像下面这样渲染出一级 二级 三级这样的结构的话，需要三层for循环的嵌套
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1zuFh4C-1660612410865)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220613005558735.png)]
最外层这个for循环用来渲染一级权限。中间的用来渲染二级权限，最后三级for循环用来渲染三级权限。
先渲染角色的一级权限 ：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rcZIvCiS-1660612410865)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220719102421415.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwewZyZP-1660612410865)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220719113505671.png)]
然后给el-tag做一个美化。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VgDYgts5-1660612410866)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220719172317486.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHFVUFOM-1660612410866)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220719172335195.png)]
然后根据ui图，放个小图标：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJwwd8Xu-1660612410866)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220719172418722.png)]
在elementui中查找字体图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9iStfXr-1660612410866)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220720004118696.png)]
下面渲染二级菜单
参考代码：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9uQ6SDG-1660612410867)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220720102202813.png)]
效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8T3iqTi-1660612410867)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220720102234644.png)]
紧接着就是三级权限的渲染
这里为什么大的是19里面又是24
弹幕说：因为把大的19分成了24份
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDJgS1GL-1660612410867)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220721181213163.png)] 分析一下三层循环的el-row和el-col：
三层循环中，用了两个el-row，一个最外层包着一二三级，
然后二级三级被一个el-row包裹着。
就是首先第一个最大的是作用域插槽里面的一个el-row包裹全部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XT0cTjCB-1660612410868)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220721183319060.png)]
然后下面在el-row一行中分成两大部，第一部分占5是一级权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNXysjQk-1660612410868)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220721183710722.png)]
第二部分占比19是二三级权限，然后再将el-col分为24分里面第一个包含这一个大的col-row
在划分两个el-col来给二三级权限
前面一二级权限遍历是在el-row里面，最后一个在el-tag里面
效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRwGWb7a-1660612410868)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220721184138445.png)]
6.2.5删除角色下对应的权限
实现一个删除角色下指定权限的需求：
详细：为每个权限都设置一个叉号小图标，然后点击图标时，会弹出一个确认删除订单的提示框。
实现方法：
找到element-ui找到 标签->可移除标签->
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-It2BDJNI-1660612410868)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220723171631635.png)]
在三个级别对应的el-tag标签里添加一个closable
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CYW4lerl-1660612410869)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220723172046889.png)] 然后再tag标签种找到事件event
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8N7LWu25-1660612410869)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220723172209417.png)] 然后绑定一个事件。
之后再找到组件库种的Message Box的组件里面的确认消息框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-srhtnAj8-1660612410869)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220723174137460.png)]
具体实现代码：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vZwy2hwu-1660612410869)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220726000403499.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IlVYzMdh-1660612410870)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220726000435715.png)]
上面实现了给tag加×号然后。 然后点击x号弹出确认框（确认是否删除），然后点击取消，退出提示框，然后提示消息：取消了删除。
下面要实现点击确认删除后的操作
点击确认删除后，发起删除的业务请求，需要查看接口文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OLLCUwWl-1660612410870)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220729091657136.png)]
发起http请求删除操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5XC1XeA-1660612410870)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220729092107882.png)]
这roleId不是真正的角色id，需要替换成真正的角色id
想要拿到角色id
如下图，点击el-tag会触发close时间，将scope.row传入点击事件函数中，就能拿到（包含）角色id
然后想要替换掉权限id，同理将item3.id传入函数内。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fhbe7K1k-1660612410870)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220731093946340.png)]
然后在处理函数的形参中接受一下，然后进行一些列操作
具体代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RDlHd3Ri-1660612410871)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220731103049936.png)]
现在遇到一个问题就是：删除权限之后，权限列表就会自动合上。
**原因：**确认删除之后，会刷新 重新获取整个数据列表，然后table表格会重新渲染一次，打开状态就会被立即取消
**解决方法：**只要接口调用成功了，服务器返回的res数据中，已经包含了具体的权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQKldM0u-1660612410871)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801221336466.png)] 比如说之前有九个权限，删除一个就剩下八个，然后这一次服务器delete后的返回值就包含咱们最新的那八个权限。
需要做的就是把服务器返回值中的data，重新为角色赋值就行了。
具体代码：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mwy2AvJh-1660612410871)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801222010763.png)]
实现效果：点击确认删除权限之后，不会重新刷新table
接下来就是让一二级权限都可以删除功能
方法：直接让刚刚的三级权限的close事件和closeable复制到一二级的tag中
注意要修改item的对应数字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-do6D5QRU-1660612410872)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801222526780.png)]
6.2.6分配权限功能实现
实现目标：点击分配权限按钮时候，弹出对话框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oir7D3cV-1660612410872)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801223153629.png)] 同时弹出对话框的同时，将已经存在的权限数据都获取到，在这个里面都显示打钩
单击事件名：showSetRightDialog
第一步：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6oAEzG5-1660612410872)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801225419944.png)]
第二步：在data里面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WqvwniF1-1660612410873)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801225639528.png)]
第三步：点击触发事件的时候重置为true
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DoG6AxA7-1660612410873)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801230203641.png)]
实现效果：点击分配权限弹出对话框
第四步：获取所有权限列表数据
查看接口文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTpbKrAN-1660612410873)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220801230339381.png)]list会以列表的形式把所有权限展示出来，tree会把所有权限以嵌套关系形成一颗权限树。
我们这边是把权限渲染成一个树形结构，所以在这边要把type指定为tree
记住在获取权限数据成功之后，给rightsList赋值
思路：
1，在data中先定义一个默认数据为空的数组rightsList
2，然后看接口文档，通过方法获取到后台权限数据
3.成功能获取导数据之后，将获取到的数据保存在data中
4，将所有的权限数据以树形结构，加载到对话框中
在组件库中找到Tree树形组件，按需导入组件
:data 数据源就是rightsList
:props为整棵树指定数据绑定的字段（例如在整个树中看到的整个文本是哪个属性，甚至说，是通过哪个属性实现父子间的嵌套的）
要记得在data里面定义一个treeProps初始值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tROLa2bT-1660612410874)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803162907906.png)]
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wtti35gp-1660612410874)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803170037575.png)]
5.添加复选框，寻找组件库中可选择，只需要为el-tree添加一个show-checkbox
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVOjG3zE-1660612410874)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803171434215.png)]
6，选中这一项，应该默认选中这一项对应的id值
通过组件库中tree树形控件中的Attributes属性结点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TsZ4Tg9F-1660612410875)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803173441004.png)]
添加完node-key属性结点之后 只要勾选了这个结点，勾选这个就是对应的id值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5OfL1fE-1660612410875)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803173721389.png)]
就是为了每一个复选框选中之后绑定了它选中之后具体选中的值是id。
7.现在默认打开是折叠起来的，希望打开之后将所有结点都展开（默认打开所有结点）
通过组件库中找到属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PoW6trGE-1660612410875)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803174216263.png)]
将它默认值重置成true
8.将角色已经拥有的权限，默认加载到对话框中
通过组件库中的default-checked-keys属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJqUrMtX-1660612410875)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803174824391.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PQ3rU9JL-1660612410876)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803175005172.png)]
然后先在data中做一个定义，默认选中的节点id值数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFCAajCY-1660612410876)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803181230697.png)]
思路：就是在点击按钮的同时，立即把角色身上已有的三级权限id，把所有的id都添加到defKeys数组中。
做法：
需要在页面中定义一个递归函数getLeafKeys，然后将角色信息传到递归函数中，通过递归的形式把所有三级节点的id都
保存到一个数组中，然后在把数组赋值给defKeys，就能够实现点击分配权限的时候，将已有权限默认都加载出来
递归函数形参中需要有一个结点来判断它是否有三级结点，同时还有一个数组来进行保存。
判断条件就是判断结点是否包含children，不包含则是三级节点。就将结点的id push到数组中
如果包含childern，则不是三级结点，需要进一步调用递归，来获取到最终的三级节点。
需要循环当前node里面的所有数组，每循环一项，拿到一个子节点item，然后再根据item再次调用递归函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIvqel17-1660612410876)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803195458113.png)]
在弹出对话框之前，要把已经有的权限的三级节点id都获取出来。
则要复制递归函数名称，在展示权限对话框函数中做一下调用。在重置为true之前，递归获取三级节点的id
node节点穿的是当前的角色。传一个role。但是需要在外层函数（显示权限对话框）形参传一个role，然后dom点击事件中传一个scope.row。并且在调用函数中提供一个数组defKeys,就可以保证，当这个递归函数调用成功之后，defKeys数组里面保存的一定是已经拥有的三级权限的id。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5L0FVMO-1660612410877)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803200906632.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgayYzcK-1660612410877)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803200544499.png)]
演示效果，点击主管分配权限，弹出框就自动勾选已经有的三级权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFxV8iwv-1660612410877)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803201012836.png)]
弹幕说：1、如果不把 defKeys数组清空，则在打开下一个分配权限对话框时，会显示之前保存下来的 defKeys数组的数据。2、在弹出框关闭时清空数据就行 3、每次掉方法前要把数组先清空
具体操作:
监听分配权限对话框的关闭事件(setRightDialogClosed).然后再menthods中将defKeys数组重置为空
弹幕方法：在调用递归函数之前先重置数组，这样每次调用都会清空数组。（我也使用该方法）
9.添加权限然后点击确定，将勾选的权限发送到服务器进行保存。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdJ8Y2s8-1660612410878)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803221737346.png)]
将这些全选和半选中节点的id都给它形成一个字符串，中间用逗号来进行分割，然后传送到服务器中来进行权限的分配
想要获取到全选或者半选中节点的id可以通过组件库中Tree树形控件中提供了两个方法
分别是：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qy85Oqww-1660612410878)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803222539601.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tkEq8oh-1660612410878)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220803222555862.png)]
根据文档，发起post请求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZCLIvAL-1660612410878)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804005943045.png)]
为确定按钮绑定一个单机事件处理函数。allotRights
在函数中，定义一个keys数组拿到所有半选和全选状态下的id。
在el-tree中加一个引用，treeRef，然后通过引用调用上面组件里的两个函数。
两个函数在数组中都要用展开运算符，将两个数组合并为一个新数组。
**弹幕说：**1、组件你可以认为是一个盒子，ref就是你给这个盒子打了一个特殊的标签，然你有了这个标签，你就可以去这个盒子里面拿她的东西。2、要调方法就要有引用Ref
**注意：**组件中里的方法通过ref是直接可以调用的。（自己理解）。
弹幕说：…就是把两个数组合并成一个数组
实现效果：打勾的权限要能打印出来。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMv10UG2-1660612410879)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804091351292.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NizgVpRf-1660612410879)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804091421632.png)]
打印结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sOud7yeR-1660612410879)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804091616215.png)]
拿到id数之后，接下来就是将keys数组变成一个以逗号拼接的字符串。
然后通过post发送请求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWnbXbIw-1660612410879)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804093348667.png)]
现在需要有当前角色的id才能发起当前的请求，
需要在谈出对话框的时候，直接把角色的id先保存到data中。
先在data中定义一个角色id
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKlhwzRA-1660612410880)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804094944034.png)]
然后将角色id保存到data中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cAOBBKo-1660612410880)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220804095500210.png)]
之后在post请求中 ，就可以获取到角色id了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMULVvZa-1660612410880)(https://gitee.com/szyyds01/image-bed/raw/master/picgo/image-20220805171133562.png)]
实现效果:给测试用户分配角色成功。
6.2.7推送代码
然后到上面用户管理->用户列表 完成给用户分配角色的功能
然后提交到rights分支。
1，先git branch查看当前分支
2、然后git add .将发生改变的代码提交到暂存区。
3、git commit -m “完成了权限功能的开发”
注意：现在只是提交在本地分支中
4、git push将本地分支push到云端gitee中去(不需要-u是因为云端已经有了rights分支)
然后将rights代码合并到master主分支中的操作
5、git checkout master切换到本地主分支中
6、git merge rights 将本地主分支master与rights合并（注意，这里是取并集，即master没有，rights有的部分会合并到master，然后master身上有的，rights没有的，不会合并到rights）
7、git push 推送到云端
7、商品管理
7.1商品分类
实现预期：
7.1.1创建商品分类git分支
1、git checkout -b goods_cate 新建本地分支并切换到该分支中
2、git push -u origin goods-cate（如果远程仓库没有这个分支就要添加-u origin xxx，相当于为远端也新建一个xxx的分支，然后将本地同名分支推送上去）
7.1.2 创建商品分类组件
首先想到：<v创建模板 -》然后在行为区域写data，create生命周期函数，和methods定义所有的事件处理函数-》最后style里面加入lang="less" scoped
如图：初始模板
7627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
