1. 事前準備1.1 Node.jsをインストールする公式サイトのダウンロードアドレス: https://nodejs.org/zh-cn/ インストールが完了したら、ターミナルで npmのバージョンを確認するには、 1.2 webpackをインストールする端末入力 npm インストール --save-dev webpack バージョンを表示する 1.3 vue-cliをインストールするVueプロジェクトはビジュアルツールvue-cli3以上を使用して作成されるため、ここで選択されるバージョンは3以上です。 npm インストール -g @vue/cli vue-cli のアップグレード npm アップデート -g @vue/cli vue-cli をアンインストールする npm アンインストール vue-cli -g 2. Vueプロジェクトを構築するvue-cliをインストールしたら、vueが提供する視覚化ツールを使用してvueプロジェクトを作成します。 2.1 プロジェクトを作成する ターミナルに プロジェクトを作成するためのパスを選択してください プロジェクトフォルダを作成する デフォルトで手動を選択し、プロジェクトの構成を手動で追加します 機能設定を選択したら、「次へ」をクリックして直接プロジェクトを作成します。 プロジェクトが作成されたら、 2.2 プロジェクトディレクトリ2.3 要素のインポートUIインポート方法はElementUI公式サイトで直接確認できます。ここでは、すべてのモジュールのインポートを選択します。 コンソールに入力 npm をインストールします。 main.js 内の参照 'vue' から Vue をインポートします './App.vue' からアプリをインポートします。 './router' からルーターをインポートします './store' からストアをインポートします Vue.config.productionTip = false /*ElementUI をインポート*/ 'element-ui' から elementUI をインポートします。 /*ElementUIのCSSスタイルをインポート*/ 'element-ui/lib/theme-chalk/index.css' をインポートします。 /*Vue は ElementUI を使用します*/ Vue.use(要素UI); 新しいVue({ ルーター、 店、 レンダリング: h => h(App) }).$mount('#app') 3 ログインページの実装3.1 App.vueを変更するここでは、まずグローバル設定を設定し、以前のテンプレートを削除します。 <テンプレート> <div id="アプリ"> <ルータービュー/> </div> </テンプレート> <スタイル> </スタイル> グローバルスタイルを変更する <テンプレート> <div id="アプリ"> <!--ルーティング ページ--> <ルータービュー/> </div> </テンプレート> <スタイル> /*グローバル親クラスの高さ*/ html{ 高さ: 100%; } /*ボディ属性をリセット*/ 体 { パディング: 0; マージン: 0; /*HTMLを継承*/ 高さ: 100%; } /*#アプリの高さも継承する必要があります*/ #アプリ { 高さ: 100%; } /* グローバルリンクラベルから下線を削除します */ { テキスト装飾: なし; } </スタイル> 3.2 Login.vueを作成するビューディレクトリを右クリックして、Loginという名前のvueファイルを作成します。 ElementUI公式サイトでレイアウトコンポーネントを検索し、独自のレイアウトを選択してvueファイルにコピーします。 <テンプレート> <!-- 行の要素 --> <el-row type="flex" class="row-bg" justify="center"> <!--最初の列--> <el-col :span="6"> <div class="grid-content bg-purple"></div> </el-col> <!--2 列目--> <el-col :span="6"> <div class="grid-content bg-purple-light"></div> </el-col> <!--3 列目--> <el-col :span="6"> <div class="grid-content bg-purple"></div> </el-col> </el-row> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 「ログイン」 } </スクリプト> <スタイルスコープ> </スタイル> フォームをコピーします。ここでは検証済みのフォームをコピーします。コピー後、フォームを変更します <テンプレート> <div :xl="6" :lg="7" class="bg-login"> <!--ロゴ--> <el-image :src="require('@/assets/logo.png')" class="logo"/> <!--タイトル--> <el-row type="flex" class="row-bg row-two" justify="center" align="middle"> <el-col :span="6"></el-col> <el-col :span="6"> <!--タイトル--> <h1 class="title">xAdmin 管理システム</h1> </el-col> <el-col :span="6"></el-col> </el-row> <!--フォーム--> <el-row type="flex" class="row-bg card" justify="center" align="bottom"> <el-col :span="7" class="ログインカード"> <!--ログインフォーム--> <el-form :model="ログインフォーム" :rules="ルール" ref="ログインフォーム" label-width="21%" class="ログインフォーム"> <el-form-item label="アカウント" prop="ユーザー名" style="width: 380px"> <el-input v-model="ログインフォーム.ユーザー名"></el-input> </el-form-item> <el-form-item label="パスワード" prop="パスワード" style="幅: 380px"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item label="確認コード" prop="code" style="width: 380px"> <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input> <!-- 検証コード画像 --> <el-image :src="codeImg" class="codeImg"></el-image> </el-form-item> <el-form-item label="パスワードを記憶する" prop="remember"> <el-switch v-model="loginForm.remember"></el-switch> </el-form-item> <el-form-item class="btn-ground"> <el-button type="primary" @click="submitForm('loginForm')">今すぐログイン</el-button> <el-button @click="resetForm('loginForm')">リセット</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: "ログイン", データ() { 戻る { // フォーム情報 loginForm: { //アカウントデータユーザー名: '', // パスワードデータ パスワード: ''、 //検証コードデータコード: '', // パスワードを記憶する remember: false, // 検証コードのキー。フロントエンドとバックエンドが分離されているため、検証コードはバックエンドでセッションに保存できず、vue 状態管理 codeToken に渡されます: '' }, // フォーム検証ルール: { // アカウント検証ルールを設定する username: [ {必須: true、メッセージ: 'アカウントを入力してください'、トリガー: 'blur'}、 {最小: 3、最大: 10、メッセージ: '長さが 3 文字から 10 文字のアカウント'、トリガー: 'blur'} ]、 // パスワード検証ルールを設定する password: [ {必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur'}、 {最小: 6、最大: 15、メッセージ: '6 文字から 15 文字までのパスワード'、トリガー: 'ぼかし'} ]、 // 検証コードの検証ルールを設定するコード: [ {必須: true、メッセージ: '認証コードを入力してください'、トリガー: 'blur'}、 {最小: 5、最大: 5、メッセージ: '長さは 5 文字です'、トリガー: 'blur'} ] }, // 検証コード画像をバインド codeImg: null }; }, メソッド: { // フォームを送信する submitForm(formName) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォーム検証成功アラート('submit') } それ以外 { console.log('送信エラー!!'); false を返します。 } }); }, // フォームをリセットする resetForm(formName) { this.$refs[フォーム名].resetFields(); } }, } </スクリプト> <スタイルスコープ> .codeImg { /*認証コードの画像を右側に浮かせる*/ フロート: 右; /*角丸の境界線を設定する*/ 境界線の半径: 3px; /*幅を設定する*/ 幅: 26%; } .bg-ログイン{ 高さ: 100%; 背景画像: url("../assets/backgroud.jpg"); 背景サイズ: 200%; } .btn-ground { テキスト配置: 中央; } .ロゴ { マージン: 30px; 高さ: 70px; 幅: 70ピクセル; 位置: 固定; } 。タイトル { テキストシャドウ: -3px 3px 1px #5f565e; テキスト配置: 中央; 上マージン: 60%; 色: #41b9a6; フォントサイズ: 40px; } .ログインカード{ 背景色: #ffffff; 不透明度: 0.9; ボックスシャドウ: 0 0 20px #ffffff; 境界線の半径: 10px; パディング: 40px 40px 30px 15px; 幅: 自動; } </スタイル> 3.3 ルートの設定ルーターの下のindex.jsで設定する 'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 '../views/Home.vue' から Home をインポートします。 '../views/Login.vue' からログインをインポートします。 Vue.use(VueRouter) 定数ルート = [ { パス: '/'、 名前: 'ホーム'、 コンポーネント: ホーム }, //ログインページのルーティングを構成する{ パス: '/login', 名前: 'ログイン', コンポーネント: ログイン } ] const ルーター = 新しい VueRouter({ ルート }) デフォルトルーターをエクスポートする 効果画像: 4. ログイン機能を実装する4.1 axiosのインポートvueではページ、つまりviewのみを担当しますが、ログインする場合はバックグラウンドで検証する必要があるため、vueでは通信はaxiosによって処理されます。 コンソール端末に入力 npm インストール axios --save Enter キーを押すとモジュールが自動的にインポートされます。 main.jsに登録する /*axios をインポート*/ 「axios」からaxiosをインポートします。 /*グローバルバインディングアクシオ*/ Vue.prototype.$axios = axios; 4.2 qsとmockをインポートするqsはvueで提供されているプラグインで、文字列を解析したりパラメータをシリアル化したりするのに役立ちます。 コンソール端末に入力 npm インストール qs --save Enter キーを押すとモジュールが自動的にインポートされます。 main.jsに登録する /*qs をインポート*/ 'qs' から qs をインポートします。 /*グローバルバインディング*/ Vue.prototype.$qs = qs; バックエンド設計がないため、データベースデータを取得できません。そのため、Mockを使用してバックエンドデータをシミュレートします。 コンソール端末に入力 npm をインストール mockjs --save-dev Enter キーを押すとモジュールが自動的にインポートされます。 モックjsファイルを作成し、空のjsファイルを作成し、好きな名前を付けます main.js に mock をインポートする /*模擬データを導入する*/ './mock/LoginService.js' が必要です 4.3 jsを書いて送信する認証コードを取得: // 検証コードを取得するメソッド getVerifyCodeImg() { /*認証コードを取得*/ this.$axios.get('/getVerifyCode').then(res => { // 検証コードキーを取得する this.loginForm.codeToken = res.data.data.codeToken; // 確認コード画像を取得します。this.codeImg = res.data.data.codeImg; }) } // ページがレンダリングされた後に検証コードを取得する必要があるため、create created() の下にバインドします { //ページがレンダリングされた後、検証コード メソッドを実行します this.getVerifyCodeImg(); } フォーム送信: 送信フォーム(フォーム名) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォームの検証が成功しました this.$axios.post('/login', this.loginForm).then(res => { // 結果を取得します。let result = JSON.parse(res.data.data); メッセージ = res.data.msg; //結果を判断するif (result) { /*ログイン成功*/ Element.Message.success(メッセージ); /* ページへジャンプ */ ルータ.push('/') } それ以外 { /*エラーメッセージを印刷*/ Element.Message.error(メッセージ); } }) } それ以外 { console.log('送信エラー!!'); false を返します。 } }); } 完全なjs <スクリプト> 'element-ui' から Element をインポートします。 「@/router」からルーターをインポートします。 エクスポートデフォルト{ 名前: "ログイン", データ() { 戻る { // フォーム情報 loginForm: { //アカウントデータユーザー名: '', // パスワードデータ パスワード: ''、 //検証コードデータコード: '', // パスワードを記憶する remember: false, // 検証コードのキー。フロントエンドとバックエンドが分離されているため、検証コードはバックエンドでセッションに保存できず、vue 状態管理 codeToken に渡されます: '' }, // フォーム検証ルール: { // アカウント検証ルールを設定する username: [ {必須: true、メッセージ: 'アカウントを入力してください'、トリガー: 'blur'}、 {最小: 3、最大: 10、メッセージ: '長さが 3 文字から 10 文字のアカウント'、トリガー: 'blur'} ]、 // パスワード検証ルールを設定する password: [ {必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur'}、 {最小: 6、最大: 15、メッセージ: '6 文字から 15 文字までのパスワード'、トリガー: 'ぼかし'} ]、 // 検証コードの検証ルールを設定する code: [ {必須: true、メッセージ: '認証コードを入力してください'、トリガー: 'blur'}、 {最小: 5、最大: 5、メッセージ: '長さは 5 文字です'、トリガー: 'blur'} ] }, // 検証コード画像をバインド codeImg: null }; }, メソッド: { // フォームを送信する submitForm(formName) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォームの検証が成功しました this.$axios.post('/login', this.loginForm).then(res => { // 結果を取得します。let result = JSON.parse(res.data.data); メッセージ = res.data.msg; //結果を判断するif (result) { /*ログイン成功*/ Element.Message.success(メッセージ); /* ページへジャンプ */ ルータ.push('/') } それ以外 { /*エラーメッセージを印刷*/ Element.Message.error(メッセージ); } }) } それ以外 { console.log('送信エラー!!'); false を返します。 } }); }, // フォームをリセットする resetForm(formName) { this.$refs[フォーム名].resetFields(); }, // 検証コードを取得するメソッド getVerifyCodeImg() { /*認証コードを取得*/ this.$axios.get('/getVerifyCode').then(res => { // 検証コードキーを取得する this.loginForm.codeToken = res.data.data.codeToken; // 確認コード画像を取得します。this.codeImg = res.data.data.codeImg; }) } }, 作成された() { //ページがレンダリングされた後、検証コード メソッドを実行します this.getVerifyCodeImg(); } } </スクリプト> 4.4 模擬テストデータの作成新しく作成したLoginService.jsにモックデータを書き込む /*バインドモック*/ const モック = require('mockjs'); 定数 Random = Mock.Random; /*データを返す一般的な結果を設定します*/ 結果 = { メッセージ: ''、 データ: '' } /*シミュレーションデータベース情報*/ ユーザー名を 'xiaolong' にします。 パスワードを '123456' にします。 verityCode = 'abcde' とします。 /** * 検証コードをシミュレートする */ Mock.mock('/getVerifyCode', 'get', () => { 結果データ = { コードトークン: ランダム文字列(32)、 codeImg: Random.dataImage('75x40', verityCode) } 結果を返します。 }) /** *ログイン要求を傍受*/ Mock.mock('/login', 'post', (req) => { // リクエストデータを取得します。let from = JSON.parse(req.body); //検証コードを判定する if (verityCode === from.code) { // アカウントを確認する if (username === from.username) { // パスワードを検証する if (password === from.password) { result.msg = 'ログイン成功' 結果データ = 'true' } それ以外 { result.msg = 'パスワードが間違っています' 結果データ = 'false' } } それ以外 { result.msg = 'ユーザーが存在しません' 結果データ = 'false' } } それ以外 { result.msg = '認証コードエラー' 結果データ = 'false' } 結果を返します。 }) 要約するVue実践記録のログインページの実装に関するこの記事はこれで終わりです。Vueログインページの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル
>>: Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル
目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...
ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...
問題の説明: ユーザーは、テーブルに「違反」という単語を含むフィールドが時々表示されることを要求して...
序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...
この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...
環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...
この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...
目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...
目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...
1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...
Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...
<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...
目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...