+ 技术点
- http是无状态的，保持登录状态使用两种方法
- cookie session 如果不存在跨域，推荐使用这种方法
- token 如果存在跨域问题 推荐使用这种方法
- 页面进行登录，然后服务器验证通过之后会生成该用户的token并返回
- 客户端储存token，后续所有请求都携带token
- 服务器根据token验证是否通过，返回不同的数据
1. 创建login组件，配置路由,重定向到login
2. 创建全局样式表，main中导入
3. element-ui绘制页面
4. 绑定表单数据
5. 表单验证
1. 绑定 :rules
2. 给item 添加 props
6. 重置表单
1. ref拿到表单元素，然后调用重置的方法。
7. 表单的预校验
1. 配置axios
2. 调用方法，传入一个回调函数，在函数内进行判断并发送请求
3. await 只能用在async的函数中
4. 解构，值需要data数据就可
8. 弹框提示
1. 注意：弹框不需要 Vue.use 不然会一加载就弹框
9. 登录后的行为
1. 将成功后的token，保存到session中
1. 其他api接口必须在登录后才能访问，所以需要导航守卫
2. token只应该在当前网站生效，localstorage 是持久化存储机制 session 是会话期间存储机制，所以存在session中
2. 跳转
10. 导航守卫
1. router.beforeEach((去哪，从哪来，放行的函数next)=>{]})
2. 如果是去login页，直接放行
3. 如果是去别的页面，就调一下token，如果没有token，返回到登录页
1. 销毁token
2. 跳转到login页面
1. 这里渲染后，会出现点击一个菜单，所有菜单全部展开,解决办法就是 给菜单绑定唯一的index
2. 给每一项渲染图标时，先定义一个对象，然后通过 :class 动态的根据id绑定不同的图标
3. 通过属性，使菜单只展开一个
4. 通过改变collapse的布尔值，实现折叠菜单。然后关闭动画
5. 根据iscollapse 三元表达式 修改侧边栏的width
6. 修改为路由模式 使用router 跳转是根据index来的,所以讲本来的subitem.id修改为path，然后拼接上一个竖线
7. 当前点击项高亮
1. 使用default-active属性 动态绑定index
2. 把index的值存到session中
3. 取值
4. 点击事件时，给activepath赋值
1. 登录后，重定向到welcome组件，welcome作为home的子路由
2. 用户列表区域
1. 创建组件，配置路由，home的子路由
2. 面包屑导航，card
3. 获取数据并渲染 table渲染
4. 作用域插槽，结合开关 渲染状态列
5. 作用域插槽，渲染操作列
6. 通过监听两个事件，获取新的数值，重新大气请求，改变每页的渲染数量和分页功能
7. 调用开关的change事件，吧修改的数据修改并提交到服务器
8. 搜索功能
1. 给输入框双向绑定query，然后发起请求
2. 使用clear，当输入框清空时，发起请求。
9. 添加
1. dialog 实现修改的对话框
2. 创建表单并验证，邮箱和手机号使用自定义验证规则
3. reset 重置表单
4. 预验证以及添加功能
1. 确定按钮 绑定一个函数，使用validate 判断valid 然后发起请求
10. 修改
1. dialog对话框
2. 根据id查找用户信息并保存到数组中
3. 表单与数组进行双向绑定
4. 提交表单，关闭对话框
11. 删除
1. 点击按钮先提示用户，避免误删
2. 然后根据确定和取消按钮返回的不同的值，进行判断
3. 根据id删除用户信息，并重新请求列表
12. 分配角色
1. dialog
2. 绑定事件，获取所有的角色信息保存到data，并且把用户信息保存到data
3. select
4. 确定按钮的点击事件，提交
1. 新建组件
2. 配置子路由
3. 请求数据渲染数据
4. 权限数据的处理
s 1. 三层循环children
2. 根据id删除权限
5. 分配
1. el-tree
2. 确定按钮添加点击事件，然后通过el-tree的函数，吧权限id加入数组
3. 通过点开时触发的函数 保存当前角色id到data，然后拿到当前角色的id
4. 发起请求
1. 获取分类数据，保存到data
2. vue-tree插件 template
3. 分页
4. 添加分类
1. 获取分类列表
2. 级联选择器，当选择器的值发生变化时，把数据存到addform中
1. 父级分类永远是选择的最后一项
2. 等级就是选项数组的长度
5. 删除
6. 编辑
1. 渲染ui界面
2. 获取分类数据
3. 级联选择框
1. 通过判断数组的长度，使用户只能选中第三级的分类
4. tab
5. 根据数组的长度，判断按钮可不可用
6. 获取参数列表
1. 计算属性，拿到三级分类的id值
2. 修改tab的name值。
3. 发起请求
4. 判断，保存到不同的数组
7. 渲染
8. 添加参数按钮
1. 计算属性动态改变标题
9. 修改按钮
10. 删除按钮
11. 渲染tag
12. 添加tag
1. 使用组件
2. 获取数据的时候，循环数据，添加两个值
3. 通过这两个值来实现切换和内容的提交
4. 失去焦点时，不合法的值 删除，合法的 push进arr_vals。然后发请求提交
13. 删除tag
1. 导航
2. 表格 获取数据 渲染
3. 分页
4. 搜索
1. v-model绑定，然后点击事件绑定请求数据的函数
2. 清空 clear绑定请求数据的函数
5. 添加商品 点击前往添加界面
6. 使用tab和进度条
1. 两者进度保持一致，统一绑定一个值
2. active需要的是数字而不是字符串，所以进行-0操作，转换为一个字符串
7. 级联选择框
8. before-leave事件。判断标签页切换
9. 请求商品详情的数据，然后绑定到对话框
10. 图片上传
1. 组件
2. 绑定上传的url
3. 绑定请求头
4. 监听成功的事件
11. 富文本
12. 深拷贝，然后对动态数据和动态属性进行处理
13. 提交
1. 发送请求
2. 渲染
3. 时间线组件
4. 获取数据渲染