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