业务需求：用户登录后展示用户名、用户对应的角色。EasyUI只不过是一个前端的框架，封装了一些组件和样式，你可以用jsp直接调后台获取到用户信息展示，但我这里想用html页面，用目前流行的说法：前后端分离。效果跟你现在看到的页面右上角差不多，当然功能不同，点击名字不会跳到我的首页去：
实现很简单，html通过easyUI的布局组件region:‘north‘指定页面顶部展示：
<div class="wu-header" data-options="region:‘north‘,border:false,split:true"> <div class="wu-header-left"> <h1>我的台管理系统</h1> </div> <div class="wu-header-right"> <p><strong id="userName">admin</strong>，欢迎您！|<a href="javascript:void(0)" onclick="logout()">退出</a></p> </div> </div>
在页面加载时调用后台getLoginInfo接口获取用户信息的js：
$.ajax({ type: ‘post‘, url: ‘getLoginInfo‘, dataType: ‘json‘, async: true, success: function (data) { if (data) { if (data.user) { roleValue = data.user.roleValue; var roleName; for (i = 0; i < roleStatus.length; i++) { if (roleStatus[i].id == roleValue) { roleName = roleStatus[i].value; break; } } $(‘#userName‘).html(data.user.userName); // 展示角色 $(‘#userName‘).tooltip({ position: ‘right‘, content: ‘<span style="color:#fff">您的角色为：‘ + roleName + ‘</span>‘, onShow: function () { $(this).tooltip(‘tip‘).css({ backgroundColor: ‘#666‘, borderColor: ‘#666‘ }); } }); } else { // 获取不到用户信息，跳往登陆页 window.location.href = "login.html"; } } } });
后台Controller接口：
/** * 获取登陆信息 * * @return */ @ResponseBody @RequestMapping(value = "/getLoginInfo", method = RequestMethod.POST) public Object getLoginInfo() { User user = null; Map<String, Object> resultMap = new HashMap<>(); ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes(); HttpServletRequest httpServletRequest = attributes.getRequest(); if (httpServletRequest != null && httpServletRequest.getSession(true) != null) { user = (User) httpServletRequest.getSession().getAttribute("user"); } if (user == null) { resultMap.put("errorMsg", "请先登录."); } else { resultMap.put("user", user); } return resultMap; }
同理，点击退出时调用登出接口，依然跳往登陆页面。
原文：https://www.cnblogs.com/wuxun1997/p/10905534.html