通用vue組件化登錄頁面實(shí)例代碼

更新時間：2023年08月28日 09:06:17 作者：七小山

這篇文章主要給大家介紹了關(guān)于通用vue組件化登錄頁面的相關(guān)資料,文中通過圖文以及實(shí)例代碼將解決的辦法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

一、首頁設(shè)置大體的樣式布局

1.首先建立一個login文件夾，在里面建立對應(yīng)的login.vue文件

2.設(shè)置登錄頁面的背景圖，在App.vue文件中使用router-view進(jìn)行展示登錄組件

3.先給App.vue的div元素設(shè)置高度100%，之后在login.vue里面去設(shè)置背景圖

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">
/* 先將主面板設(shè)置寬度，之后再去設(shè)置對應(yīng)的組件login */
.app {
  height: 100%;
}
</style>

這里注意怎么使login組件垂直水平居中的樣式

<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 {
  /* 實(shí)現(xiàn)水平垂直居中 */
  /* **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>

二、開始使用組件化引用

1.首先建立一個cpns的文件夾，里面有一個login-panel.vue文件

2.之后在login.vue文件中引用這個組件

3.將登錄頁面的組件代碼封裝在login-panel.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 {
  /* 實(shí)現(xiàn)水平垂直居中 */
  /* **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>

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

三.開始編寫中間登錄界面的主要代碼

1.首先去element-plus官網(wǎng)找適合的模板樣式，之后直接copy到login-panel.vue組件中，分別給對應(yīng)的登添加相應(yīng)的icon圖標(biāo)

（1）首先先安裝npm install @element-plus/icons

（2）之后復(fù)制相應(yīng)的圖標(biāo)代碼avatar

（3）新的icon需要有一層el-icon去包裹才能生效

<el-icon style="vertical-align: middle"
? ? ? ? ? ? ? ? ><avatar class="tubiao"
? ? ? ? ? ? ? /></el-icon>

（4）在對應(yīng)的文件里面引用相應(yīng)的文件，還得同時注冊一下組件

import { Avatar, Cellphone } from "@element-plus/icons"
? components: {
? ? Avatar,
? ? Cellphone,
? }

2.建立賬號登錄和手機(jī)登錄的兩個組件文件login-account.vue和login-phone.vue

3.將封裝好的組件引用到login-panel.vue對應(yīng)的地方

<template>
  <div class="login-panel">
    <h1 class="title">后臺管理系統(tǒng)</h1>
    <!-- stretch這個是設(shè)置是否自適應(yīng)寬度 -->
    <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
              >手機(jī)登錄</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 {
    /* 使標(biāo)題居中 */
    text-align: center;
  }
  .account-control {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>

四、分別在對應(yīng)的文件里面寫對應(yīng)的文本框login-account.vue和login-phone.vue

(1)login-account.vue

首先先選擇合適的文本框
然后編寫相應(yīng)的響應(yīng)式數(shù)據(jù)
編寫相應(yīng)的規(guī)則校驗(yàn)

<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: ""
    })
    // 編寫規(guī)則
    const rules = {
      name: [
        {
          // 是否是必傳
          required: true,
          message: "用戶名是必傳內(nèi)容",
          // 失去焦點(diǎn)是判斷是否符合要求規(guī)則
          trigger: "blur"
        },
        {
          pattern: /^[a-z0-9]{5,10}$/,
          message: "用戶名必須是5-10個字母或者數(shù)字",
          trigger: "blur"
        }
      ],
      password: [
        {
          required: true,
          message: "密碼是必傳內(nèi)容",
          trigger: "blur"
        },
        {
          pattern: /^[a-z0-9]{3,}$/,
          message: "密碼必須是3位以上的字母或者數(shù)字",
          trigger: "blur"
        }
      ]
    }
    return {
      account,
      rules
    }
  }
})
</script>
<style lang="less" scoped></style>

為了使代碼具有簡潔性，可以選擇把規(guī)則校驗(yàn)抽離到一個單獨(dú)的文件account-config.ts中，之后可以選擇把那些沒有響應(yīng)的數(shù)據(jù)單獨(dú)抽離到一個配置文件，然后再引用進(jìn)來

account-config.ts

// 編寫規(guī)則
export const rules = {
  name: [
    {
      required: true,
      message: '用戶名是必傳內(nèi)容',
      // 失去焦點(diǎn)是判斷是否符合要求規(guī)則
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '用戶名必須是5-10個字母或者數(shù)字',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密碼是必傳內(nèi)容',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '密碼必須是3位以上的字母或者數(shù)字',
      trigger: 'blur'
    }
  ]
}

<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)login-phone.vue

具體和賬號登錄一樣的步驟

首先先選擇合適的文本框
然后編寫相應(yīng)的響應(yīng)式數(shù)據(jù)
編寫相應(yīng)的規(guī)則校驗(yàn)

verify-code-config.ts

// 編寫規(guī)則
export const rules = {
  phone: [
    {
      required: true,
      message: '手機(jī)是必傳內(nèi)容',
      // 失去焦點(diǎn)是判斷是否符合要求規(guī)則
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '手機(jī)號必須是5-10個字母或者數(shù)字',
      trigger: 'blur'
    }
  ],
  verifycode: [
    {
      required: true,
      message: '驗(yàn)證碼是必傳內(nèi)容',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '驗(yàn)證必須是3位以上的字母或者數(shù)字',
      trigger: 'blur'
    }
  ]
}

<template>
  <div>
    <!--  :model="account"將下面的input的最新的值給傳給form，如何進(jìn)行驗(yàn)證-->
    <el-form label-width="70px" :rules="rules" :model="shouji">
      <el-form-item label="手機(jī)號" prop="phone">
        <el-input v-model="shouji.phone"></el-input>
      </el-form-item>
      <el-form-item label="驗(yàn)證碼" prop="verifycode">
        <div class="get-code">
          <el-input v-model="shouji.verifycode"></el-input>
          <el-button type="primary" class="get-bin">獲取驗(yàn)證碼</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>

五、對登錄進(jìn)行驗(yàn)證以及校驗(yàn)

1.先給點(diǎn)擊登錄按鈕綁定點(diǎn)擊事件

2.然后在對應(yīng)的組件里面也綁定對應(yīng)的事件

3.利用ts語法拿到賬號登錄組件

4.在賬號登錄組件里面拿到對應(yīng)的表單驗(yàn)證的布爾值，當(dāng)點(diǎn)擊登錄觸發(fā)事件時，判斷布爾值，決定是否能夠登錄成功

  // 拿到對應(yīng)的組件LoginAccount
    const accountRef = ref<InstanceType<typeof LoginAccount>>()
    // 2.定義方法
    const handleLoginClick = () => {
      if (currentTab.value === "account") {
        // 為什么加？,是因?yàn)榇_保一開始是沒有值的，這里就是表示可由可無
        accountRef.value?.loginAction(isKeepPassword.value)
      } else {
        console.log("phoneRef調(diào)用loginAction")
      }
    }

 <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，即表單的對應(yīng)數(shù)據(jù)，validate，拿到表單對應(yīng)的驗(yàn)證值（布爾值)
      formRef.value?.validate((valid) => {
        console.log(valid)
      })
    }

六、LocalCache賬號密碼的本地存儲

1.首先建立一個util文件夾，然后里面寫LocalCache的getCache這些方法

2.然后在login-account.vue里面根據(jù)點(diǎn)擊登錄之后是否記住密碼的布爾值去 localCache.setCache("name", account.name)

 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.開始進(jìn)行登錄驗(yàn)證
          store.dispatch("login/accountLoginAction", { ...account })
        }
      })
    }

cache.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()

七、賬號登錄的Vuex使用

1.首先先創(chuàng)建一個store文件夾，里面分別有index.ts和type.ts，還有l(wèi)ogin對應(yīng)的login.ts和type.ts

2.安裝vuex:npm install vuex --save

3.開始寫vuex模塊，首先先寫根store,里面注冊對應(yīng)的login模塊

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里面寫點(diǎn)擊登錄時觸發(fā)的事件

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 })會調(diào)用這里
    async accountLoginAction({ commit }, payload: any) {
      console.log("執(zhí)行accountLoginAction", payload)
    }
  }
}
export default loginModule

type.ts

export interface ILoginState {
  token: string
  userInfo: any
}

5.在state里面開始發(fā)送請求接口函數(shù)，然后把登錄成功獲取的data存儲在本地localCache,同時也將數(shù)據(jù)存儲在vuex里面

總結(jié)

到此這篇關(guān)于通用vue組件化登錄頁面的文章就介紹到這了,更多相關(guān)vue組件化登錄頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通用vue組件化登錄頁面實(shí)例代碼

目錄

一、首頁設(shè)置大體的樣式布局

二、開始使用組件化引用

三.開始編寫中間登錄界面的主要代碼

四、分別在對應(yīng)的文件里面寫對應(yīng)的文本框login-account.vue和login-phone.vue

(1)login-account.vue

(2)login-phone.vue

五、對登錄進(jìn)行驗(yàn)證以及校驗(yàn)

六、LocalCache賬號密碼的本地存儲

七、賬號登錄的Vuex使用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通用vue組件化登錄頁面實(shí)例代碼

目錄

一、首頁設(shè)置大體的樣式布局

二、開始使用組件化引用

三.開始編寫中間登錄界面的主要代碼

四、分別在對應(yīng)的文件里面寫對應(yīng)的文本框login-account.vue和login-phone.vue

(1)login-account.vue

(2)login-phone.vue

五、對登錄進(jìn)行驗(yàn)證以及校驗(yàn)

六、LocalCache賬號密碼的本地存儲

七、賬號登錄的Vuex使用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

二、開始使用組件化引用

四、分別在對應(yīng)的文件里面寫對應(yīng)的文本框login-account.vue和login-phone.vue

五、對登錄進(jìn)行驗(yàn)證以及校驗(yàn)

七、賬號登錄的Vuex使用