Vue実戦記録のログインページの実装

npm インストール --save-dev webpack

npm インストール -g @vue/cli

npm アップデート -g @vue/cli

npm アンインストール vue-cli -g

 npm をインストールします。

'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')

<テンプレート>
  <div id="アプリ">
    <ルータービュー/>
  </div>
</テンプレート>

<スタイル>
</スタイル>

<テンプレート>
  <div id="アプリ">
    <!--ルーティング ページ-->
    <ルータービュー/>
  </div>
</テンプレート>

<スタイル>
/*グローバル親クラスの高さ*/
html{
  高さ: 100%;
}

/*ボディ属性をリセット*/
体 {
  パディング: 0;
  マージン: 0;
  /*HTMLを継承*/
  高さ: 100%;
}

/*#アプリの高さも継承する必要があります*/
＃アプリ {
  高さ: 100%;
}

/* グローバルリンクラベルから下線を削除します */
{
  テキスト装飾: なし;
}
</スタイル>

<テンプレート>
  <!-- 行の要素 -->
  <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;
  幅: 自動;
}
</スタイル>

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../views/Home.vue' から Home をインポートします。
'../views/Login.vue' からログインをインポートします。

Vue.use(VueRouter)

定数ルート = [
  {
    パス： '/'、
    名前: 'ホーム'、
    コンポーネント: ホーム
  },
  //ログインページのルーティングを構成する{
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: ログイン
  }
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

npm インストール axios --save

/*axios をインポート*/
「axios」からaxiosをインポートします。
/*グローバルバインディングアクシオ*/
Vue.prototype.$axios = axios;

 npm インストール qs --save

/*qs をインポート*/
'qs' から qs をインポートします。
/*グローバルバインディング*/
Vue.prototype.$qs = qs;

 npm をインストール mockjs --save-dev

/*模擬データを導入する*/
'./mock/LoginService.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 を返します。
    }
  });
}

<スクリプト>
'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();
  }
}
</スクリプト>

/*バインドモック*/
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'
  }
  結果を返します。
})