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を使用するアイデアの詳細な説明

推薦する

JavaScriptはスタック構造の詳細なプロセスを実装する

目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...

int(3)とint(10)の値の範囲はmysqlで同じですか?

目次質問:答え:現実:知識ポイント結論は:要約する質問: MySQLフィールド、unsigned i...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

win10 で mysql8.0.23 をインストールし、「サービスが制御機能に応答しません」という問題を解決する方法

Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...

MySQL のあまり知られていないソート方法

序文ORDER BY 字段名升序/降序、このソートステートメントは皆さんご存知だと思いますが、特殊な...

mysql5.7.17 zip の解凍とインストールの詳細な手順

1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...

Centos7.3 での mysql5.7 のインストールと設定のチュートリアル

この記事では、MySQL 5.7のインストールと設定のチュートリアルを参考までに紹介します。具体的な...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...

MySQLテーブルの自動インクリメント列の初期値をリセットする方法

MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...

Docker-Composeコマンドの使い方の詳しい説明

Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...

JavaScriptのポイントごとのシリーズでこれは何ですか

これを理解するおそらく、他のオブジェクト指向プログラミング言語でもthis見たことがあり、これがコン...

Mysql-connector-java ドライバのバージョン問題の概要

Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...