rendus

1. partie du modèle

<div>
    <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
      <h3 class="login_title">系统登录</h3>

        <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
        </el-form-item>


    </el-form>
  </div>

2. partie stylisée

Ici j'utilise moins pour écrire,

Besoin de télécharger de moins en moins de chargeur

<style lang="less" scoped>
.login-container {
  width: 400px;
  border:1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background-color: #ffffff;
  box-sizing: border-box;
  .login_title {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }
  .el-input {
    width: 198px;
  }
  .login_button {
    margin-left: 105px;
    margin-top: 10px;
  }
  .login_register {
    width: 70px;
    height: 40px;
    text-align: center;
    margin-top: 10px;
  }
}

3. partie vue

(1) Introduire l'interface axios encapsulée pour faciliter le débogage conjoint ultérieur

import {GetLogin} from "@/Api/api";

Tout le monde est différent ici, c'est juste mon encapsulation

(2) Formulaire

déclencher

méthode de déclenchement

Chaîne

clic/mise au point/survol/manuel

Cliquez sur

requis

S'il n'est pas défini, il sera généré automatiquement selon les règles de vérification

booléen

—

FAUX

se brouiller

Déclenché lorsque l'entrée perd le focus

(événement : événement)

data() {
    return {
      form: {
        userName:'',
        password:'',
      },
      rules: {
        userName: [
          {
            required: true,
            trigger: 'blur',
            message: '长度在6到16个字符',
            min: 6, max: 16,
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入密码',
            min: 6, max: 16,

          }
        ],
      }
    }
  },

(3).Section des méthodes

valider

La méthode pour valider l'ensemble du formulaire, le paramètre est une fonction de rappel. La fonction de rappel sera appelée une fois la vérification terminée et deux paramètres sont passés : si la vérification a réussi et le champ qui a échoué à la vérification. Si aucune fonction de rappel n'est transmise, une promesse sera renvoyée

Fonction(rappel : Fonction(booléen, objet))

methods: {
    //提交方法
    submit() {
        this.$refs.validate((valid) => {
          if (valid) {
            // 封装的接口使用
            GetLogin({
              // 表单的数据
              userName: this.form.userName,
              password: this.form.password,
            }).then(({data}) => {
              // console.log(data)
              if (data.code === 200) {
                //将token存储在本地
                localStorage.setItem('token',data.data.token)
                //若登录成功则跳转到指定路由
                this.$router.push('/')
              } else {
                this.$message.error(data.data.rules.message)
              }
            })
          }
        })
    }
  }

4. Code complet

<template>
  <div>
    <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
      <h3 class="login_title">系统登录</h3>

        <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
        </el-form-item>


    </el-form>
  </div>
</template>

<script>
import {GetLogin} from "@/Api/api";

export default {
  name: "AppLogin",
  data() {
    return {
      form: {
        userName:'',
        password:'',
      },
      rules: {
        userName: [
          {
            required: true,
            trigger: 'blur',
            message: '长度在6到16个字符',
            min: 6, max: 16,
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入密码',
            min: 6, max: 16,

          }
        ],
      }
    }
  },
  methods: {
    //提交方法
    submit() {
        this.$refs.validate((valid) => {
          if (valid) {
            // 封装的接口使用
            GetLogin({
              // 表单的数据
              userName: this.form.userName,
              password: this.form.password,
            }).then(({data}) => {
              // console.log(data)
              if (data.code === 200) {
                //将token存储在本地
                localStorage.setItem('token',data.data.token)
                //若登录成功则跳转到指定路由
                this.$router.push('/')
              } else {
                this.$message.error(data.data.rules.message)
              }
            })
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  width: 400px;
  border:1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background-color: #ffffff;
  box-sizing: border-box;
  .login_title {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }
  .el-input {
    width: 198px;
  }
  .login_button {
    margin-left: 105px;
    margin-top: 10px;
  }
  .login_register {
    width: 70px;
    height: 40px;
    text-align: center;
    margin-top: 10px;
  }
}
</style>

S'il y a des lacunes ou des erreurs, veuillez signaler

[Interface de connexion d'enregistrement Vue2] Vue2 + elementUI écrit une page de connexion, le développement du routage, l'interface de connexion du système de gestion d'arrière-plan