ホームページ > 記事 > ウェブフロントエンド > 構成可能なログインフォームコードの Vue.js 実装の詳細な説明
この記事では主に、設定可能なログインフォームを実装するための Vue.js の詳細なサンプルコードを紹介します。また、必要な友達はそれを参照することができます。背景 プロジェクト業務でよく使われるコンポーネントですが、今回は設定可能なログイン方法のニーズを満たすためにログイン機能を再構築しましたので、ここに記録して共有します。
ビジネスシナリオ 以前は、プロジェクトは携帯電話番号 + パスワードのログインのみをサポートしており、フロントエンドがフォームを直接記述していました。その後、一部の顧客は確認コード ログインのサポートを希望しました。携帯電話番号 + 認証コード + パスワードのログイン方法が必要です... したがって、ログイン方法の柔軟性には構成可能なフォームのサポートが必要であるため、ログインコンポーネントを分割しました。
フォーム要素を粒度として、携帯電話番号、パスワード、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 を 7d427e22129094dbbdee82a7e6c7d93a に追加することで防止できます。
パスワードコンポーネントのフォーム検証:
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 } } } })
上記は私が皆さんのためにまとめたものであり、将来皆さんのお役に立てば幸いです。
関連記事:
キャッシュアルゴリズムのJS実装例react-nativeパッケージングプラグインswiperの使い方vueプロジェクトでsassを使うための設定方法以上が構成可能なログインフォームコードの Vue.js 実装の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。