Vue.js 3开发基础与实战课件 第十二章 项目实战：电商后台管理系统.pptVIP

编写登录页面3．编写页面逻辑为了使代码更加简洁、可重用、方便将相同逻辑代码放在一起易于维护，可以将大部分代码放在setup函数中编写。对于登录页面，主要逻辑包括数据绑定、表单校验和登录行为。如下程序所示。编写登录页面编写登录页面上述代码中，使用scriptsetup标签实现了跟setup函数相同的效果。其中，loginRules与el-form的rules属性绑定，定制了表单的校验规则。doLogin函数是登录行为，在执行登录前通过loginFormRef的validate方法进行表单校验。然后，通过定义好的loginApi调用登录的API接口。在异步调用API的过程中，使用了async和await来处理异步行为。根据接口返回的code判断登录是否成功，如果成功，将登录状态、用户信息和token凭证存储到store中，并通过路由跳转到/home页面。如果登录失败，则进行错误提示处理。温馨提示在scriptsetup中通过import的组件可以直接使用到template中，如果是选项式API组件需要在components中进行注册才能使用。编写登录页面4．配置登录路由和登录拦截当编写完登录页面后，需要在路由列表中配置登录页面的路由。并且要在路由的前置守卫中配置未登录行