人的資源中部台湾プロジェクト (day01)

固定のローカルアクセスポートと Web サイト名を設定する

目标: 統一されたローカルアクセスポートと Web サイトのタイトルを設定します

ビジネスを正式に開発する前に、まずプロジェクトのローカルポートとWeb サイト名を調整します。

ローカルサービスポート:vue.config.jsに設定します

vue.config.jsvue プロジェクトに関連するコンパイル、設定、パッケージ化、およびサービスの開始に関する設定ファイルであり、その中核はwebpackにありますが、 webpackの改良版に相当する webpack とは異なります。

図に示すように、開発環境のサービスポートの場所です。

上記はprocess.env.port実際には、nodejs サービスの環境変数であることがわかりますが、この変数はどこに設定されているのでしょうか?

プロジェクトの下に、次.env.developmentの.env.production2 つのファイルが見つかりました。

開発 => 開発環境

本番環境 => 本番環境

開発とデバッグのためにnpm run devを実行すると、この時点で.env.development実行ファイルの内容がロードされます。

npm run build:prodを実行して運用環境をパッケージ化すると、.env.production実行ファイルの内容がロードされます。

したがって、開発環境のインターフェースを設定したい場合は、.env.developmentポート変数への代入を直接記述することができます。

# ポート番号
port = 8888を設定します

本节注意: サービスの構成ファイルを変更します。有効にするには、サービスを再起動する必要があります。値 '8888' の後にスペースを入れることはできません

ウェブサイト名

Web サイト名は実際には、configureWebpackオプションのnameオプションにあります。コードを読むと、名前が実際には src ディレクトリから来ていることがわかります。

settings.js書類

人力资源管理平台したがって、Web サイト名を「」に変更できます。

コードを送信する

本节任务: Web サイト開発サービスのポート設定と Web サイト名の設定を完了します

ログインページの基本レイアウト

目标ログインページの基本レイアウトを完成させる

ページ効果

まず、上記のページ効果を実現するために、現在のログインページをそれに応じて直接変更できます。

ヘッダーの背景を設定する

<!-- タイトル画像を入力します @ は設定のエイリアス --> 
<div class="title-container"> 
        <h3 class="title"> 
          <img src="@/assets/common/login-logo .png" alt=""> 
        </h3> 
 </div>

本节注意:@これは、vue.config.js で設定したパスエイリアスで、src ルートディレクトリを指定するため、ファイルを見つけるのに非常に便利です

背景画像を設定する

/* 要素 ui css をリセット */ 
.login-container {
  背景-画像: url('~@/assets/common/login.jpg'); // 背景画像を設定します
  背景-位置: center; // 背景画像を設定します画面全体を満たすように設定された画像の位置
}

本节注意: スタイルシートでエイリアスを使用する必要がある場合は@、 @ の前に記号を追加する必要があります~。そうしないと認識されません。

電話番号とパスワードの文字色を設定します

$light_gray: #68b0fe; // 入力ボックスの色を青に変更します

入力フォーム全体の背景色を設定します。

  .el-form-item { 
    border: 1pxソリッド rgba(255, 255, 255, 0.1);
    背景: rgba(255, 255, 255, 0.7); // ログインフォームの背景色を入力します
    border-radius: 5px; 
    color : #454545; 
  }

エラーメッセージの色を設定する

.el-form-item__error { 
    color: #fff 
  }

ログインボタンのスタイルを設定する

el-buttonにloginBtnクラススタイルを追加する必要があります

.loginBtn {
  背景: #407ffe; 
  高さ: 64ピクセル; 
  行の高さ: 32px; 
  フォントサイズ: 24px; 
}

表示されるプロンプトテキストとログインテキストを変更する

   <div class="tips"> 
        <span style="margin-right:20px;">アカウント: 13800000002</span> 
        <span> パスワード: 123456</span> 
   </div>

上記の変更後、比較的完成したログインページが完成しました。

説明: 私たちのプロジェクトの焦点は、Vue 中間段階のプロジェクトで適用されているテクノロジーをさらに導入することです。そのため、詳細すぎる一部のスタイルやレイアウトについては、成形コードを直接貼り付けるかコピーする方法を使用しており、学生はより詳細に学ぶことができます。それについては授業後に練習してください

コードを送信する

本节注意:@これは、vue.config.js で設定したパスエイリアスで、src ルートディレクトリを指定するため、ファイルを見つけるのに非常に便利です

本节任务: ログインホームページの基本レイアウトを完成させます

ログインフォームの検証

目标ログインフォームを確認する

基本テンプレートにはすでに基本的な検証コードが含まれているため、この章では改訂と改善について説明します。

el-form フォーム検証の前提条件

携帯電話番号とパスワードの認証

フィールド名の対応

なぜ対応する必要があるのかというと、基本テンプレートではusernameフィールドを使用していますが、実際のインターフェースではmobileフィールドを使用しているため、よりコードを書きやすくするために、username次のように変更します。mobile

フィールド名に加えて、ルール検証名とプロパティ名もあります。

英語のプロンプトが中国語になる

基本テンプレートのplaceHolderのプレースホルダーは英語なので、中国語に変更する必要があります。

ログインボタンのテキストも中国語に置き換える必要があります

電話番号の確認とパスワードの確認

基本テンプレートでは検証が行われ、コードの最適化が行われました。

新しいルール: 携帯電話番号が必須で、形式がチェックされ、パスワードが必須で、長さは 6 ～ 16 文字です。

data() { 
    // カスタム検証関数
    const validateMobile = function(rule, value, callback) { 
      // 値を検証
      // if (validMobile(value)) { 
      // // 直接渡された場合はコールバックを実行
      // callback () 
      / / } else { 
      // callback(new Error('携帯電話番号の形式が正しくありません')) 
      // } 
      validMobile(value) ? callback() : callback(new Error('携帯電話番号の形式は次のとおりです間違っています')) 
    } 
return
    { 
      loginForm: { 
        mobile: '13800000002',
        パスワード: '123456' 
      }, 
      loginRules: { 
        mobile: [{ required: true, トリガー: 'blur', message: '電話番号を空にすることはできません' }、{
          バリデーター: validateMobile、トリガー: 'blur' 
        }],
        パスワード: [{ 必須: true、トリガー: 'blur'、メッセージ: 'パスワードを空にすることはできません' }、{
          最小: 6、最大: 16、メッセージ: 'パスワードは 6 ～ 16 桁です'、トリガー: 'blur' 
        }] 
      }、
      読み込み: false、
      passwordType: 'password'、
      リダイレクト: 未定義
    } 
  }、

utils/validate.jsメソッドに携帯電話番号を認証するメソッドを追加しました

/** 
 * 携帯電話番号を確認します
 * **/ 
export function validMobile(str) { 
  return /^1[3-9]\d{9}$/.test(str) // 携帯電話番号を確認します
}

utils/validate.js検証ツールのメソッドを格納する専用のファイルです

修飾子について

修飾子について

このページでは、イベントの修飾子がいくつか見つかりました。@keyup.enter.native @click.native.prevent

@keyup. はenterキー修飾子に属しており、Enter キーが押されたときのトリガーをリッスンしたい場合は、次のように記述できます。

<!-- `key` が `Enter` の場合のみ `vm.submit()` を呼び出します --> 
<input v-on:keyup.enter="submit">

@keyup.enter.nativeリスニングコンポーネントのネイティブイベントを示します。たとえば、keyup は入力のネイティブイベントです。ここでネイティブと書くことは、keyup がネイティブイベントであることを意味します

コードを送信 本次任务: ログインしているユーザーの携帯電話番号とパスワードの認証を実現します