Vue登陆功能总结

1、通过v-model指令双向数据绑定登陆表单的数据对象

• 1、定义登陆表单的数据绑定对象loginForm:{username,password}

 loginForm: {
    
    username: 'admin',password: '123456',},

• 2、在form表单中通过动态:model绑定登陆表单的数据对象

  <el-form class="login_form" :model="loginForm">..</<el-form>

• 3、在input输入框中通过v-model指令绑定登陆表单的数据对象的属性（username,password）

<el-input  placeholder="用户名"  v-model="loginForm.username"></el-input>
<el-input  placeholder="密码"  type="password"  v-model="loginForm.password"></el-input>

---

2、通过v-rule指令绑定登陆表单的校验规则

• 1、定义登陆表单的规则对象loginFormRules:{username:[],password:[]}

loginFormRules: {
    
    
      username: [
      {
    
     required: true, message: '请输入用户名称', trigger: 'blur' },
      {
    
     min: 3, max: 10, message: '长度在3-10字符中' },],
      password: [
      {
    
     required: true, message: '请输入密码', trigger: 'blur' },
      {
    
     min: 6, max: 15, message: '长度在6-15字符中' },],
 },

• 2、在form表单中通过动态:rules绑定登陆表单的规则对象loginFormRules

<el-form class="login_form" :model="loginForm" :rules="loginFormRules">..</<el-form>

• 3、在form-item中通过prop属性绑定登陆表单的规则对象的具体属性

<el-form-item prop="username">
<el-input  placeholder="用户名"  v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input  placeholder="密码"  type="password"  v-model="loginForm.password"></el-input>
</el-form-item>

---

3、通过ref获取对象，现通过resetFields()方法重置数据

• 1、在form表单中添加属性(ref="loginFormRef")

 <el-form  :model="loginForm"  :rules="loginFormRules"  ref="loginFormRef">..</el-form>

• 2、定义(resetLoginForm)重置数据函数，通过($refs.loginFormRef)获取对象,再通过resetFields()方法重置数据

resetLoginForm() {
    
    this.$refs.loginFormRef.resetFields()}

• 3、在重置按钮中绑定(resetLoginForm)重置数据方法

 <el-button type="info" @click="resetLoginForm">重置</el-button>

---

4、通过（validate）方法进行数据校验，通过$http.post()发出登陆请求，通过sessionStorage.setItem()方法设置token,保持登陆状态

• 1、通过($refs.loginFormRef)获取对象,再通过validate()方法进行数据校验
• 2、通过$http.post()请求向api发出登陆请求，获取{data:res}结果
• 3、判断{res.meta.status}结果是否为200，是的话就发出$message.success()成功消息，不是200的话就发出$message.error()失败消息
• 4、通过window.sessionStorage.setItem('token', res.data.token)，设置token
• 5、最后通过this.$router.push('/home')跳转到主页面
• 6、在登陆按钮中通过@click绑定login()登陆方法

login() {
    
    
      this.$refs.loginFormRef.validate(async (valid) => {
    
    
        if (!valid) return
        // 向api服务器发出登陆请求
        const {
    
     data: res } = await this.$http.post('login', this.loginForm)
        // 判断结果状态，是否登陆成功，弹出弹框
        if (res.meta.status !== 200) return this.$message.error('登陆失败！')
        this.$message.success('登陆成功！')
        // 1、将登陆成功之后的token，保存到客户端的sessionStorage中,进行身份验证
        window.sessionStorage.setItem('token', res.data.token)
        // 2、通过编程式导航跳转到后台主页，路由地址为/home
        this.$router.push('/home')
      })
    }

<el-button type="primary" @click="login">登陆</el-button>

---

5、Vue登陆功能详情：

https://blog.csdn.net/weixin_45065754/article/details/123433168

---

6、 项目学习视频来源（B站）：

【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】，大家可以看着视频做噢，里面写讲得非常详细，就这样啦~