vue-shop项目第二天(用于个人学习的记录)

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组件中完成面包屑导航,卡片视图。

。。。。。。写数学作业去喽“ 。”

上一篇:Linux - awk 文本处理工具六 - 日志关键字筛选


下一篇:php_cz