Vueログイン機能の実装

Vueログイン機能の実装

前面に書かれた

vue ファイルの最後には空白行が必要です。そうしないとエラーが報告され、非常に奇妙になります...

ログインの概要

ログインビジネスプロセス

1. ログインページでユーザー名とパスワードを入力します

2. 検証のためにバックエンドインターフェースを呼び出す

3. 検証後、背景の応答状況に応じてプロジェクトのホームページにジャンプします

ログインサービスの関連技術ポイント

HTTP はステートレスです。クライアント側のステータスは Cookie を通じて記録され、サーバー側のステータスはセッションを通じて記録され、トークンを通じてステータスが維持されます。

ここは明確にしてください!

ログイントークン原理分析

1. ログインページでユーザー名とパスワードを入力してログインします

2. サーバーはユーザーを検証した後、トークンを生成して返します。

3. クライアントはトークンを保存する

4. 以降のリクエストはすべてこのトークンを使用してリクエストを送信します。

5. サーバーはトークンが渡されたかどうかを検証します

ログイン機能の実装

ログインページのレイアウト

Element-UIコンポーネントによるレイアウトの実装

  • エルフォーム
  • el-フォーム項目
  • el入力
  • エルボタン
  • フォントアイコン

vscodeでターミナルを開くctrl+~

git status現在の git ステータスを表示します
git checkout -b login loginという新しいブランチを作成します。
git branchの切り替え

ここに画像の説明を挿入

vue-ui で起動します!

ここに画像の説明を挿入

ターミナルコマンドnpm run serveも機能します。

コンポーネントファイルの下にvueファイルを作成します

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'./components/login.vue' からログインをインポートします。
Vue.use(VueRouter)

定数ルート = [
      {パス:'/login',コンポーネント:login}
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

ルーティングを構成する(ルーティングリダイレクトを追加する)

const ルーター = 新しい VueRouter({
  ルート: [
    {
      パス: '/'、
      リダイレクト: '/login'
    },
    {
      パス: '/login',
      コンポーネント: ログイン
    }
  ]
})

必ずスペースに注意してください。そうしないと、エラーが報告されます。

ページライティング

まずグローバルスタイルシートを与える

/* グローバルスタイルシート */
html,
体、
#アプリ{
    高さ: 100%;
    マージン: 0;
    パディング: 0;
}

そしてmain.jsにインポートします

'./assets/css/global.css' をインポートします

ログインボックスセンターを完了する

注: translate は、カーソルを移動して正確な中央揃えを実現するために使用されます。

.ログインボックス{
    幅: 450ピクセル;
    高さ: 300px;
    背景色: #fff;
    位置: 絶対;
    左: 50%;
    上位: 50%;
    変換: translate(-50%,-50%);
}

ここに画像の説明を挿入

ログインアイコンを追加する

   .アバターボックス{
        高さ: 130px;
        幅: 130ピクセル;
        境界線: 1px 実線 #eee;
        境界線の半径: 50%;
        パディング: 10px;
        ボックスシャドウ: 0px 0px 10px #ddd;
        位置: 絶対;
        左: 50%;
        変換: translate(-50%,-50%);
        背景色: #fff;
        画像{
            幅: 100%;
            高さ: 100%;
            境界線の半径: 50%;
            背景色: #eee;
        }
    }

ここに画像の説明を挿入

ログインフォームのレイアウト

Element-UIコンポーネントによるレイアウトの実装

  • エルフォーム
  • el-フォーム項目
  • el入力
  • エルボタン
  • フォントアイコン

要素コンポーネントライブラリのウェブページには、ウェブサイトで使用できる基本的なテンプレートコードがいくつか見つかります。

コンポーネントのインポート

'vue' から Vue をインポートします
import { Button, Form, FormItem, Input } from 'element-ui'// 別々にインポートするとエラーが発生します Vue.use(Button)
Vue.use(フォーム)
Vue.use(フォームアイテム)
Vue.use(入力)

中央のフォームとボタンは、上記のコンポーネントライブラリ内にあります。

途中のコードは退屈なので掲載しません。

特に、私たちの小さなアイコンはAlibabaのアイコンライブラリからダウンロードされます

具体的な使い方については、以前書いたブログを参照してください:Alibaba Icon Icons are under your control (フロントエンドにアイコンライブラリを導入する方法、美しいアイコンが自由に使えるTT)

ここに画像の説明を挿入

ログインフォームのデータバインディング

1.:model="loginForm"はフォームをバインドします

2. v-modelを使用してフォームアイテム内のデータオブジェクトを双方向にバインドする

3. エクスポートのデフォルトでは、data()はフォームデータを返します。

ログインフォームの検証ルール

1.: rules="ruleForm" はルールをバインドします

2. フォーム項目で、prop属性を使用して検証する必要があるフィールド名を設定します。

      // これはフォーム検証ルールオブジェクトです loginFormRules: {
        // ユーザー名が正当なユーザー名であることを確認します: [
          { 必須: true、メッセージ: 'ログイン名を入力してください'、トリガー: 'blur' },
          { 最小: 3、最大: 10、メッセージ: '長さは 3 文字から 10 文字の間です'、トリガー: 'blur' }
        ]、
        // パスワードが有効であることを確認します password: [
          { 必須: true、メッセージ: 'ログインパスワードを入力してください'、トリガー: 'blur' },
          { 最小: 6、最大: 15、メッセージ: '長さは 6 文字から 15 文字の間です'、トリガー: 'blur' }
        ]

      }

ここに画像の説明を挿入

ログインフォームのリセット

1. el-formにref参照名を追加してフォームを取得します

2. メソッドにメソッドを追加し、 this.$refs.loginFormRef.resetFields()を使用してフォームをリセットします。フォームの値はデータに設定された初期値になることに注意してください。

ログイン事前認証

1. 同じthis.$refs.loginFormRef.validate()

2. axiosを設定する

'axios' から axios をインポートします
// リクエストのルートパスを設定します axios.defaults.baseURL = 'https://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

3. クエリ結果を次のように取得します。返された結果を取得するには、asyncとawaitを使用します。

      this.$refs.loginFormRef.validate(非同期有効 => {
        (!有効)の場合、戻り値
        const { data: res } = this.$http.post('login', this.loginForm) を待機します。
        コンソール.log(res)
        if (res.meta.status !== 200) return console.log('ログインに失敗しました')
        console.log('ログイン成功')
      })

ログインコンポーネント構成ポップアッププロンプト

1. element.jsにメッセージを導入し、vueにマウントする

Vue.prototype.$message = Message // Vueにマウント

2. これを直接呼び出します。$message.error('ログインに失敗しました!')

ここに画像の説明を挿入

ログイン成功後の動作

1. ログイン後にトークンをクライアントのセッションストレージに保存する

1. ログイン以外のプロジェクト内の他のAPIインターフェースは、ログイン後にアクセスする必要がある

2. トークンは現在のウェブサイトが開いている間のみ有効であるため、トークンをsessionStorageに保存します。

トークンはセッションストレージ

ここに画像の説明を挿入

2. プログラムナビゲーションを介してバックエンドのホームページにジャンプします。ルーティングアドレスは/homeです。

        window.sessionStorage.setItem('token', 'res.data.token')//トークンを保存 これはランダムに保存される固定値です this.$router.push('/home') //次のページにジャンプします

Vueログイン機能の実装に関する記事はこれで終了です。Vueログインに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue はユーザーのログイン状態を維持します (さまざまなトークン保存方法)
  • Vueはユーザーログインとトークン検証を実装します
  • VUEはトークンログイン認証を実装
  • vue+springbootでログイン機能を実現
  • Vueはログイン認証コードを実装する
  • vue+springbootでログイン認証コードを実現
  • Springboot+vueでログイン機能を実現

<<:  MySQL 結合テーブルと ID 自動増分の例の分析

>>:  Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案

推薦する

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

CSS3でアニメーションを実装する3つの方法

これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

Docker+daocloudはフロントエンドプロジェクトの自動構築とデプロイを実現します

自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...

Vue ショッピングカートのケーススタディ

目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...

Dockerコンテナのネットワーク管理とネットワーク分離の実装

1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...

ZFS とは何か? ZFS を使用する理由とその機能

ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...

CSS での配置の使用方法の詳細な研究 (要約)

CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

MySQLデータベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...