EasyUI动态展示用户信息

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

业务需求：用户登录后展示用户名、用户对应的角色。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'
});
}
}); createMenu(roleValue);
} else {
window.location.href = "index.html";
}
} }
});

上面标黄的roleValue获取角色的key值，用来在菜单加载时使用。而roleStatus就是一个下拉框选项值的数组，通过roleValue的id值去找到对应的value值。

后台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; }