EasyUI动态展示用户信息

　　业务需求：用户登录后展示用户名、用户对应的角色。EasyUI只不过是一个前端的框架，封装了一些组件和样式，你可以用jsp直接调后台获取到用户信息展示，但我这里想用html页面，用目前流行的说法：前后端分离。效果跟你现在看到的页面右上角差不多，当然功能不同，点击名字不会跳页，当鼠标放在名字可以展示当前用户的角色：

EasyUI动态展示用户信息

　　实现很简单，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;

    }

　　同理，点击退出时调用登出接口，跳往登陆页面。

EasyUI动态展示用户信息

相关推荐