この記事の例では、ログインと登録の効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linuxでmysqlの定期的なコールドバックアップを実装するためにmysqldump+expect+crontabを使用するアイデアの詳細な説明
目次1. スタック構造を理解する2. スタック構造のカプセル化3. 10進数を2進数に変換する1. ...
目次質問:答え:現実:知識ポイント結論は:要約する質問: MySQLフィールド、unsigned i...
1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...
Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...
序文ORDER BY 字段名升序/降序、このソートステートメントは皆さんご存知だと思いますが、特殊な...
1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...
この記事では、MySQL 5.7のインストールと設定のチュートリアルを参考までに紹介します。具体的な...
React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...
について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...
MySQLテーブルの自動インクリメント列の初期値をリセットする方法1. 問題の説明MySQL データ...
Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...
これを理解するおそらく、他のオブジェクト指向プログラミング言語でもthis見たことがあり、これがコン...
Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...