Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Schritte zur Implementierung eines konfigurierbaren Anmeldeformulars mit Vue.js

Detaillierte Erläuterung der Schritte zur Implementierung eines konfigurierbaren Anmeldeformulars mit Vue.js

php中世界最好的语言
Freigeben: 2018-05-08 11:21:03
Original
1754 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Implementierung eines konfigurierbaren Anmeldeformulars in Vue.js ausführlich erläutern. Welche Vorsichtsmaßnahmen für die Implementierung eines konfigurierbaren Anmeldeformulars in Vue.js gelten Fälle, werfen wir einen Blick darauf.

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 Bestätigungscode unterstützen. Einige Kunden hoffen auch auf eine Anmeldemethode mit Mobiltelefonnummer + Bestätigungscode + Passwort ... Die Methode erfordert konfigurierbare Formularunterstützung, daher 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üfung Methoden, durch Kombination können Sie die Anmeldung, Registrierung, Passwortabfrage usw. schnell abschließen. Formularkomponenten. 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
Nach dem Login kopieren

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'
}
Nach dem Login kopieren

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") 登录
Nach dem Login kopieren

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)
 ...
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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"
   )
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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
 }
}
Nach dem Login kopieren

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
      }
    }
  }
})
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Schritte für Vue zum Konvertieren von HTML-Strings in HTML

Detaillierte Erklärung von Koa2 Datei-Upload- und Download-Fälle

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung eines konfigurierbaren Anmeldeformulars mit Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage