Vue项目实战笔记（一）

1、登录业务的技术点：

http是无状态的；
通过cookie在客户端记录状态；
通过session在服务器端记录状态；
通过token方式维持状态；

如果不存在跨域问题则使用cookie和session，否则使用token。

2、Vue中使用less：

https://www.cnblogs.com/panpans/p/10021276.html

https://www.cnblogs.com/qdwds/p/11516181.html

3、Vue引入第三方图标库阿里巴巴：iconfont

4、Eslint遇到的一些问题：

https://blog.csdn.net/wron_path/article/details/104655844

导入多个组件写法：

import {Form, FormItem, Input, Button, Select} from 'element-ui'

导入最后不能带；
data()写法，注意空格

 data () {
    return {
      // 这是登录表单的数据绑定
      loginForm: {
        username: '',
        password: ''
      },
      // 表单验证
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  }

使用===代替==

5、axios使用进行网络请求：

注意请求的异步async await

6、登录成功逻辑：

将登录成功的token保存在客户端的sessionStorage中；
项目中除登录外的其他就扣，必须在登录成功之后才能访问；
token只能在当前网站打开期间生效，所以保存在sessionStorage（会话期间的保存）。
通过编程式导航到主页，路由是/home

7、路由导航收尾控制访问权限：

用户未登录，直接通过URL访问特定页面，需要重新导航到登录页。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {path: '/', redirect: '/login'},
    {path: '/login', component: Login},
     {path: '/home', component: Home}
  ]
})

// 挂载路由守卫
router.beforeEach((to, from, next) => {
  if (to.path == '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

8、退出功能：

基于token的方式退出，只要销毁本地的token即可。后续的请求就没有token，必须重新生成新的。

logout () {
  window.sessionStorage.clear()
  this.$router.push('/login')
}

9、处理Eslint警告：

image.png

Shift + Option + F 即可自动格式化。

10、CSS样式权重高的设置：

添加！即可。

.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !;
}