Vueプロジェクトはログインと登録の効果を実現します

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有しています。具体的な内容は次のとおりです。

メインコンテンツ

この章の目標: vue+element-ui が登録とログインを完了する

1. エフェクト表示

2. ページの表示:ビュー

登録ページ効果実現:

<テンプレート>
  <div class="ログインセクション">
    <!-- :rules="ルール" -->
    <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref='ruleForm'>
      <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>
  </div>
</テンプレート>
<スクリプト>
'@/service/api' から {login} をインポートします。
エクスポートデフォルト{
  データ() {
    戻る {
      ルールフォーム:{
        名前:''、
        パスワード:''
      },
      ルール:
        名前:[
            {required:true,message:'名前が書かれていません',trigger:'blur'},
            {min:1,max:5,message:'長さは 3 文字から 5 文字です'}
        ]、
         パスワード:[
            {required:true,message:'名前が書かれていません',trigger:'blur'},
            {min:3,max:5,message:'長さは 3 文字から 5 文字です'}
        ]
      }
    };
  },
  メソッド: {
    送信フォーム(フォーム名){
      this.$refs[フォーム名].validate((valid)=>{
        if(valid){//チェックに合格したら、ユーザー名とパスワードをバックエンドのログインに送信します({
              名前:this.rulesForm.name、
              パスワード:this.rulesForm.password
            }).then((データ)=>{
                コンソール.log(データ)
                if(データコード===0){
                  localStorage.setItem('トークン',data.data.token)
                  ウィンドウの場所.href='/'
                }
                if(データコード===1){
                  this.$message.error(データ.メッセージ)
                }
            })
        }それ以外{
          console.log('送信エラー!!');
          false を返します。
        }
      })
    }
  }
}
</スクリプト>
<style lang="スタイラス">
.ログインセクション
  パディング 0px 20px
</スタイル>

ログイン.vue

<テンプレート>
  <div class="ログインセクション">
    <el-form label-position="top" label-width="100px" class="demo-ruleForm" :rules="rules" :model="rulesForm" status-icon ref='ruleForm'>
      <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>
  </div>
</テンプレート>
<スクリプト>
'@/service/api' から {login} をインポートします。
エクスポートデフォルト{
  データ() {
    戻る {
      ルールフォーム:{
        名前:''、
        パスワード:''
      },
      ルール:
        名前:[
            {required:true,message:'名前が書かれていません',trigger:'blur'},
            {min:1,max:5,message:'長さは 3 文字から 5 文字です'}
        ]、
         パスワード:[
            {required:true,message:'名前が書かれていません',trigger:'blur'},
            {min:3,max:5,message:'長さは 3 文字から 5 文字です'}
        ]
      }
    };
  },
  メソッド: {
    送信フォーム(フォーム名){
      this.$refs[フォーム名].validate((valid)=>{
        if(valid){//チェックに合格したら、ユーザー名とパスワードをバックエンドのログインに送信します({
              名前:this.rulesForm.name、
              パスワード:this.rulesForm.password
            }).then((データ)=>{
                コンソール.log(データ)
                if(データコード===0){
                  localStorage.setItem('トークン',data.data.token)
                  ウィンドウの場所.href='/'
                }
                if(データコード===1){
                  this.$message.error(データ.メッセージ)
                }
            })
        }それ以外{
          console.log('送信エラー!!');
          false を返します。
        }
      })
    }
  }
}
</スクリプト>
<style lang="スタイラス">
.ログインセクション
  パディング 0px 20px
</スタイル>

ルーティング: index.js

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
Vue.use(ルーター)
'@/store' からストアをインポートします
'@/service/api.js' から {userInfo} をインポートします。
'@/views/home/Home.vue' から Home をインポートします。
'@/views/user-login/index.vue' からログインをインポートします。
const router = 新しいルーター({
    モード:"履歴",
    ルート:[
        {
            パス:'/'、
            名前:"ホーム",
            タイトル:"ホーム",
            コンポーネント:ホーム
        },
        {
            パス:'/login',
            名前:"ログイン",
            タイトル:"ログインページ",
            コンポーネント:ログイン、
            メタ:{
                ログイン:true
            }
        }
    ]
});
router.beforeEach( 非同期 (to,from,next) => {
    const トークン = localStorage.getItem('トークン');
    const isLogin = !!トークン;
    //ルートに入るときは、それが正当かどうかを確認するためにバックエンドにトークンを送信する必要があります。const data = await userInfo();
    Store.commit('chageUserInfo',data.data)
   if(to.matched.some(item => item.meta.login)){//ログインが必要ですif(isLogin){//すでにログインしているので、そのまま渡しますif(data.error === 400){//バックエンドからログインに失敗したことが通知されますnext({name:'login'});
                localStorage.removeItem('トークン');
                戻る;
            }
            if(to.name === 'ログイン'){
                次へ({name:'home'});
            }それ以外{
                次();
            }
            戻る;
        }
        if(!isLogin && to.name === 'login'){//ログインしていませんが、ログインページに移動します next();
        }
        if(!isLogin && to.name !== 'login'){//ログインしていない、ログインページではない next({name:'login'});
        }
   }それ以外{
       次();
   }
})
デフォルトルーターをエクスポートします。

要約する

本日の内容は以上です。まだ不完全な部分もあるのであまり良くありません。今後も改善していきます!

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でのログインとログアウトの実装例
  • Vue2.0 axios フロントエンドおよびバックエンド ログイン インターセプター (例の説明)
  • ログインを実装するための vue+axios 初心者練習用サンプルコード
  • vue.jsとlaravelを使用したWeChat認証ログインの詳細な説明
  • ログインインターセプションとaxiosインターセプターの使用のVueフロントエンド実装
  • vue-cli3と要素に基づいたログインページの実装
  • Vue 学習ロード ログイン登録サンプルコード
  • vueは携帯電話経由でSMS認証コードを送信する登録機能を実装します
  • Vue.jsは、ユーザーコメント、ログイン、登録、情報変更機能を実装します。
  • VUEは登録とログインの効果を実現します

<<:  Dockerコンテナ間で通信する3つの方法

>>:  Linuxでmysqlの定期的なコールドバックアップを実装するためにmysqldump+expect+crontabを使用するアイデアの詳細な説明

推薦する

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

nginx の default_server 定義とマッチングルールの詳細な説明

nginx の default_server ディレクティブは、server_name と一致しない...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)

純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

dl、dt、dd リスト ラベルの例

dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...

VUE のコンパイル スコープとスロット スコープのスロットの問題について

スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...

MySQL 接続数を設定する方法 (接続数が多すぎる)

mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...

Windows 版 MySQL のインストール、起動、基本設定に関する詳細なグラフィック チュートリアル

ダウンロード:ステップ 1: ウェブサイトを開きます (ダウンロードするには公式ウェブサイトにアクセ...

MySQL 8.0 の非表示インデックスの詳細な説明

言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

Windows 10 での MySQL 5.7.21 インストーラのインストール グラフィック チュートリアル

MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...