この記事の例では、ログインと登録の効果を実現するための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: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...
nginx の default_server ディレクティブは、server_name と一致しない...
序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...
MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...
目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...
dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...
スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...
mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...
ダウンロード:ステップ 1: ウェブサイトを開きます (ダウンロードするには公式ウェブサイトにアクセ...
言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...
目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...