简单的做网站软件有啥,小制作小发明小论文,wordpress ueditor 百度编辑器,wordpress 装饰主题10vue3实战-----实现登录的基本功能 1.基本页面的搭建2.账号登录的验证规则配置3.点击登录按钮4.表单的校验5.账号的登录逻辑和登录状态保存6.定义IAccount对象类型 1.基本页面的搭建
大概需要搭建成这样子的页面: 具体的搭建界面就不多讲。各个项目都有自己的登录界面#… 10vue3实战-----实现登录的基本功能 1.基本页面的搭建2.账号登录的验证规则配置3.点击登录按钮4.表单的校验5.账号的登录逻辑和登录状态保存6.定义IAccount对象类型 1.基本页面的搭建
大概需要搭建成这样子的页面: 具体的搭建界面就不多讲。各个项目都有自己的登录界面搭建方法大同小异这是基础在这不做赘叙。
2.账号登录的验证规则配置
直接使用element-plus中现成的表单校验功能。 template:
templatediv classpane-accountel-form:modelaccount:rulesaccountRuleslabel-width60pxsizelargestatus-iconrefformRefel-form-item label帐号 propnameel-input v-modelaccount.name //el-form-itemel-form-item label密码 proppasswordel-input v-modelaccount.password show-password //el-form-item/el-form/div
/templatescript
script setup langts
import { reactive} from vue
import type { FormRules} from element-plus
// 1.定义account数据
const account reactive({name: ,password:
})
// 2.定义校验规则
//这里accountRules不需要用reactive进行响应式因为一般不会改变。
const accountRules: FormRules {name: [{ required: true, message: 必须输入帐号信息~, trigger: blur },{pattern: /^[a-z0-9]{6,20}$/,message: 必须是6~20数字或字母组成~,trigger: blur}],password: [{ required: true, message: 必须输入密码信息~, trigger: blur },{pattern: /^[a-z0-9]{3,}$/,message: 必须是3位以上数字或字母组成,trigger: blur}]
}
/script3.点击登录按钮
上面的登录界面把它封装成了多个组件。登录模块目录结构如下: 如上,Login.vue有一个login-panel登录面板子组件登录面板组件下有pane-account和pane-phone两个子组件。 这里“立即登录”按钮是在login-panel组件中点击按钮后需要用到账号和密码的信息但他们都在子组件。有一种方法是把子组件传到父组件还有一种方法是login-panel父组件中调用子组件的方法。这里我用第二种方法: 以账号登录为例子组件pane-account文件:
script setup langts
import { reactive, ref } from vue
// 1.定义account数据
const account reactive({name: ,password:
})
...
// 3.执行帐号的登录逻辑
function loginAction() {console.log(用户正在登录,account.name,account.password);
}
//一定要暴露出来父组件才能使用子组件的方法:
defineExpose({loginAction
})
/script父组件login-panel.vue文件:
script setup langts
import { ref } from vue
import PaneAccount from ./pane-account.vue
import PanePhone from ./pane-phone.vueconst activeName ref(account)
//下面这行代码要特别注意经常会用到
//一般都是用InstanceTypetypeof xxx这种方法
//这里最好不要const accountRef refany()
//虽然万事都可以any,但那样子的话就没有相关提示了
const accountRef refInstanceTypetypeof PaneAccount()
//点击登录按钮
function handleLoginBtnClick() {if (activeName.value account) {//简写方式accountRef存在才执行accountRef.value.loginAction()accountRef.value?.loginAction()} else {console.log(用户在进行手机登录)}
}
/script4.表单的校验
子组件pane-account文件:
script setup langts
import { reactive, ref } from vue
import { ElMessage } from element-plus
import type { FormRules, ElForm } from element-plus
// 1.定义account数据
const account reactive({name: ,password:
})
...
// 3.执行帐号的登录逻辑
//这个与上面的accountRef是一样的道理
const formRef refInstanceTypetypeof ElForm()
function loginAction() {formRef.value?.validate((valid) {if (valid) {console.log(验证成功,登录的操作)} else {ElMessage.error(Oops, 请您输入正确的格式后再操作~~.)}})
}defineExpose({loginAction
})
/script5.账号的登录逻辑和登录状态保存
首先要封装一下登录的网络接口: 在service文件夹中新建main和login模块: service/login/login.ts
import hyRequest from ..
//这里account类型暂时为any,后面再处理
export function accountLoginRequest(account: any) {return hyRequest.post({url: /login,data: account})
}登录之后需要把用户信息保存到pinia中,所以在store里面也要新建login和main模块来处理相关业务: store/login/login.ts:
import { defineStore } from pinia
import { accountLoginRequest } from /service/login/login
const useLoginStore defineStore(login, {state: () ({id: ,token:,name: }),actions: {//account暂时为any,后面会再进行处理async loginAccountAction(account: any) {// 1.账号登录, 获取token等信息const loginResult await accountLoginRequest(account)this.id loginResult.data.idthis.name loginResult.data.namethis.token loginResult.data.token...}}
})export default useLoginStorepinia中的数据一刷新就会消失,下一章节将会解决该问题https://blog.csdn.net/fageaaa/article/details/145532580。
6.定义IAccount对象类型
在上面很多文件里面都用到了一个对象里面包含有账号和密码,但给它的类型都是any: 这样子是不好的。我们可以把account的类型提取出来放在一个文件中。 在src中新建一个types文件夹: types/login.ts
export interface IAccount {name: stringpassword: string
}types/index.ts export * from ./login然后在需要的文件中引入:
