vue-shop项目第二天
1.实现路由导航守卫功能。
router.beforeEach((to, from, next) => {
// to 将要访问的路径 from 代表从哪个路径跳转而来 next 是一个函数,//表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()})
2.实现退出功能: 清除掉本地的session,然后编程式跳转到登录页面。
window.sessionStorage.clear()
3.eslint格式问题,可以再项目根路径下创建.prettierrc后缀的文件,来进行对格式化代码(shift + alt + f)操作的配置
{
"semi": false,
"singleQuote": true
}
在eslint.js中做以下修改(表示禁用这个与法规则)
'space-before-function-paren': 0
4。element.js中引入插件代码的简化。
5.vscode中 ctrl + ` 可以打开终端。
6.推送子分支到云端仓库:(第一次推送子分支到云端)
$git checkout login
$git push -u origin login
三。主页布局的开发
1.导入需要的element组件,再element-ui找到合适的页面布局。再进行调整,组件中的标签名,即为它的类名。
2.利用flex布局完成header部分的开发。
3.l利用element组件完成侧边栏 组件的开发(NavMenu)组件。
4.利用axios拦截器拦截向后端发起的请求,并为他添加上后端规定的字段,为了避免前端没有权限而获得后端的数据,以此来保证数据的安全。
axios.interceptors.request.use(config => {
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
5.获取左侧菜单数据:[1.4.2. 左侧菜单权限]
1.在行为区域利用created生命周期函数调用方法,方法向后端发送请求
if (res.meta.status != 200) return this.$message.error(res.meta.msg)
this.menulist = res.data
循环得到的数据把菜单渲染完成。添加图标,利用对象的结构(类似于哈希树)
2.完成侧边栏菜单上的收起功能,在菜单组件中提供了凡方法。
3.完善页面的主体功能,在主体区域放置占位符,再再home路由的下面注册子路由规则。之后需要书写子组件的内容
4.左侧菜单栏为一级菜单添加属性NavMenu组件中的router属性,该属性根据耳机菜单的index属性的值作为path的路径进行跳转。
5.完成左侧用户列表组件:问题1:切换xing二级菜单的高亮效果,先添加NavMenu组件中的属性添加到mnu标签上,再把每次点击的值存储到浏览器中。
6.users组件中完成面包屑导航,卡片视图。
。。。。。。写数学作业去喽“ 。”