ホームページ > ウェブフロントエンド > Vue.js > ユーザーログイン機能の実装方法

ユーザーログイン機能の実装方法

醉折花枝作酒筹
リリース: 2021-05-07 09:29:37
転載
3893 人が閲覧しました

この記事では、ユーザーログイン機能の実装方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ユーザーログイン機能の実装方法

ユーザーログイン機能の実装

SpringBootにデータベース情報とmybatis関連情報を設定します

以下のように:

ユーザーログイン機能の実装方法

データベース easyuser テーブルとユーザー エンティティ クラス

データベース内の easyuser テーブルは次のとおりです:

ユーザーログイン機能の実装方法

javabean以下に示すように、クラス ユーザー:

ユーザーログイン機能の実装方法

フロントエンド vue スキャフォールディングは、ログイン リクエストを SpringBoot バックエンドに送信します。

ユーザーログイン機能の実装方法

#ログイン メソッドのコードは次のとおりです。 図:

ユーザーログイン機能の実装方法

SpringBoot バックエンドの LoginController コントローラーのログイン メソッド

ログイン メソッドのコード

ユーザーログイン機能の実装方法

UserDao 動的プロキシ インターフェイスの getUserByMessage メソッド

まず、スタートアップ クラスで動的プロキシ インターフェイスをスキャンする必要があります。以下に示すように:

ユーザーログイン機能の実装方法

ユーザーログイン機能の実装方法

UserDao.xml マッピング ファイル

ユーザーログイン機能の実装方法

Route Home.vue コンポーネントにジャンプします

フロントエンドは axios リクエストをバックエンドに送信しますその後、バックエンドは json 文字列データをフロントエンドに返し、フロントエンドはこの json 文字列を解析します。 flagloginフラグが「ok」の場合、ルートがジャンプされます。ルートジャンプ後のブラウザのlocalhost:8081/loginアドレスはlocalhost:8081/homeアドレスとなり、パス:「/home」がホームに相当します。 .vue コンポーネントなので、Home.vue コンポーネントは App.vue コンポーネントのラベルにレンダリングされます。Home.vue コンポーネントの効果は次のとおりです:

ユーザーログイン機能の実装方法

Home.vue コンポーネントのコードは次のとおりです。

ユーザーログイン機能の実装方法

Test

次に示すように、フロントエンド プロジェクトとバックエンド プロジェクトをそれぞれ開始します。 :

ユーザーログイン機能の実装方法

ユーザーログイン機能の実装方法

ブラウザにスキャフォールディング プロジェクトの生成アドレスを入力し、以下に示すように、フロントエンドのデフォルトのホームページにアクセスします。

ユーザーログイン機能の実装方法

ログイン ボタンをクリックすると、以下のようになります。

ユーザーログイン機能の実装方法

#[関連する推奨事項: 「vue. js チュートリアル " ]

以上がユーザーログイン機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート