Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程

完善登录流程

1. 丰富登录界面

1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮。

复制代码

<template><el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container"><h3 class="title">系统登录</h3><el-form-item prop="account"><el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input></el-form-item><!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> --><el-form-item style="width:100%;"><el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button><el-button type="primary" style="width:48%;" @click.native.prevent="login" :loading="logining">登 录</el-button></el-form-item></el-form>
</template>

复制代码

1.2 稍微调整一下界面样式

复制代码

<style lang="scss" scoped>.login-container {-webkit-border-radius: 5px;border-radius: 5px;-moz-border-radius: 5px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;.title {margin: 0px auto 40px auto;text-align: center;color: #505458;}.remember {margin: 0px 0px 35px 0px;}}
</style>

复制代码

1.3 添加页面组件显示规则和操作响应,其中登录成功后,把登录用户信息存储到本地会话,用于配置路由跳转目标。

复制代码

<script>import Cookies from "js-cookie";export default {name: 'Login',data() {return {logining: false,loginForm: {account: 'admin',password: '123456'},fieldRules: {account: [{ required: true, message: '请输入账号', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },]},checked: true};},methods: {login() {let userInfo = {account:this.loginForm.account, password:this.loginForm.password}this.$api.login(JSON.stringify(userInfo)).then((res) => {Cookies.set('token', res.data.token) // 放置token到CookiesessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话this.$router.push('/')  // 登录成功,跳转到主页}).catch(function(res) {alert(res);});},reset() {this.$refs.loginForm.resetFields();}}}
</script>

复制代码

1.4 最后效果如下图所示。

2.修改接口

修改 http/interface.js,把请求类型改为 post,并传入 data 参数。

复制代码

export const login = data => {return axios({url: '/login',method: 'post',data})
}

复制代码

3.修改 mock 接口

修改 mock/modules/logins.js,把请求类型改为 post。

复制代码

// 登录接口
export function login () {return {// isOpen: false,url: 'http://localhost:8080/login',type: 'post',data: {'msg': 'success','code': 0,'data': {'token': '4344323121398'// 其他数据}}}
}

复制代码

4.添加导航守卫

在 router/index.js 中添加导航守卫,如下图所示,根据用户登录会话记录,路由到主页或登录界面。

5.修改主页界面

 5.1 向 home.vue 添加组件,构建主界面。

复制代码

<template><el-row class="container"><el-col :span="24" class="header"><el-col :span="5" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'"><img :src="this.logo" /> {{isCollapse?sysName:sysName}}</el-col><el-col :span="1"><div class="tools" @click.prevent="collapse"><i class="el-icon-menu"></i></div><!-- <i class="fa fa-align-justify"></i> --></el-col><el-col :span="13"><div class="hearNavBar"><el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#4b5f6e" text-color="#fff"active-text-color="#ffd04b" mode="horizontal" @select="handleSelectHearNavBar"><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">消息中心</el-menu-item><el-menu-item index="3">订单管理</el-menu-item></el-menu></div></el-col><el-col :span="5" class="userinfo"><el-dropdown trigger="hover"><span class="el-dropdown-link userinfo-inner"><img :src="this.userAvatar" /> {{username}}</span><el-dropdown-menu slot="dropdown"><el-dropdown-item>我的消息</el-dropdown-item><el-dropdown-item>设置</el-dropdown-item><el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></el-col></el-col><el-col :span="24" class="main"><aside class="aside"><!--导航菜单--><el-menu default-active="1-3" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item><el-menu-item index="1-3">选项3</el-menu-item></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></aside><section class="content-container"><div class="grid-content bg-purple-light"><el-col :span="24" class="breadcrumb-container"><el-breadcrumb separator="/" class="breadcrumb-inner"><el-breadcrumb-item v-for="item in $route.matched" :key="item.path">{{ item.name }}</el-breadcrumb-item></el-breadcrumb></el-col><el-col :span="24" class="content-wrapper"><transition name="fade" mode="out-in"><router-view></router-view></transition></el-col></div></section></el-col></el-row>
</template>

复制代码

5.2 处理页面事件和页面数据显示,主要是两个事件和在 mounted 函数内获取页面数据。

5.3 修饰调整 css 样式,构建界面,样式太多,就不贴了,直接看源码 ,调整完效果如下图所示。

6.嵌套路由

6.1 在 views 目录下新建 Main、User、Menu 页面,用于菜单路由,内容随便显示点什么就可以。

6.2 在 router/index.js 文件中添加子路由,分别指向子页面。

 6.3 在 views/Home.vue 页面对应的导航菜单中添加点击事件,路由到对应的子页面。

6.4 登录之后,点击用户管理,路由到用户管理界面。

6.5 点击菜单管理,路由到菜单管理界面。

6.5 这里发现点击导航菜单之后,菜单就不能点击了,经查看是导航页面坐标样式问题,把用户管理等页面的样式去掉就好了。

6.6 同理添加机构管理、角色管理、日志管理的菜单之后,效果如下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/100257.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人中的数值优化(十三)——QP二次规划

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…

【MySQL】MySQL 慢SQL如何避险

我们在日常开发中&#xff0c;一定遇见过某些SQL执行较慢的情况&#xff0c;我们俗称“慢SQL”&#xff0c;如果你对系统的接口性能要求较高的话&#xff0c;一定不会放过这种SQL&#xff0c;肯定会想办法进行解决&#xff0c;那么&#xff0c;导致慢 SQL 出现的原因&#xff0…

MATLAB 2022b 中设置关闭 MATLAB 之前进行询问

在 MATLAB 2022b 中可以进行设置&#xff0c;在关闭 MATLAB 之前进行询问&#xff0c;防止意外关闭 MATLAB。如图&#xff1a;

【方法】如何取消7Z压缩文件加密的密码?

给7Z格式的压缩文件设置了密码&#xff0c;后续又不需要了&#xff0c;如何取消呢&#xff1f;如果忘记密码&#xff0c;还能取消吗&#xff1f;下面小编来分享一下方法。 首先&#xff0c;我们需要使用支持7Z格式的解压缩软件&#xff0c;如果使用的是WinRAR或者7-Zip解压缩软…

【LeetCode每日一题合集】2023.8.28-2023.9.3(到家的最少跳跃次数)

文章目录 57. 插入区间823. 带因子的二叉树解法——递推 1654. 到家的最少跳跃次数(BFS&#xff0c;&#x1f6b9;最远距离上界的证明)1761. 一个图中连通三元组的最小度数2240. 买钢笔和铅笔的方案数解法1——完全背包解法2——枚举买了几支钢笔&#xff08;推荐解法&#xff…

【Apollo学习笔记】——规划模块TASK之SPEED_BOUNDS_PRIORI_DECIDERSPEED_BOUNDS_FINAL_DECIDER

文章目录 前言SPEED_BOUNDS_PRIORI_DECIDER功能简介SPEED_BOUNDS_FINAL_DECIDER功能简介SPEED_BOUNDS_PRIORI_DECIDER相关配置SPEED_BOUNDS_FINAL_DECIDER相关配置SPEED_BOUNDS_DECIDER流程将障碍物映射到ST图中ComputeSTBoundary(PathDecision* path_decision)ComputeSTBounda…

R7 7840H和i7 1360p选哪个 R77840H和i71360p对比

i71360P采用10nm工艺 最高睿频 5GHz 十核心 十六线程 三级缓存 18MB热设计功耗(TDP) 28W 支持最大内存 64GB 内存类型 DDR4 3200MHzDDR5 5200MHz集成显卡 Intel Iris Xe Graphics 选i7 1360p还是r7 7840h这些点很重要看过你就懂了 http://www.adiannao.cn/dy r7 7840h采用4nm…

MySQL——存储引擎

简介 MySQL数据库主要的存储引擎&#xff1a; MyISAM和InnoDB简介 MyISAM是MySQL的默认数据库引擎&#xff08;5.5版之前&#xff09;&#xff0c;由早期的 ISAM &#xff08;Indexed Sequential Access Method&#xff1a;有索引的顺序访问方法&#xff09;所改良。虽然性能…

Leetcode 1486.数组异或操作

给你两个整数&#xff0c;n 和 start 。 数组 nums 定义为&#xff1a;nums[i] start 2*i&#xff08;下标从 0 开始&#xff09;且 n nums.length 。 请返回 nums 中所有元素按位异或&#xff08;XOR&#xff09;后得到的结果。 示例 1&#xff1a; 输入&#xff1a;n 5, …

windows下的mysql安装部署和配置环境

目录 一、下载&#xff08;mysql下载链接&#xff09; 1.进入官网选择下载 2.拉到最底下&#xff0c;选择社区版下载 3.选择mysql community server 4.选择数据库版本&#xff0c;以及系统和安装方式&#xff08;这里我选的msi&#xff09; 5.直接点击no thanks,just sta…

[CISCN 2019初赛]Love Math

文章目录 前言考点解题过程 前言 感慨自己实力不够&#xff0c;心浮气躁根本做不来难题。难得这题对我还很有吸引力&#xff0c;也涉及很多知识。只能说我是受益匪浅&#xff0c;总的来说加油吧ctfer。 考点 利用php动态函数的特性利用php中的数学函数实现命令执行利用php7的特…

网络通信基础

IP地址 使用ip地址来描述网络上一个设备所在的位置 端口号 区分一个主机上不同的程序,一个网络程序,在启动的时候,都需要绑定一个或者多个端口号,后续的通信过程都需要依赖端口号来进行展开的,mysql默认的端口号是3306 协议 描述了网络通信传输的数据的含义,表示一种约定,…