Vue実戦記録のログインページの実装

Vue実戦記録のログインページの実装

1. 事前準備

1.1 Node.jsをインストールする

公式サイトのダウンロードアドレス: https://nodejs.org/zh-cn/

インストールが完了したら、ターミナルでnode -vと入力してバージョン番号を照会します。

npmのバージョンを確認するには、 npm -v

1.2 webpackをインストールする

端末入力

npm インストール --save-dev webpack

バージョンを表示するwebpack -v

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 プロジェクトを作成する

 ターミナルにvue uiと入力して視覚化ツールに入ります

プロジェクトを作成するためのパスを選択してください

プロジェクトフォルダを作成する

デフォルトで手動を選択し、プロジェクトの構成を手動で追加します

機能設定を選択したら、「次へ」をクリックして直接プロジェクトを作成します。

プロジェクトが作成されたら、 WebStoreでプロジェクトを開きます。

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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-cli3と要素に基づいたログインページの実装
  • Vueはログインページの開発方法を実装します

<<:  MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

>>:  Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

推薦する

サブセットかどうかを判断するためのMySQLメソッドの手順

目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

バックアップと削除のためにリアルタイムでステートメントを検出するMySQLトリガーの考え方の詳細な説明

問題の説明: ユーザーは、テーブルに「違反」という単語を含むフィールドが時々表示されることを要求して...

UbuntuでMySQLデータベースファイルディレクトリを変更する方法

序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

CSS @font-face パフォーマンス最適化の詳細な理解

この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...

MySQL サービスとデータベース管理

目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...

MySQL 基本チュートリアル: DML ステートメントの詳細な説明

目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...

Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード

1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...

Weibo の一括フォロー解除機能を実装する JavaScript コード

Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...

HTML テーブル マークアップ チュートリアル (18): テーブル ヘッダー

<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...