1. 事前準備1.1 Node.jsをインストールする公式サイトのダウンロードアドレス: https://nodejs.org/zh-cn/ インストールが完了したら、ターミナルで npmのバージョンを確認するには、 1.2 webpackをインストールする端末入力 npm インストール --save-dev webpack バージョンを表示する 1.3 vue-cliをインストールするVueプロジェクトはビジュアルツールvue-cli3以上を使用して作成されるため、ここで選択されるバージョンは3以上です。 npm インストール -g @vue/cli vue-cli のアップグレード npm アップデート -g @vue/cli vue-cli をアンインストールする npm アンインストール vue-cli -g 2. Vueプロジェクトを構築するvue-cliをインストールしたら、vueが提供する視覚化ツールを使用してvueプロジェクトを作成します。 2.1 プロジェクトを作成する ターミナルに プロジェクトを作成するためのパスを選択してください プロジェクトフォルダを作成する デフォルトで手動を選択し、プロジェクトの構成を手動で追加します 機能設定を選択したら、「次へ」をクリックして直接プロジェクトを作成します。 プロジェクトが作成されたら、 2.2 プロジェクトディレクトリ2.3 要素のインポートUIインポート方法はElementUI公式サイトで直接確認できます。ここでは、すべてのモジュールのインポートを選択します。 コンソールに入力 npm をインストールします。 main.js 内の参照 'vue' から Vue をインポートします './App.vue' からアプリをインポートします。 './router' からルーターをインポートします './store' からストアをインポートします Vue.config.productionTip = false /*ElementUI をインポート*/ 'element-ui' から elementUI をインポートします。 /*ElementUIのCSSスタイルをインポート*/ 'element-ui/lib/theme-chalk/index.css' をインポートします。 /*Vue は ElementUI を使用します*/ Vue.use(要素UI); 新しいVue({ ルーター、 店、 レンダリング: h => h(App) }).$mount('#app') 3 ログインページの実装3.1 App.vueを変更するここでは、まずグローバル設定を設定し、以前のテンプレートを削除します。 <テンプレート> <div id="アプリ"> <ルータービュー/> </div> </テンプレート> <スタイル> </スタイル> グローバルスタイルを変更する <テンプレート> <div id="アプリ"> <!--ルーティング ページ--> <ルータービュー/> </div> </テンプレート> <スタイル> /*グローバル親クラスの高さ*/ html{ 高さ: 100%; } /*ボディ属性をリセット*/ 体 { パディング: 0; マージン: 0; /*HTMLを継承*/ 高さ: 100%; } /*#アプリの高さも継承する必要があります*/ #アプリ { 高さ: 100%; } /* グローバルリンクラベルから下線を削除します */ { テキスト装飾: なし; } </スタイル> 3.2 Login.vueを作成するビューディレクトリを右クリックして、Loginという名前のvueファイルを作成します。 ElementUI公式サイトでレイアウトコンポーネントを検索し、独自のレイアウトを選択してvueファイルにコピーします。 <テンプレート> <!-- 行の要素 --> <el-row type="flex" class="row-bg" justify="center"> <!--最初の列--> <el-col :span="6"> <div class="grid-content bg-purple"></div> </el-col> <!--2 列目--> <el-col :span="6"> <div class="grid-content bg-purple-light"></div> </el-col> <!--3 列目--> <el-col :span="6"> <div class="grid-content bg-purple"></div> </el-col> </el-row> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 「ログイン」 } </スクリプト> <スタイルスコープ> </スタイル> フォームをコピーします。ここでは検証済みのフォームをコピーします。コピー後、フォームを変更します <テンプレート> <div :xl="6" :lg="7" class="bg-login"> <!--ロゴ--> <el-image :src="require('@/assets/logo.png')" class="logo"/> <!--タイトル--> <el-row type="flex" class="row-bg row-two" justify="center" align="middle"> <el-col :span="6"></el-col> <el-col :span="6"> <!--タイトル--> <h1 class="title">xAdmin 管理システム</h1> </el-col> <el-col :span="6"></el-col> </el-row> <!--フォーム--> <el-row type="flex" class="row-bg card" justify="center" align="bottom"> <el-col :span="7" class="ログインカード"> <!--ログインフォーム--> <el-form :model="ログインフォーム" :rules="ルール" ref="ログインフォーム" label-width="21%" class="ログインフォーム"> <el-form-item label="アカウント" prop="ユーザー名" style="width: 380px"> <el-input v-model="ログインフォーム.ユーザー名"></el-input> </el-form-item> <el-form-item label="パスワード" prop="パスワード" style="幅: 380px"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item label="確認コード" prop="code" style="width: 380px"> <el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input> <!-- 検証コード画像 --> <el-image :src="codeImg" class="codeImg"></el-image> </el-form-item> <el-form-item label="パスワードを記憶する" prop="remember"> <el-switch v-model="loginForm.remember"></el-switch> </el-form-item> <el-form-item class="btn-ground"> <el-button type="primary" @click="submitForm('loginForm')">今すぐログイン</el-button> <el-button @click="resetForm('loginForm')">リセット</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: "ログイン", データ() { 戻る { // フォーム情報 loginForm: { //アカウントデータユーザー名: '', // パスワードデータ パスワード: ''、 //検証コードデータコード: '', // パスワードを記憶する remember: false, // 検証コードのキー。フロントエンドとバックエンドが分離されているため、検証コードはバックエンドでセッションに保存できず、vue 状態管理 codeToken に渡されます: '' }, // フォーム検証ルール: { // アカウント検証ルールを設定する username: [ {必須: true、メッセージ: 'アカウントを入力してください'、トリガー: 'blur'}、 {最小: 3、最大: 10、メッセージ: '長さが 3 文字から 10 文字のアカウント'、トリガー: 'blur'} ]、 // パスワード検証ルールを設定する password: [ {必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur'}、 {最小: 6、最大: 15、メッセージ: '6 文字から 15 文字までのパスワード'、トリガー: 'ぼかし'} ]、 // 検証コードの検証ルールを設定するコード: [ {必須: true、メッセージ: '認証コードを入力してください'、トリガー: 'blur'}、 {最小: 5、最大: 5、メッセージ: '長さは 5 文字です'、トリガー: 'blur'} ] }, // 検証コード画像をバインド codeImg: null }; }, メソッド: { // フォームを送信する submitForm(formName) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォーム検証成功アラート('submit') } それ以外 { console.log('送信エラー!!'); false を返します。 } }); }, // フォームをリセットする resetForm(formName) { this.$refs[フォーム名].resetFields(); } }, } </スクリプト> <スタイルスコープ> .codeImg { /*認証コードの画像を右側に浮かせる*/ フロート: 右; /*角丸の境界線を設定する*/ 境界線の半径: 3px; /*幅を設定する*/ 幅: 26%; } .bg-ログイン{ 高さ: 100%; 背景画像: url("../assets/backgroud.jpg"); 背景サイズ: 200%; } .btn-ground { テキスト配置: 中央; } .ロゴ { マージン: 30px; 高さ: 70px; 幅: 70ピクセル; 位置: 固定; } 。タイトル { テキストシャドウ: -3px 3px 1px #5f565e; テキスト配置: 中央; 上マージン: 60%; 色: #41b9a6; フォントサイズ: 40px; } .ログインカード{ 背景色: #ffffff; 不透明度: 0.9; ボックスシャドウ: 0 0 20px #ffffff; 境界線の半径: 10px; パディング: 40px 40px 30px 15px; 幅: 自動; } </スタイル> 3.3 ルートの設定ルーターの下のindex.jsで設定する 'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 '../views/Home.vue' から Home をインポートします。 '../views/Login.vue' からログインをインポートします。 Vue.use(VueRouter) 定数ルート = [ { パス: '/'、 名前: 'ホーム'、 コンポーネント: ホーム }, //ログインページのルーティングを構成する{ パス: '/login', 名前: 'ログイン', コンポーネント: ログイン } ] const ルーター = 新しい VueRouter({ ルート }) デフォルトルーターをエクスポートする 効果画像: 4. ログイン機能を実装する4.1 axiosのインポートvueではページ、つまりviewのみを担当しますが、ログインする場合はバックグラウンドで検証する必要があるため、vueでは通信はaxiosによって処理されます。 コンソール端末に入力 npm インストール axios --save Enter キーを押すとモジュールが自動的にインポートされます。 main.jsに登録する /*axios をインポート*/ 「axios」からaxiosをインポートします。 /*グローバルバインディングアクシオ*/ Vue.prototype.$axios = axios; 4.2 qsとmockをインポートするqsはvueで提供されているプラグインで、文字列を解析したりパラメータをシリアル化したりするのに役立ちます。 コンソール端末に入力 npm インストール qs --save Enter キーを押すとモジュールが自動的にインポートされます。 main.jsに登録する /*qs をインポート*/ 'qs' から qs をインポートします。 /*グローバルバインディング*/ Vue.prototype.$qs = qs; バックエンド設計がないため、データベースデータを取得できません。そのため、Mockを使用してバックエンドデータをシミュレートします。 コンソール端末に入力 npm をインストール mockjs --save-dev Enter キーを押すとモジュールが自動的にインポートされます。 モックjsファイルを作成し、空のjsファイルを作成し、好きな名前を付けます main.js に mock をインポートする /*模擬データを導入する*/ './mock/LoginService.js' が必要です 4.3 jsを書いて送信する認証コードを取得: // 検証コードを取得するメソッド getVerifyCodeImg() { /*認証コードを取得*/ this.$axios.get('/getVerifyCode').then(res => { // 検証コードキーを取得する this.loginForm.codeToken = res.data.data.codeToken; // 確認コード画像を取得します。this.codeImg = res.data.data.codeImg; }) } // ページがレンダリングされた後に検証コードを取得する必要があるため、create created() の下にバインドします { //ページがレンダリングされた後、検証コード メソッドを実行します this.getVerifyCodeImg(); } フォーム送信: 送信フォーム(フォーム名) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォームの検証が成功しました this.$axios.post('/login', this.loginForm).then(res => { // 結果を取得します。let result = JSON.parse(res.data.data); メッセージ = res.data.msg; //結果を判断するif (result) { /*ログイン成功*/ Element.Message.success(メッセージ); /* ページへジャンプ */ ルータ.push('/') } それ以外 { /*エラーメッセージを印刷*/ Element.Message.error(メッセージ); } }) } それ以外 { console.log('送信エラー!!'); false を返します。 } }); } 完全なjs <スクリプト> 'element-ui' から Element をインポートします。 「@/router」からルーターをインポートします。 エクスポートデフォルト{ 名前: "ログイン", データ() { 戻る { // フォーム情報 loginForm: { //アカウントデータユーザー名: '', // パスワードデータ パスワード: ''、 //検証コードデータコード: '', // パスワードを記憶する remember: false, // 検証コードのキー。フロントエンドとバックエンドが分離されているため、検証コードはバックエンドでセッションに保存できず、vue 状態管理 codeToken に渡されます: '' }, // フォーム検証ルール: { // アカウント検証ルールを設定する username: [ {必須: true、メッセージ: 'アカウントを入力してください'、トリガー: 'blur'}、 {最小: 3、最大: 10、メッセージ: '長さが 3 文字から 10 文字のアカウント'、トリガー: 'blur'} ]、 // パスワード検証ルールを設定する password: [ {必須: true、メッセージ: 'パスワードを入力してください'、トリガー: 'blur'}、 {最小: 6、最大: 15、メッセージ: '6 文字から 15 文字までのパスワード'、トリガー: 'ぼかし'} ]、 // 検証コードの検証ルールを設定する code: [ {必須: true、メッセージ: '認証コードを入力してください'、トリガー: 'blur'}、 {最小: 5、最大: 5、メッセージ: '長さは 5 文字です'、トリガー: 'blur'} ] }, // 検証コード画像をバインド codeImg: null }; }, メソッド: { // フォームを送信する submitForm(formName) { this.$refs[formName].validate((valid) => { (有効)の場合{ // フォームの検証が成功しました this.$axios.post('/login', this.loginForm).then(res => { // 結果を取得します。let result = JSON.parse(res.data.data); メッセージ = res.data.msg; //結果を判断するif (result) { /*ログイン成功*/ Element.Message.success(メッセージ); /* ページへジャンプ */ ルータ.push('/') } それ以外 { /*エラーメッセージを印刷*/ Element.Message.error(メッセージ); } }) } それ以外 { console.log('送信エラー!!'); false を返します。 } }); }, // フォームをリセットする resetForm(formName) { this.$refs[フォーム名].resetFields(); }, // 検証コードを取得するメソッド getVerifyCodeImg() { /*認証コードを取得*/ this.$axios.get('/getVerifyCode').then(res => { // 検証コードキーを取得する this.loginForm.codeToken = res.data.data.codeToken; // 確認コード画像を取得します。this.codeImg = res.data.data.codeImg; }) } }, 作成された() { //ページがレンダリングされた後、検証コード メソッドを実行します this.getVerifyCodeImg(); } } </スクリプト> 4.4 模擬テストデータの作成新しく作成したLoginService.jsにモックデータを書き込む /*バインドモック*/ const モック = require('mockjs'); 定数 Random = Mock.Random; /*データを返す一般的な結果を設定します*/ 結果 = { メッセージ: ''、 データ: '' } /*シミュレーションデータベース情報*/ ユーザー名を 'xiaolong' にします。 パスワードを '123456' にします。 verityCode = 'abcde' とします。 /** * 検証コードをシミュレートする */ Mock.mock('/getVerifyCode', 'get', () => { 結果データ = { コードトークン: ランダム文字列(32)、 codeImg: Random.dataImage('75x40', verityCode) } 結果を返します。 }) /** *ログイン要求を傍受*/ Mock.mock('/login', 'post', (req) => { // リクエストデータを取得します。let from = JSON.parse(req.body); //検証コードを判定する if (verityCode === from.code) { // アカウントを確認する if (username === from.username) { // パスワードを検証する if (password === from.password) { result.msg = 'ログイン成功' 結果データ = 'true' } それ以外 { result.msg = 'パスワードが間違っています' 結果データ = 'false' } } それ以外 { result.msg = 'ユーザーが存在しません' 結果データ = 'false' } } それ以外 { result.msg = '認証コードエラー' 結果データ = 'false' } 結果を返します。 }) 要約するVue実践記録のログインページの実装に関するこの記事はこれで終わりです。Vueログインページの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル
>>: Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル
この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...
スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...
この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...
目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...
MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...
1つ。 tomcat を使用したリモート展開1.1 発生した問題:プロジェクトでは、サードパーティの...
Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...
目次トリガーとは何かトリガーを作成する表は次のようになります。さらにいくつかの単語を挙げます。制限と...
目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...
序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...
lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...
この記事では、MySQL での重複キー更新時の replace into と insert into...
ソースコードプレビュー: https://github.com/jdf2e/nutui NutUI ...
フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...
MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....