企业建站项目,丽水微信网站建设报价,西安网站建设网站排名优化,安徽天筑建设集团网站昨天做了微人事登录的前端页面和后端接口#xff0c;实现了前后端接口的对接#xff0c;输入正确的用户名和密码之后#xff0c;成功的跳转到home页。现在要做的就是Home页的Title制作 Home页的title制作
使用Element UI中的Container布局容器 复制的代码如下#xff0c… 昨天做了微人事登录的前端页面和后端接口实现了前后端接口的对接输入正确的用户名和密码之后成功的跳转到home页。现在要做的就是Home页的Title制作 Home页的title制作
使用Element UI中的Container布局容器 复制的代码如下把复制的代码放到Home.vue的template标签中,显示效果如下图
el-containerel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container
/el-container给Header加上个class属性然后设置header的背景颜色浏览器显示效果如下 在vuehr项目的public文件夹里面的index.html页面的body标签上加上style“margin:0px;padding:0px;”;显示效果如下图 配置下拉菜单 把下拉菜单的代码复制到微人事字体的下面效果如下
el-dropdownspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item disabled双皮奶/el-dropdown-itemel-dropdown-item divided蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdown把这个下拉菜单和下拉菜单下面的改一下
templatedivdivel-containerel-header classheaderh3 classtitle微人事/h3el-dropdown commandhandleCommandspan classel-dropdown-link{{user.name}}iimg :srcuser.userface alt/i/spanel-dropdown-menu slotdropdownel-dropdown-item command#个人中心/el-dropdown-itemel-dropdown-item command#设置/el-dropdown-itemel-dropdown-item divided commandlogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container/el-container/div/div
/templatescriptexport default {name: Home,data(){return{user: JSON.parse(window.sessionStorage.getItem(user))}},methods:{handleCommand(cmd){if(cmd logout){this.$confirm(此操作将退出登录, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.getRequest(/logout); //使用封装好的getRequest方法参数写注销登录的地址window.sessionStorage.removeItem(user)this.$router.replace(/);}).catch(() {this.$message({type: info,message: 已取消});});}}}}
/scriptstyle.header{background-color: #409EFF;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;}.header .title{color: white;font-size: 25px;font-family: 华文行楷;}.el-dropdown-link{cursor: pointer;color: black;font-weight: bold;}.el-dropdown-link{display: flex;align-items: center;}.el-dropdown-link img{width: 48px;height: 48px;border-radius: 24px;margin-left: 8px;}
/style显示当前登录用户名和头像
获取存储在session的用户信息里的字符串转为Json对象 在登录的时候就把后端返回的用户信息存储到了session里如下图 把用户信息绑定加载到页面 展示效果图
每个下拉菜单都是一个点击按钮所以要给下拉菜单添加点击事件可以使command 点击菜单项触发的事件回调
然后在标签里面添加command“commandHandler” 点击事件 再带script标签里面加上method方法如下图 从登录页面点击登录会提示登录成功 从下拉菜单点击注销登录 会出现提示此操作将注销登录是否继续有取消和确定按钮点击确定会注销成功并跳转到登录页面 总结
制作Home页的页头的下拉菜单展示效果根据后端返回的用户信息登录时存储到session里获取session里用户信息展示到下拉菜单前端用户名和头像。 下拉菜单通过点击按钮所以要给下拉菜单添加command“commandHandler” 点击事件点击事件可以使command 点击菜单项触发的事件回调获取路径commandHandler函数进行判断路径连接后端路径实现退出登录
