项目9-网页聊天室3（主界面之用户信息）

最新推荐文章于 2024-11-11 21:19:25 发布

muyierfly

最新推荐文章于 2024-11-11 21:19:25 发布

阅读量577

点赞数 15

分类专栏：项目文章标签： java

本文链接：https://blog.csdn.net/m0_47017197/article/details/139114889

版权

项目专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.前端页面

CSS: 如何让img里的图片自适应div，且不变形_img自适应div大小铺满且不变形-CSDN博客

JavaScript/jQuery 如何改变一个img元素的src属性|极客教程 (geek-docs.com)

2.要求

左上角显示用户的昵称和头像.

3.后端代码

3.1 添加拦截器

3.2 注册拦截器

3.3 Controller

@RequestMapping("/getUserInfo")
    public Result getUserInfo(HttpSession httpSession){
        //获取会话
        //其实拦截器就进行了该操作
        if(httpSession==null){
            return Result.fail(Constant.RESULT_CODE_UNLOGIN,"没有登录用户账户");
        }
        User user=(User) httpSession.getAttribute(Constant.USERINFO_SESSION_KEY);
        if(user==null){
            return Result.fail(Constant.RESULT_CODE_MESSAGENULL,"获取不到用户信息");
        }
        return Result.success(user);
    }

3.3.1 postman测试

成功！！！

4.前端代码

<!-- 当前登录用户的用户名 -->
                <div class="user">
                    <div class="pic">
                        <!-- <img id="pic" src="file:///F:/pic/个人头像.png" alt=""> -->
                        <img id="pic" src="pic/个人头像.png" alt="">
                    </div>
                    <div class="name">
                        lisi
                    </div>
                    
                </div>

/
// 从服务器获取到用户登录数据
/

function getUserInfo() {
    $.ajax({
        type: 'get',
        url: 'user/getUserInfo',
        success: function(result) {
            // 从服务器获取到数据. 
            // 校验结果是否有效. 
            let body=result.data;
            if (body.userId && body.userId > 0) {
                // 如果结果有效, 则把用户名显示到界面上. 
                // 同时也可以记录 userId 到 html 标签的属性中. (以备后用)
                let userDiv = document.querySelector('.main .left .user .name');
                let userDivPic = document.querySelector('.main .left .user .pic #pic');
                userDiv.innerHTML = body.username;
                $("#pic").attr("src","pic/"+body.picname)
                //不好用
                // userDivPic.src="pic/"+body.picname;
                userDiv.setAttribute("user-id", body.userId);
            }
        },
        error: function(error){
            if(error!=null&&error.status==401){
                alert("请登录用户");
                location.href = "login.html";
            }
        }

    });
}

getUserInfo();