<template>
<div class="login-bg login-container"><el-formref = "loginForm":model="loginForm":rules="loginRules"class="login-form"label-position="left">//登录页面html的内容<div class="title-container"><h3 class="title">Cms-Manager内容管理系统</h3></div>// 表单阈<el-form-item prop="username"><el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username"/></el-form-item><el-form-item prop="password"><el-input :key="password" ref="password" v-model="loginForm.password" :type="password" placeholder="密码" name="password"/></el-form-item><el-button:loading="loading"type="primary"style="width:100%;margin-botton:30px"@click="handleLogin">登录</el-button></el-form>
</div>
</template>
<script>import {login} from '@/api/activity'
export default {name:'Login',data() {const validateUsername = (rules,value,callback) => {if(!value) {callback(new Error('请输入用户名'))} else {callback()}},const validatePassword= (rules,value,callback) => {if(value.length < 6) {callback(new Error('请输入密码'))} else {callback()}},return {loginForm: {username:'',password:''}},loginRules: {username:[{required:true,trigger:'blur',validator:validateUsername}],password:[{required:true,trigger:'blur',validator:validatePassword}],},loading:false},method: {handleLogin() {this.$ref.loginForm.validate(valid=> {if (valid) {this.loading = true,this.login(this.loginForm).then(res => {this.loading = false,localStorage.setItem('token',res.data.token),localStorage.setItem('username',res.data.username),this.$router.replace('/home')}).catch(() => {this.loading = false,}) } else {return false}})}}}
</script>

添加loading
实现思路
validateUsername 用户名校验的实现思路，

1. 接收rules,value,callback，如果value不存在，直接callback，传入error提示，里面接收的是字符串，不是对象，请输入用户名。否则，callback
   validatePassword：
2. 判断值的长度，小于6，callback newError提示请输入密码；否则，callback

登录的实现逻辑：
拿到用户名和密码，确认是注册的用户后，根据规则返回token，token信息缓存再浏览器中，并且调用后端接口后，将token作为header部分传给后端，后端拿到以后对token进行验证，如果token合法，允许用户继续访问，如果不合法，给错误的提示。

handleLogin()实现流程：

1. 通过ref拿到表单的实例，调用表单的validate，接收的函数为当前校验的对象，如果对象存在，说名校验正常，如果正常， 1. 设置loading，2. 调用login接口,表单为参数，通过.then拿到数据
2. 拿到数据后，把loading关闭，用localStorage设置token，
3. localStorage保存用户名，从接口中的username获取
4. 登录成功后进行跳转，用replace
5. 容错，.catch，设置了箭头函数，把loading关闭

import {login} from ‘@/api/activity’

错误：
token的获取方式 res.data.token
.catch对应的是.then，里面加的是箭头函数，而不是单独的函数
跳转的页面是/home,不是/decorate