Detaillierte Erläuterung der Vue.js-Implementierung des konfigurierbaren Anmeldeformularcodes

In diesem Artikel wird hauptsächlich der detaillierte Beispielcode von Vue.js zur Implementierung des konfigurierbaren Anmeldeformulars vorgestellt. Der Artikel stellt auch den Beispielcode von vue.js zum Auswählen und Abwählen aller vor. Freunde, die ihn benötigen, können darauf verweisen.

Formular ist eine häufige Komponente im Backend-Projektgeschäft. Diesmal wurde die Anmeldefunktion umgestaltet, um den Anforderungen konfigurierbarer Anmeldemethoden gerecht zu werden.

Geschäftsszenario

In der Vergangenheit unterstützte das Projekt nur die Anmeldung mit Mobiltelefonnummer + Passwort, und das Formular wurde direkt darauf geschrieben Frontend. Später gab es Kunden, von denen ich hoffe, dass sie die Anmeldung mit dem Bestätigungscode unterstützen. Einige Kunden hoffen auch, eine Anmeldemethode mit Mobiltelefonnummer + Bestätigungscode + Passwort zu haben ... Daher erfordert die Flexibilität der Anmeldemethode eine konfigurierbare Formularunterstützung. Deshalb habe ich die Anmeldekomponente aufgeteilt.

Unter Verwendung des Formularelements als Granularität werden die Komponenten Mobiltelefonnummer, Passwort und SMS-Bestätigungscode getrennt. Jede davon verfügt über eine eigene Formularüberprüfungsmethode kombinierbar. Schnell ausfüllende Formularkomponenten wie Login, Registrierung und Passwortabfrage. Hohe Kohäsion und geringe Kopplung, hohe Kohäsion und geringe Kopplung ... wiederholen Sie es zehnmal ~

.
├ common
├ captcha.vue
|  ├ password.vue
|  └ phone.vue
├ login
|  └ index.vue
├ register
|  └ index.vue
└ resetPassword
  └ index.vue

Hier verwenden wir Login als übergeordnete Komponente, lesen die vom Server zurückgegebene Login-Konfiguration und führen ein bedingtes Rendering in der Vorlage durch Rufen Sie es beim Anmelden auf Formularüberprüfung innerhalb der Unterkomponente und erhalten Sie schließlich die Datenaufrufschnittstelle über Vuex. Die Logik des gesamten konfigurierbaren Anmeldeformulars ist Jiangzi, und der Code folgt als nächstes.

Code

Serverkonfigurationsdaten anfordern:

/* 参数说明：
 * 'password': 密码登录 
 * 'captcha': 短信验证码登录
 * 'password_or_captcha': 密码或短信登录 
 * 'password_with_captcha': 密码+短信登录
 */
config: {
 login_methods: 'password'
}

Kern-Rendering-Code (pug) der Anmeldekomponente:

.login-card
 .login-header
   h3 登录
 .login-content
  phone(ref="phone")
  password(
   v-if="isPasswordMode"
   ref="password"
  )
  captcha(
   v-if="isCaptchaMode"
   ref="captcha"
  )  
  template(v-if="isPasswordWithCaptchaMode")
   captcha(ref="captcha")
   password(ref="password")
  
  template(v-if="isPasswordOrCaptchaMode")
   ...
  el-button(@click="login") 登录

Login Drei Schritte sind erforderlich: Formularüberprüfung, Datenassemblierung und Schnittstellenaufruf:

async login () {
 if (!this.validate()) return
 const loginData = this.getLoginData()
 await this.postLogin(loginData)
 ...
}

Die Überprüfung des Anmeldeformulars ist eigentlich eine logische Beurteilung der Methode „validate()“ aller Komponenten in der aktuellen Anmeldemethode:

validate () {
 const phone = this.$refs.phone.validate()
 let isPass = false
  
 if (this.isPasswordMode) {
  if (this.$refs.password) isPass = this.$refs.password.validate()
 }
  
 if (this.isCaptchaMode) {
  if (this.$refs.captcha) isPass = this.$refs.captcha.validate()
 }
  
 if (this.isPasswordWithCaptchaMode) ...
  
 if (this.isPasswordOrCaptchaMode) ...
  
 isPass = phone && isPass
 return isPass
}

Jede Unterkomponente ist ein vollständiges Formular, und die Überprüfung wird auch einzeln durchgeführt. Vorlage für Passwortkomponente:

.login-password
 el-form(
  :model="form"
  :rules="rules"
  ref="form"
  @submit.native.prevent=""
 )
  el-form-item(prop="password")
   el-input(
    v-model="form.password"
    type="password"
    name="password"
   )

W3C: Wenn ein Formular nur ein einzeiliges Texteingabefeld enthält, sollte der Benutzeragent dies tun Akzeptieren Sie die Eingabetaste in diesem Feld als Aufforderung zum Absenden des Formulars.

Es ist zu beachten, dass gemäß W3C-Standards, wenn in einem Formularelement nur ein Eingabefeld vorhanden ist, das Drücken der Eingabetaste im Eingabefeld automatisch gesendet wird das Formular. Dieses Standardverhalten kann verhindert werden, indem @submit.native.prevent zu hinzugefügt wird.

Formularüberprüfung der Passwortkomponente:

validate () {
 let res = false
 this.$refs.form.validate((valid) => {
  res = valid
 })
 return res
}

Holen Sie sich schließlich alle Formulardaten von Vuex und stellen Sie sie zusammen:

computed: {
 ...mapState('login', {
  phone: state => state.phone,
  password: state => state.password,
  captcha: state => state.captcha
 }), 
},
methods: {
 ... 
 getLoginData () {
  let mode = ''
  const phone = this.phone
  ...
  const data = { phone }
  
  if (this.isPasswordMode) {
   mode = 'password'
   data.password = password
  }
  if (this.isCaptchaMode) {
   mode = 'captcha'
   data.captcha = captcha
  } 
  if (this.isPasswordWithCaptchaMode) ...  
  if (this.isPasswordOrCaptchaMode) ...  
  data.mode = mode
  return data
 }
}

Ergänzung:

vue.js Beispielcode zum Auswählen und Abwählen aller

new Vue({
  el: '#app',
  data: {
    checked: false,
    checkedNames: [],
    checkedArr: ["Runoob", "Taobao", "Google"]
  },
  methods: {
    changeAllChecked: function() {
      if (this.checked) {
        this.checkedNames = this.checkedArr
      } else {
        this.checkedNames = []
      }
    }
  },
  watch: {
    "checkedNames": function() {
      if (this.checkedNames.length == this.checkedArr.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
})

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiel für die JS-Implementierung des Caching-Algorithmus

So verwenden Sie den Swiper des React-Native-Packaging-Plug-Ins

Konfigurationsmethode zur Verwendung von Sass im Vue-Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue.js-Implementierung des konfigurierbaren Anmeldeformularcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!