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

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

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

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

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

效果图

[vue3] 实现登录页面不使用整体框架_第1张图片

[vue3] 实现登录页面不使用整体框架_第2张图片

实现内容

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

登录页面不使用整体框架

实现思路:

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

新建src/views/user/UserLogin.vue

UserLogin.vue


添加路由

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

[vue3] 实现登录页面不使用整体框架_第3张图片

来看效果

[vue3] 实现登录页面不使用整体框架_第4张图片

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

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

[vue3] 实现登录页面不使用整体框架_第5张图片

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

[vue3] 实现登录页面不使用整体框架_第6张图片

 看效果

[vue3] 实现登录页面不使用整体框架_第7张图片

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

[vue3] 实现登录页面不使用整体框架_第8张图片

[vue3] 实现登录页面不使用整体框架_第9张图片

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

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

[vue3] 实现登录页面不使用整体框架_第10张图片

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

[vue3] 实现登录页面不使用整体框架_第11张图片

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

制作登录页面

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

UserLogin.vue




[vue3] 实现登录页面不使用整体框架_第12张图片

表单校验

[vue3] 实现登录页面不使用整体框架_第13张图片

[vue3] 实现登录页面不使用整体框架_第14张图片

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

UserLogin.vue




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

[vue3] 实现登录页面不使用整体框架_第15张图片

[vue3] 实现登录页面不使用整体框架_第16张图片解释说明校验的格式基本上是一成不变的,需要改动的地方也就是在第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. 登录和重置方法定义

[vue3] 实现登录页面不使用整体框架_第17张图片

[vue3] 实现登录页面不使用整体框架_第18张图片[vue3] 实现登录页面不使用整体框架_第19张图片

校验成功进行路由跳转

[vue3] 实现登录页面不使用整体框架_第20张图片

登录成功弹出消息提示框[vue3] 实现登录页面不使用整体框架_第21张图片

[vue3] 实现登录页面不使用整体框架_第22张图片

总结说明

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

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

你可能感兴趣的:(vue3,前端)