Vue.js を使用して構成可能なログイン フォームを作成する

今回は、Vue.js を使用して構成可能なログイン フォームを作成する方法についていくつかの notes を紹介します。いくつかの実践的なケースを見てみましょう。

ビジネスシナリオ

以前は、プロジェクトは携帯電話番号 + パスワードログインのみをサポートしており、フロントエンドがフォームを直接記述していましたが、その後、認証コード ログインのサポートを希望する顧客もいました。顧客も携帯電話番号 + 確認コード + パスワードのログイン方法を希望していました。そのため、ログイン方法の柔軟性には構成可能なフォームのサポートが必要であるため、ログイン コンポーネントを分割しました。

フォーム要素を粒度として、携帯電話番号、パスワード、SMS 認証コードのコンポーネントが分離されており、それぞれの組み合わせ、ログイン、登録、および取得によって独自の フォーム認証 メソッドを使用できます。パスワードなどをすぐに入力できます。フォームコンポーネント。高結合性と低結合性、高結合性と低結合性...これを 10 回繰り返します~

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

ここでは、親コンポーネントとしてログインを使用し、サーバーから返されたログイン構成を読み取り、テンプレートで条件付きレンダリングを実行し、フォーム検証にログインするときにサブコンポーネントの内部関数を取得し、最後に Vuex を介してデータ呼び出しインターフェイスを取得します。構成可能なログイン フォーム全体のロジックは Jiangzi であり、コードは次のとおりです。

コード

リクエストサーバー構成データ:

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

ログインコンポーネントのコアレンダリングコード(pug):

.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") 登录

ログインするには3つのステップが必要です:フォーム検証、データの組み立て、インターフェイスの呼び出し:

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

ログインフォーム検証は実際には、現在のログイン メソッド内のすべてのコンポーネントの validate() メソッドに対する論理的な判断です:

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
}

各サブコンポーネントは完全な形式であり、検証もそれ自体で完了します パスワード コンポーネント テンプレート:

.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。 : フォームに単一行のテキスト入力フィールドが 1 つだけある場合、ユーザー エージェントはフォーム送信リクエストとしてそのフィールドへの Enter を受け入れる必要があります。

W3C 標準によれば、フィールドが 1 つしかない場合は、フォーム要素の入力ボックスで、この入力ボックスで Enter キーを押すと、フォームが自動的に送信されます。このデフォルトの動作は、@submit.native.prevent を に追加することで防止できます。

パスワードコンポーネントのフォーム検証:

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

最後にVuexからすべてのフォームデータを取得して組み立てます:

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
 }
}

補足:

全選択と全選択解除のvue.jsサンプルコード

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
      }
    }
  }
})

Iこの記事の事例を読んだ後は、この方法を習得したと考えてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.jsフォームコントロールの使い方

jsを使ってフロントエンドとバックエンドのJson送信を実現する方法

以上がVue.js を使用して構成可能なログイン フォームを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。