Universal vueのコンポーネント化されたログインページ

1. ホームページの一般的なスタイル レイアウトを設定します。

1. まずログインフォルダーを作成し、その中に対応するlogin.vueファイルを作成します。

2. ログイン ページの背景画像を設定し、App.vue ファイルの router-view を使用してログイン コンポーネントを表示します。

3. まずApp.vueのdiv要素の高さを100%に設定し、次にlogin.vueに背景画像を設定します。

app.vue

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: "App"
})
</script>

<style lang="less">
/* 先将主面板设置宽度，之后再去设置对应的组件login */
.app {
  height: 100%;
}
</style>

login.vue

ここで、ログインコンポーネントを縦横中央揃えにする方法に注目してください。

<template>
  <div class="login">login</div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "login"
})
</script>
<style lang="less" scoped>
.login {
  /* 实现水平垂直居中 */
  /* **display：flex**布局 justify-content定义水平方向的元素位置,align-items定义垂直方向的元素位置 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/login-bg.svg);
}
</style>

 2. コンポーネント化された参照の使用を開始する

1. まず、login-panel.vue ファイルを含む cpns フォルダーを作成します。

2. 次に、login.vue ファイルでこのコンポーネントを参照します。

3. ログインページのコンポーネントコードをlogin-panel.vueにカプセル化します。

login.vue

<template>
  <div class="login">
//引用组件
    <login-panel></login-panel>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import LoginPanel from "./cpns/login-panel.vue"
export default defineComponent({
//注册组件
  components: {
    LoginPanel
  }
})
</script>
<style lang="less" scoped>
.login {
  /* 实现水平垂直居中 */
  /* **display：flex**布局 justify-content定义水平方向的元素位置,align-items定义垂直方向的元素位置 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../../assets/img/login-bg.svg);
}
</style>

 ログインパネル.vue

<template>
  <div class="login-panel">
    <h1>后台管理系统</h1>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "login-panel"
})
</script>
<style lang="less" scoped></style>

 3. 中間ログインインターフェイスのメインコードの作成を開始します。

1. まず、element-plus の公式 Web サイトにアクセスして適切なテンプレート スタイルを見つけ、それを login-panel.vue コンポーネントに直接コピーし、対応するアイコンを対応するログインに追加します。

(1) まずはnpm install @element-plus/iconsをインストールします

(2) 次に、対応するアイコンコードのアバターをコピーします。

(3) 新しいアイコンを有効にするには、el-icon のレイヤーでラップする必要があります

<el-icon style="vertical-align: middle"

                ><アバタークラス="トゥビアオ"

              /></el-icon>

(4) 該当ファイル内の該当ファイルを参照し、同時にコンポーネントを登録します

import { アバター、携帯電話 } from "@element-plus/icons"

  コンポーネント: {

    アバター、

    携帯電話、

  }

2. アカウント ログインと携帯電話ログイン用の 2 つのコンポーネント ファイルlogin-account.vue とlogin-phone.vueを作成します。

3. カプセル化されたコンポーネントを、login-panel.vue の対応する場所に参照します。

<template>
  <div class="login-panel">
    <h1 class="title">后台管理系统</h1>
    <!-- stretch这个是设置是否自适应宽度 -->
    <el-tabs type="border-card" class="demo-tabs" stretch>
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span>
              <el-icon style="vertical-align: middle"
                ><avatar class="tubiao"
              /></el-icon>
              账号登录</span
            >
          </span>
        </template>
        <login-account></login-account>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span
              ><el-icon style="vertical-align: middle"
                ><cellphone class="tubiao" /></el-icon
              >手机登录</span
            >
          </span>
        </template>
        <login-phone></login-phone>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { Avatar, Cellphone } from "@element-plus/icons"
import LoginPhone from "./login-phone.vue"
import LoginAccount from "./login-account.vue"

export default defineComponent({
  name: "login-panel",
  components: {
    Avatar,
    Cellphone,
    LoginPhone,
    LoginAccount
  }
})
</script>
<style lang="less" scoped>
.login-panel {
  margin-bottom: 100px;
  width: 320px;
  .title {
    /* 使标题居中 */
    text-align: center;
  }
  .account-control {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>

4. 対応するファイルに、対応するテキスト ボックスlogin-account.vueとlogin-phone.vueをそれぞれ書き込みます。 

(1)ログインアカウント.vue

• まず適切なテキストボックスを選択します
• 次に、対応する応答データを書き込みます
• 対応するルールチェックを書きます

<template>
  <div class="login-account">
    <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue"

export default defineComponent({
  name: "login-account",
  components: {},
  setup() {
    const account = reactive({
      name: "",
      password: ""
    })
    // 编写规则
    const rules = {
      name: [
        {
          // 是否是必传
          required: true,
          message: "用户名是必传内容",
          // 失去焦点是判断是否符合要求规则
          trigger: "blur"
        },
        {
          pattern: /^[a-z0-9]{5,10}$/,
          message: "用户名必须是5-10个字母或者数字",
          trigger: "blur"
        }
      ],
      password: [
        {
          required: true,
          message: "密码是必传内容",
          trigger: "blur"
        },
        {
          pattern: /^[a-z0-9]{3,}$/,
          message: "密码必须是3位以上的字母或者数字",
          trigger: "blur"
        }
      ]
    }
    return {
      account,
      rules
    }
  }
})
</script>
<style lang="less" scoped></style>

コードを簡潔にするために、ルールの検証を別のファイル account-config.ts に分離することを選択できます。次に、応答しないデータを構成ファイルに分離して、それを参照することを選択できます。

アカウント構成.ts

// 编写规则
export const rules = {
  name: [
    {
      required: true,
      message: '用户名是必传内容',
      // 失去焦点是判断是否符合要求规则
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '用户名必须是5-10个字母或者数字',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码是必传内容',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '密码必须是3位以上的字母或者数字',
      trigger: 'blur'
    }
  ]
}

ログインアカウント.vue

<template>
  <div class="login-account">
    <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password />
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue"
import { rules } from "../config/account-config"

export default defineComponent({
  name: "login-account",
  components: {},
  setup() {
    const account = reactive({
      name: "",
      password: ""
    })

    return {
      account,
      rules
    }
  }
})
</script>
<style lang="less" scoped></style>

(2)ログイン電話.vue 

具体的な手順はアカウントログインと同じです

• まず適切なテキストボックスを選択します
• 次に、対応する応答データを書き込みます
• 対応するルールチェックを書きます

コード構成の検証.ts

// 编写规则
export const rules = {
  phone: [
    {
      required: true,
      message: '手机是必传内容',
      // 失去焦点是判断是否符合要求规则
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '手机号必须是5-10个字母或者数字',
      trigger: 'blur'
    }
  ],
  verifycode: [
    {
      required: true,
      message: '验证码是必传内容',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '验证必须是3位以上的字母或者数字',
      trigger: 'blur'
    }
  ]
}

ログイン-電話.vue

<template>
  <div>
    <!--  :model="account"将下面的input的最新的值给传给form，如何进行验证-->
    <el-form label-width="70px" :rules="rules" :model="shouji">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="shouji.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verifycode">
        <div class="get-code">
          <el-input v-model="shouji.verifycode"></el-input>
          <el-button type="primary" class="get-bin">获取验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue"
import { rules } from "../config/verify-code-config.ts"
export default defineComponent({
  setup() {
    const shouji = reactive({
      phone: "",
      verifycode: ""
    })
    return {
      shouji,
      rules
    }
  }
})
</script>
<style scoped>
.get-code {
  display: flex;
}
.get-bin {
  margin-left: 8px;
}
</style>

 5. ログインの確認と検証

1. まず、クリック イベントをクリック ログイン ボタンにバインドします。

2. 次に、対応するイベントを対応するコンポーネントにバインドします。

3. ts 構文を使用してアカウント ログイン コンポーネントを取得します。

4. アカウントログインコンポーネント内の対応するフォーム認証のブール値を取得し、ログイントリガーイベントがクリックされた際に、そのブール値を判定してログインが成功したかどうかを判定します。

ログインパネル.vue

  // 拿到对应的组件LoginAccount
    const accountRef = ref<InstanceType<typeof LoginAccount>>()
    // 2.定义方法
    const handleLoginClick = () => {
      if (currentTab.value === "account") {
        // 为什么加？,是因为确保一开始是没有值的，这里就是表示可由可无
        accountRef.value?.loginAction(isKeepPassword.value)
      } else {
        console.log("phoneRef调用loginAction")
      }
    }

ログインアカウント.vue

 <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password />
      </el-form-item>
    </el-form>

  // formRe拿到上面的表单，InstanceType泛型
    const formRef = ref<InstanceType<typeof ElForm>>()

    const loginAction = (isKeepPassword: boolean) => {
      // 拿到formRe.value，即表单的对应数据，validate，拿到表单对应的验证值（布尔值)
      formRef.value?.validate((valid) => {
        console.log(valid)
      })
    }

 6. LocalCache アカウントパスワードのローカルストレージ

1. まず util フォルダーを作成し、その中に LocalCache の getCache メソッドを記述します。

2. 次に、ログインをクリックした後にパスワードを記憶するかどうかのブール値に従って、login-account.vue の localCache.setCache("name", account.name) に移動します。

ログインアカウント.vue

 const loginAction = (isKeepPassword: boolean) => {
      formRef.value?.validate((valid) => {
        if (valid) {
          // 1.判断是否需要记住密码
          if (isKeepPassword) {
            // 本地缓存
            localCache.setCache("name", account.name)
            localCache.setCache("password", account.password)
          } else {
            localCache.deleteCache("name")
            localCache.deleteCache("password")
          }

          // 2.开始进行登录验证
          store.dispatch("login/accountLoginAction", { ...account })
        }
      })
    }

キャッシュ.ts

class LocalCache {
  setCache(key: string, value: any) {
    window.localStorage.setItem(key, JSON.stringify(value))
  }
  getCache(key: string) {
    // obj->string->obj
    const value = window.localStorage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }
  deleteCache(key: string) {
    window.localStorage.removeItem(key)
  }
  clearCache() {
    window.localStorage.clear()
  }
}
export default new LocalCache()

7. アカウントログインに Vuex を使用する

1. まず、ストア フォルダーを作成します。このフォルダーには、それぞれ、index.ts と type.ts、およびログインに対応する login.ts と type.ts が含まれます。

2. vuex をインストールします: npm install vuex --save

3. vuex モジュールの作成を開始します。まずルート ストアを作成し、それに対応するログイン モジュールを登録します。

import { createStore, Store, useStore as useVuexStore } from 'vuex'
import login from './login/login'
import { IRootState, IStoreType } from './types'
//IRootState根store类型
const store = createStore<IRootState>({
  state() {
    return {
      name: 'ZJE',
      age: 18,

    }
  },
  mutations: {
  },
  getters: {},
  actions: {
  },
  modules: {
    login,

  }
})

export default store

4. 「ログイン」をクリックしたときにトリガーされるイベントをlogin.tsに書き始めます。

ログイン.ts

import { Module } from 'vuex'
import localCache from '@/utils/cache'
import router from '@/router'
import { ILoginState } from './types'
import { IRootState } from '../types'
// ILoginState模块的store类型，IRootState根store类型
const loginModule: Module<ILoginState, IRootState> = {
  namespaced: true,
  state() {
    return {
      token: '',
      userInfo: {}

    }
  },
  getters: {},
  mutations: {

  },
  actions: {
    //  store.dispatch("login/accountLoginAction", { ...account })会调用这里
    async accountLoginAction({ commit }, payload: any) {
      console.log("执行accountLoginAction", payload)
    }
  }
}
export default loginModule

type.ts

export interface ILoginState {
  token: string
  userInfo: any

}

ログインアカウント.vue

 

 5. ステートでリクエストインターフェイス関数の送信を開始し、ログイン成功で取得したデータをローカルの localCache に保存し、さらに vuex にもデータを保存します