Vue登录验证

用户登录

白话总结（可跳过）

使用axios post("login",this.loginFrom)

使用组件的验证方法，是否通过roules规则

如果返回值为真则登录成功，将返回的token存储到sessionStorage中，

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

控制路由器跳转到首页

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

01.业务梳理：

 

为el-form添加model="from"实现数据绑定

el-from-item使用v-model:"from.name"

自定义对象属性：loginFrom:{name:"",passworld:""}

01.表单校验：

trigger:鼠标失去焦点

 

 

02.表单重制：

通过ref可以获得表单的实例对象

03.登录数据请求：

（1）配置axios

main.js

import axios from 'axios'

axios.defaults.baseURL="http://...."

Vue.prototype.$http=axios

为了简化请求数据操作，使用async await修饰成异步的函数就可以直接获取服务器函数

（2）配置登录成功弹框

plugms->element-ui

 

 

message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。

(3)配置路由

router.js(src根目录)