VUE学习笔记02(功能实现的解析)

首先将登录表单中的数据绑定

//登录表单的数据绑定对象
 loginForm: {
        username: "",
        password: "",
      },

在用户名下的<el-input>标签里绑定数据v-model="loginForm.username"
在密码下的<el-input>标签里绑定数据v-model="loginForm.password"

绑定数据后，在输入时对用户名和密码的验证规则

loginFormRules: {
        //验证用户名合法规则
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' },
            ],
        //验证密码合法规则
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '长度大于 6 位', trigger: 'blur' },
        ],

：命名的名字要与绑定的名字一样，使用的是element-ui里的表单校验规则，需要在plugins文件夹下的element.js中引用

import {Button,Form,FormItem,Input} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

在用户名和密码的<el-form-item>标签里分别添加 prop="username"和 prop=“password”

<el-form-item prop="username">
<el-form-item prop="password">

当输入框失去焦点时对用户名和密码进行校验

重置按钮功能实现

在resetLoginFrom(){}中添加函数resetFields(),对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

this.$refs.loginFormRef.resetFields();

表单校验不成功，点击重置后清除样式和数据

登录按钮的功能实现，点击登录按钮后提交验证
登录表单下<el-form>里绑定:rules="loginFormRules"，ref="loginFormRef"
在main.js中导入axios

import axios from 'axios'

让每个组件都能通过$访问到HTTP，发送Ajax请求 ，继续在main.js中添加

Vue.prototype.$http = axios
//由于我没有自己的后台，所以用的某位好兄弟的接口
axios.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/'

当输入正确的用户名和密码时，网页里的会话存储会多出一个token

为了不让别人修改数据就能访问主网页权限，所以表单的提交就需要一个预验证，预验证成功后在执行访问到的数据再进行一次验证
在login(){}里添加

//vaidate(),表单的预验证，接收一个回调函数,布尔值valid形式参数可自定义
          this.$refs.loginFormRef.validate(async valid => {
              if(!valid){return};
              const {data:res} = await this.$http.post('login',this.loginForm);
              console.log(res)
              if(res.meta.status !==200){
                  this.$message.error('登录失败！')
              }else{
                  this.$message.success('登录成功！');
                  window.sessionStorage.setItem('token',res.data.token);
                  //通过编程式导航跳转到后台主页，地址是/home'
                  this.$router.push('/home');
              }
          })

在router文件夹下的index.js中挂载一个路由导航守卫

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')
    }else{
      next()
    }
  
})

没有登录成功时会话储存中不会有token的数据

这时候更改访问地址

网页返回的还是登录界面

输入正确的用户名和密码后返回了token的数据，这时候才能跳转主网页