通用vue组件化登录页面实例代码
目录
一、首页设置大体的样式布局
1.首先建立一个login文件夹，在里面建立对应的login.vue文件
2.设置登录页面的背景图，在App.vue文件中使用router-view进行展示登录组件
3.先给App.vue的div元素设置高度100%，之后在login.vue里面去设置背景图
App.vue
五、对登录进行验证以及校验
1.先给点击登录按钮绑定点击事件
2.然后在对应的组件里面也绑定对应的事件
3.利用ts语法拿到账号登录组件
4.在账号登录组件里面拿到对应的表单验证的布尔值，当点击登录触发事件时，判断布尔值，决定是否能够登录成功
login-panel.vue
// 拿到对应的组件LoginAccount
const accountRef = ref
// 2.定义方法
const handleLoginClick = () => {
if (currentTab.value === "account") {
// 为什么加？,是因为确保一开始是没有值的，这里就是表示可由可无
accountRef.value?.loginAction(isKeepPassword.value)
} else {
console.log("phoneRef调用loginAction")
}
}
login-ccount.vue
// formRe拿到上面的表单，InstanceType泛型
const formRef = ref
const loginAction = (isKeepPassword: boolean) => {
// 拿到formRe.value，即表单的对应数据，validate，拿到表单对应的验证值（布尔值)
formRef.value?.validate((valid) => {
console.log(valid)
})
}
六、LocalCache账号密码的本地存储
1.首先建立一个util文件夹，然后里面写LocalCache的getCache这些方法
2.然后在login-account.vue里面根据点击登录之后是否记住密码的布尔值去 localCache.setCache("name", account.name)
login-account.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 })
}
})
}
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.首先先创建一个store文件夹，里面分别有index.ts和type.ts，还有login对应的login.ts和type.ts
2.安装vuex:npm install vuex --save
3.开始写vuex模块，首先先写根store,里面注册对应的login模块
import { createStore, Store, useStore as useVuexStore } from 'vuex'
import login from 'http://www.jb51.net/javascript/login/login'
import { IRootState, IStoreType } from 'http://www.jb51.net/javascript/types'
//IRootState根store类型
const store = createStore
state() {
return {
name: 'ZJE',
age: 18,
}
},
mutations: {
},
getters: {},
actions: {
},
modules: {
login,
}
})
export default store
4.开始在login.ts里面写点击登录时触发的事件
login.ts
import { Module } from 'vuex'
import localCache from '@/utils/cache'
import router from '@/router'
import { ILoginState } from 'http://www.jb51.net/javascript/types'
import { IRootState } from 'http://www.jb51.net/types'
// ILoginState模块的store类型，IRootState根store类型
const loginModule: Module
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
}
login-account.vue
5.在state里面开始发送请求接口函数，然后把登录成功获取的data存储在本地localCache,同时也将数据存储在vuex里面
总结
到此这篇关于通用vue组件化登录页面的文章就介绍到这了,更多相关vue组件化登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: