Vue实战（电商管理系统）学习（二）

记录下学习过程以及踩到的坑，Vue实战，学习视频取自https://www.bilibili.com/video/BV1EE411B7SU?p=1
这一篇的是从P18-P29的学习，老样子，具体详情步骤的话看视频就行，我只说说看大概要干啥还有我遇到的坑。

登录/退出

登录验证

login () {

this.$refs.loginFormRef.validate(valid => {

​ if (!valid) return

})

}
这一句话可能会报错，error Unnecessary return statement no-useless-return，这个错误的话是因为ESlint插件导致return有误，解决方法就在return后面加上false就行
如： if (!valid) return false

登录成功/失败提示框

写法一：

if (res.meta.status !== 200) return this.$message.error(‘登录失败’)

​ this.$message.success(‘登录成功’)

写法二：

if (res.meta.status !== 200) {

​ this.$message({

​ showClose: true,

​ message: ‘登录失败’,

​ type: ‘error’

​ })

​ } else {

​ this.$message({

​ showClose: true,

​ message: ‘登录成功’,

​ type: ‘success’

​ })

​ }

写法一是没有showClose字段（手动关闭）的简写方式吧，写法二就是完整的写法，当然可不可以在有showClose字段的同时还简写的写法我也不清楚，如果有的话求大佬教教我。

但需要注意的是，登录成功之后获取token值保存到客户端的sessionStorage中的操作，在写法一之后接在下面即可，相当于跟在登录成功之后的操作，不会在登录失败的时候生效；如果是写法二时，就需要特别把保存操作写在else{}中。不过没啥影响，也就是登录失败获取不到token值报个错而已。

路由导航守卫控制访问权限

// 挂载路由导航守卫

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()

})

如果尝试URL跳转到home还能成功的话，那不如试试把之前保存的token给删除掉？

退出

写好按钮建好方法时

methods: {

logout () {

//销毁sessionStorage

window.sessionStorage.clear()

//跳转

this.$router.push(’/login’)

}

}

语法处理

//VSCCode ES6语法检测配置

“eslint.validate”: [

​ “javascript”,

​ “javascriptreact”,

​ {

​ “language”: “html”,

​ “autoFix”: true

​ },

​ {

​ “language”: “vue”,

​ “autoFix”: true

​ }

],

“eslint.autoFixOnSave”: true,

“explorer.confirmDragAndDrop”: false,

“editor.detectIndentation”: false,

“editor.tabSize”: 2,

//

“editor.codeActionsOnSave”: {

“source.fixAll.eslint”: true

}
不过这是我在网上找配置方法时找来的放上去的，其实我也不太明白这个语法配置，至少没出啥问题，不过应该有更好的写法，希望有大佬给我一个更好的写法

至于在.eslintrc.js中修改语法添加’space-before-function-paren’:0，这个就是看个人喜好了，虽然我每次打代码很少顺手打空格，但没有空格的话我看着很难受，有个自动帮我打空格的东西我挺舒服的。

上传码云

这是一个很重要的部分，这一块地方可能会出问题,可能是因为我刚用git的缘故，我当时可能是误操作了总之把gitee仓库的代码拉了过来，导致我新写的代码全无了，然后我好好了学了下git操作，来梳理一下。参考文档：https://blog.csdn.net/Rainbow_sbb/article/details/118652579