✨✨博主简介:一个会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
CMS管理系统登录 重置
参考饿了么plus表单校验的代码进行简单的校验
UserLogin.vue
CMS管理系统登录 重置 效果图(注意这里没有和后端进行关联,所以只要格式满足要求,即可登录成功,跳转后台页面)
解释说明校验的格式基本上是一成不变的,需要改动的地方也就是在第4步中校验的方式
表单验证具体步骤:
import type { FormInstance, FormRules } from 'element-plus'
- :rules="rules"
- ref="ruleFormRef"
- const rules = reactive
({大括号中这里写校验方式,校验的表单和第5步一致}) - prop="email" prop="password"(名字可自定义,见名知意)
- const ruleFormRef = ref
() - @click="submitForm(ruleFormRef)"
- @click="resetForm(ruleFormRef)"
登录和重置方法定义
校验成功进行路由跳转
到此有关使用ElementPuls页面布局搭建架子的流程就基本完成了,接下来就是和后端进行交互,通过接口进行前后的整合
下一章将使用登录页面进行和后端数据库接口的关联,实现登录成功后页面右上角游客位置显示用户名