フォームから Vue ElementUI を使用してログイン効果を実装する例

フォームから Vue ElementUI を使用してログイン効果を実装する例

1. ElementUIで基本的なスタイルを構築する

ElementUI を知らない場合は、公式 Web サイト https://element.eleme.cn/#/zh-CN にアクセスして、ElementUI の基本を理解してください。

1.1 ElementUIの使用 まず、npm i element-ui Sコマンドを使用してプロジェクトにElementUIをインストールします。

1.2 次に、公式ウェブサイトからフォームを見つけて、基本的なレイアウトを行うことができます。

これが私が書いたフレームワークです

<el-フォーム
      ラベル位置="上"
      ラベル幅="100px" クラス="demo-ruleForm"
      :rules='ルール'
      :model='ルールフォーム'
      ステータスアイコン
      ref='ルールフォーム'
    >
        <el-form-item label="ユーザー名" prop="名前">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="パスワード" prop="パスワード">
            <el-input type="password" v-model="rulesForm.password"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">送信</el-button>
            <el-button>リセット</el-button>
        </el-form-item>
    </el-form>

これらのコードの効果

ここでは ElementUI のプロパティがいくつか使用されているため、ここでは説明しません。それらはすべて公式 Web サイトにあります。そのため、これらのプロパティを確認できるようにスクリーンショットをいくつか掲載します。

次に、ルールとモデルを組み合わせて、ルールを入力するための入力ボックスを作成します。

次に、これらの2つのルールをアカウントとパスワードボックスにバインドします

ElementUIレイアウトは数回クリックするだけです

2. [送信]ボタンをクリックして、アカウントとパスワードボックスの内容をバックグラウンドデータに渡します。

refを通じてタグ内の属性をより良く取得することができます

以下は入力ボックスの内容をバックグラウンドに渡す方法です

メソッド: {
    送信フォーム(送信者名){
      this.$refs[fromName].validate((valid)=>{
          if(有効){
            //チェックに合格したら、ユーザー名とパスワードをバックエンドに送信します login({
              名前:this.rulesForm.name、
              パスワード:this.rulesForm.password
            }).then((データ)=>{
              if(データコード==0){
                localStorage.setItem('トークン',data.data.token)
                ウィンドウの場所.href='/'
              }
              if(データコード==1){
                this.$message.error(データ.メッセージ)
              }
            })
          }それ以外{
            console.log('送信エラー!!')
            偽を返す
          }
      })
    }
  }

その1つはログインであり、バックエンドのインターフェースをカプセル化することで得られるメソッドである。

このメソッドは送信ボタンにバインドされています

次に、既存のアカウントのパスワードを入力し、送信ボタンをクリックしてログインします。

次にログイン情報をレンダリングします

要約する

ログイン効果を実現するには2つのステップがあります。まずElementUIを使用して対応するスタイルを構築します---「送信ボタンをクリックして、アカウントとパスワードボックスの内容をバックグラウンドデータに渡します

これで、vue ElementUI のフォームからのログイン効果を実現する例に関するこの記事は終了です。より関連性の高い vue Element のフォームからのログイン コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue.jsとElement-UIを使用してシンプルなログインページを作成する例
  • vue+Element-uiはログイン登録フォームを実装します
  • vue+element uiを使用して見栄えの良いログインインターフェースを実現する方法

<<:  Windows で負荷分散に Nginx+Tomcat を使用するための完全な手順

>>:  Mysql InnoDBとMyISAMの違いの分析

推薦する

無効な Nginx クロスドメイン設定 Access-Control-Allow-Origin の解決策

nginx バージョン 1.11.3次の構成を使用すると、検証は無効になり、クロスドメインの問題が依...

ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

JavaScript Sandboxについての簡単な説明

序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

Nginx10m+の高並列カーネル最適化に関する簡単な説明

高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Tomcat および Web アプリケーションの Docker デプロイメントの実装

1.dockerをオンラインでダウンロードする yum インストール -y epel-release...

Vue3 の emitting と attr の違いの分析

目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...

rem をモバイル デバイスに適応させる方法の例

序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...

MySQL 8.0.18コマンドの詳細な説明

解凍したフォルダ C:\web\mysql-8.0.11 を開き、フォルダ内に my.ini 構成フ...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...