有token放行(window.sessionStorage.getItem(\'key\'))来获取是否有token
无token强制回到login
3.11 退出清除token绑定退出方法window.sessionStorage.removeItem(\'key\')
然后再进行$router.push
3.12 提交代码至码云在login上提交
切换成master并合并login git merge login
push到云代码的master
切换回login使用git push -u origin login (实现上传分支)
四. 格式化配置问题alt+shift+f格式化出来的的东西与eslint不匹配, 发出警告
4.1 配置prettierrc来改变编译软件的格式化工具{ // 结束后面加分号 "semi": false, // 单引号 "singleQuote": true }
4.2 配置editorcongi改变eslint的检查规则在rules中添加\'space-before-function-paren\': 0可以改变方法函数名离后面括号之间要加空格的机制
五. 设置主页头部与侧边栏 5.1 实现基本的页面布局elementUI主件库按模板添加需要用到的组件
标签名如el-header会自动添加上class为class="el-header"所以可以直接使用标签名作为类名
5.2 运用flex布局完成header的实现justify-content 教程链接
flex-start: 同行左侧对齐
flex-end: 同行右侧对齐
flex-center: 同行中间对齐, 相邻没有间隙, 未填满会在两侧补充空格
space-between: 平均分配在一行中, 左右两边贴边
space-around: 平均分配在一行中, 左右两边没贴边
initial: 默认值
inherit: 从父元素继承该属性。
5.3 axios拦截器为了演示用以后的API(验证是否含有token)
axios.interceptors.request.use(config => { // 为请求头对象, 天机Token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem(\'token\') return config }) 5.4 获取左侧菜单数据 5.5 通过for循环填写左侧菜单栏index属性是elementUI的一个代表菜单栏的唯一值, 相同的话点击一个会使index相同的菜单都发生点击事件
index可以设置router的跳转
添加字体颜色并且添加字体图标
字体图标可以另外设置一个data然后每个id对应着他的class(第三方字体图标库)
给menu添加unique-opened属性可使点击一个扩展开来的时候其他的都关上
边框不齐问题
el-menu中设置border属性为none可以解决
5.6 侧边栏的折叠与展开添加|||来设置是否触发
collapse: 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）设置为true
之后发生的问题
宽度固定在200px很丑
用v-bind动态修改width(根据sollapse是否为true)
动画效果不好看
collapse-transition设置为false
5.7 实现首页路由的重定向效果 { path: \'/home\', component: Home, redirect: \'/welcome\', children: [{ path: \'/welcome\', component: Welcome }] }在el-main中放路由占位符router-view
5.8 侧边栏路由链接的改造给menu设置router为true
这样之后点击侧边栏的时候会直接跳转到该项的index(前面把它设置为id)
把它设置为path就可以了
不要忘记前面加\'/\'
5.9 点击user没有高亮显示给menu增加default-active
并用sessionStorage来记录当前的path
六. 用户列表 6.1 栅格系统+面包屑+卡片可以在base.css中修改基础样式
el-row与el-col
通过:gutter给el-col设置间隙
通过:span给el-col设定宽度(例如flex 总宽24 )
6.2 获取用户列表/users
在data () {}中设定一个param(整合到url上面的数据)
获取成功保存
6.3 绘制用户列表使用table tablie-colum
table的data为依照的数据
label为每列名称
prop为对应value的key
添加索引列
table-colum中加入type="index"
渲染状态与操作(按需渲染)
使用v-slot 此时会覆盖prop所指向的值
放三个按钮注意能不能再一行上面显示
加入鼠标移到上面时会出提示框
分页效果显示
每次调整每页显示数量重新发送请求
6.4 用户状态修改接口中:id的意思是该值需要更改传递
@change事件
修改失败(status不为200)应该把原来的值改回去
6.5 搜索用户通过修改table的获取用户列表的params数据的query还有点击事件更新用户列表的数据来实现
6.6 清空搜索框与清空后重新获取用户数据增加clearable属性实现添加一件清空功能
绑定@clear对应的事件(一件清空后触发)
6.7 添加用户功能增加dialog组件
定义:visible.sync="addDialogVisible"属性 增加时间修改addDialogVisible即可
添加信息表单
邮箱与手机号等特殊校验规则