VueCli案例项目(从零到登录功能完成)

1. 项目初始化

• 在vue ui中创建项目并配置element-ui和在依赖中添加axios库
• 使用码云并配置ssh公钥，添加并测试，官网步骤
• 创建仓库并使用git上传项目

• git add .
• git commit -m "add files"
• 链接仓库git remote add origin https://gitee.com/enoshima7/vueshop.git
• 上传到仓库git push -u origin master

• 后台API等配置

2.登录/退出功能

2.1 相关技术点

• http是无状态的

• 三种方法记录登录状态，如果存在跨域问题就使用token方式维持状态，另外两种是

• cookie在客户端记录状态，或者通过sesion在服务器端记录状态

2.2 token的原理分析

• 客户端在页面登录，服务器验证后生成这个用户的token，客户端存了这个token之后的所有请求都带这个

• token，服务器之后收到请求会验证这个
• token看你是否是在登陆状态

  

2.3 登录功能实现

• 创建登录login分支git checkout -b login
• git branch可查看项目所有分支
• 删除其他的组件
• 创建Login.vue组件
• 在router里面导入login并配置路由匹配规则

import Login from '../components/Login.vue'
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }

• 在app.vue中加入路由占位符

2.4 登录页面实现

• element-ui的使用

• element-ui表单的使用

• 表单中图标的使用，可用第三方

• :model v-model的使用

• 表单验证rules属性

• 给form添加绑定rules规则对象:rules="rules"
• 在data里添加rules对象
• 里面放规则数组

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

• 重置表单功能

• 给表单加ref属性，可以通过这个ref拿到表单实例对象
• 给重置按钮绑定click方法，用this.$refs.上面的属性值.resetFields()可以实现重置

• 登陆前验证

• 给登录按钮绑定click
• 使用this.$refs.loginRef.validate()方法验证，这个方法里面传递回调函数，第一个参数为Boolean值

this.$refs.loginRef.validate(vali => {
        console.log(vali)
      })

• 登录功能(还不太懂)

• 建立后台，打开phpstudy打开mysql，在serverapi文件夹运行node ./app.js
• if valid成功 就发起post请求，使用async和await简化promise操作
• 用解构赋值将data转为res

login: function () {
      this.$refs.loginRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return console.log('登陆失败')
        console.log('登陆成功')
      })
    }

• 登录成功失败弹窗

• 在element.js中引入message插件，并需要将其挂载为Vue原型的一个属性，使用Vue.prototype.$message = Message
• 使用this.$message.success('')或this.$message.error('')弹窗

if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')

• 登录成功

• 用sessionStorage保存token(还不太明白)

window.sessionStorage.setItem('token', res.data.token)

• 用编程式路由跳转到主页组件

this.$router.push('/home')

• 路由导航守卫

• 实现必须登录了才能进home页面
• 在router的js中将路由实例的beforeEach方法写一下
• beforeEach()接受一个回调函数，参数为to,from,next 如果to.path是login就直接next，如果不是就检查是不是有token，没有的话就next去home

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenstr = window.sessionStorage.getItem('token')
  if (!tokenstr) {
    return next('/home')
  }
  next()
})

• 退出功能

• 点击退出按钮清空sessionStorage并编程式路由到login界面

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