后台管理系统窗体程序：个人中心

最新推荐文章于 2025-05-13 19:08:48 发布

天郁青

最新推荐文章于 2025-05-13 19:08:48 发布

阅读量761

点赞数 5

文章标签：前端

本文链接：https://blog.youkuaiyun.com/Jourkern/article/details/143803404

版权

本次项目为后台管理系统，在本系统内的第七个界面为窗体程序内的个人中心页面，作为首页内大分类下项目，我们可以直接点击跳转

个人中心的功能介绍：

在进行本页面时，我们将进行多个功能的串联

1、进入页面

在首页进入时需要变换分类的样式，使用排他思想即可进行该项操作，而在大分类展开小分类的事件中使用基础动画效果即可

2、页面内的各种功能设计

（1）修改按钮

该按钮的主要功能是将输入框的值获取并返回至数据库完成修改

其中包括了修改头像的选择文件更改，这其中要使用到如下代码：

（2）页面的进入退出操作

进入页面时，我们需要将数据渲染至空白的输入框内

而在修改完之后需要退出首页界面，返回至登录页界面保证修改进行完毕

一、网页设计

二、html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表文章</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/PSCT.css">
</head>

<body>
    <div class="header" id="header">用户信息修改</div>

    <div class="main" id="main">

        <span class="mainsp1" id="mainsp1">用户名称：</span>
        <input type="text" class="mainipt1" id="mainipt1" disabled>

        <span class="mainsp2" id="mainsp2">昵称：</span>
        <input type="text" class="mainipt2" id="mainipt2" placeholder="请输入用户名" autocomplete="off">

        <span class="mainsp3" id="mainsp3">邮箱：</span>
        <input type="text" class="mainipt3" id="mainipt3" placeholder="请输入邮箱" autocomplete="off">

        <span class="mainsp4" id="mainsp4">用户图标：</span>
        <img src="" alt="" class="mainimg" id="mainimg" autocomplete="off">
        <input type="file" class="mainfile" id="mainfile1">

        <span class="mainsp5" id="mainsp5">密码：</span>
        <input type="text" class="mainipt5" id="mainipt5" placeholder="请输入密码" autocomplete="off">

        <button class="change" id="change">修改</button>
    </div>



</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/wangEditor.min.js"></script>
<script src="./JS/bootstrap.bundle.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/PSCT.js"></script>

</html>

三、css代码

body{
    /* background-color: white; */
    font-size:16px
}
button
{
    cursor: pointer;
}
.header
{
    width: 88vw;
    height: 4vh;
    background-color: #fbfbfb;
    margin: 3vh auto;
    margin-bottom: 0px;
    line-height: 4vh;
    border: 1px solid #a2a2a3;
    padding-left: 2vw;
}

.main   
{        
    color: #5b5b5b;
    font-size: 13px;
    width: 88vw;
    height: 85vh;
    background-color: #ffffff;
    margin: 0vh auto;
    border: 1px solid #a2a2a3;
    border-top: none;
    padding: 3vh 1vw;
    padding-top:2vh;
    position: relative;
}

span{
    position: absolute;
    left: 150px;
}

.main input{
    position: absolute;
    left: 250px;
    height: 20px;
    width: 300px;
}


.mainimg
{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 250px;
}
.mainfile
{
    position: absolute;
    top: 430px; 
}

.mainsp2, .mainipt2
{
top: 100px;

}
.mainsp3, .mainipt3
{
top: 200px;
}
.mainsp4,.mainimg
{
top: 300px;
}
.mainsp5, .mainipt5
{
top: 500px;
}


.change
{
    background-color: #55a95b;
    color: white;
    border: none;
    width: 50px;
    height: 25px;
    border-radius: 5px;
    position: absolute;
    top: 600px;
    left: 200px;
}

四、js代码

// 入口函数 
$(function () {
    // 调取接口
    $.ajax({
        // 接口
        url: "http:locale.href/api/v1/admin/user/detail",
        // 请求方式
        type: "get",
        // 请求头
        headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        // 请求成功
        success(res) {
            console.log(res)
            // 判断msg的值是否为获取成功
            if (res.msg == "获取成功") {
                // 将获取到的数据渲染到页面上
                $("#mainipt1").val(res.data.username)
                $("#mainipt2").val(res.data.nickname)
                $("#mainipt3").val(res.data.email)
                $("#mainipt5").val(res.data.password)

                // 将获取到的头像地址赋值给img标签
                $(".mainimg").attr("src", res.data.userPic)

            }
        },
        // 请求失败
        error(err) {
            // 打印错误信息
            console.log(err)
        }
    })
})



//页面的头像替换和选择
$('#mainfile1').change(function () {
    // 获取到图片的src
    var src = URL.createObjectURL(this.files[0])
    // 将图片的src赋值给img标签
    $(".mainimg").attr('src', src)
    // 设置img标签的宽高
    $(".mainimg").css({
        width: "100px",
        height: "100px"
    })
})


// 修改按钮点击事件
$("#change").on("click", function () {
    // 获取到页面上输入框的值
    var username = $("#mainipt1").val()
    var nickname = $("#mainipt2").val()
    var email = $("#mainipt3").val()
    var password = $("#mainipt5").val()
    var userPic = $("#mainfile1")[0].files[0]

    // 创建一个FormData对象
    var params = new FormData()

    // 将获取到的值添加到FormData对象中
    params.append("username", username)
    params.append("nickname", nickname)
    params.append("email", email)
    params.append("password", password)
    params.append("userPic", userPic)

    $.ajax({


        // 接口
        url: "http://101.37.70.201:8080/api/v1/admin/user/edit",
        // 请求方式
        type: "post",
        // 请求头
        headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        // 提交的数据
        data: params,

        // 不处理数据
        // 当需要通过Ajax上传文件时，因为文件数据不能被转换为查询字符串，同时也不希望jQuery修改请求头中的Content-Type字段
        processData: false,
        contentType: false,

        // 请求成功
        success(res) {
            console.log(res)
            // 判断msg的值是否为更新成功
            if (res.msg == "更新成功") {
                // 弹出提示框提示用户
                alert("修改成功,请重新登录")
                // 跳转到首页
                window.parent.location.href = "./index.html"
            }
        },
        // 请求失败
        error(err) {
            // 打印错误信息
            console.log(err)
        }
    })
})