[vue3] 实现登录页面不使用整体框架

✨✨博主简介:一个会bbox的‍

✨✨个人主页:沫洺的主页

 系列专栏:  JavaWeb专栏 JavaSE专栏  Java基础专栏vue3专栏

如果文章对你有所帮助请留下三连✨✨

效果图

实现内容

• ElementPuls页面布局(上上上章)
• 动态菜单显示(上上上章)
• 实现菜单折叠效果(上上章)
• 实现部分页面不使用整体框架(本章)
• 统一页面导航标签(上一章)

登录页面不使用整体框架

实现思路:

• 登录页面不使用整体框架,也就是不使用ElementPuls页面布局,且在菜单项中不显示,在页面右上角退出登录会跳转到登录页面,编写登录页面,简单实现登录成功事件

新建src/views/user/UserLogin.vue

UserLogin.vue

添加路由

    {
        path: '/login',
        name: 'login',
        component: () => import("@/views/user/UserLogin.vue"),
        meta: { title: "登录", icon: "Setting" }
    }

来看效果

接下来解决菜单项中不显示登录菜单

在路由中添加一个属性,show为true时在菜单项中显示,为false则不显示

 在Menu.vue中添加一个判断条件

 看效果

 同理也可以通过类似的方式进行是否使用框架的判断,在路由中给每个路由设置一个新的属性useFrame

通过路径访问,实现login页面没有使用框架的效果

 点击退出登录,跳转到登录页面

在退出系统这里添加一个点击事件,导入路由,通过路由进行跳转页面

这样点击退出就会跳转到登录页面了 

制作登录页面

接下来就是编写一个简单的登录页面

UserLogin.vue

表单校验

参考饿了么plus表单校验的代码进行简单的校验

UserLogin.vue

 效果图(注意这里没有和后端进行关联,所以只要格式满足要求,即可登录成功,跳转后台页面)

解释说明校验的格式基本上是一成不变的,需要改动的地方也就是在第4步中校验的方式

表单验证具体步骤:

1. import type { FormInstance, FormRules } from 'element-plus'

2. :rules="rules"
3. ref="ruleFormRef"
4. const rules = reactive({大括号中这里写校验方式,校验的表单和第5步一致})
5. prop="email" prop="password"(名字可自定义,见名知意)
6. const ruleFormRef = ref()
7. @click="submitForm(ruleFormRef)"
8. @click="resetForm(ruleFormRef)"

9. 登录和重置方法定义

校验成功进行路由跳转

登录成功弹出消息提示框

总结说明

到此有关使用ElementPuls页面布局搭建架子的流程就基本完成了,接下来就是和后端进行交互,通过接口进行前后的整合

下一章将使用登录页面进行和后端数据库接口的关联,实现登录成功后页面右上角游客位置显示用户名