目录
个人中心的功能介绍：
1、进入页面
2、页面内的各种功能设计
（1）修改按钮
（2）页面的进入退出操作
一、网页设计
二、html代码
三、css代码
四、js代码
本次项目为后台管理系统，在本系统内的第七个界面为窗体程序内的个人中心页面，作为首页内大分类下项目，我们可以直接点击跳转
个人中心的功能介绍：
在进行本页面时，我们将进行多个功能的串联
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 () {// 获取到图片的srcvar 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)}})
})
![[Mysql] Mysql的多表查询----多表关系（下）](https://i-blog.csdnimg.cn/direct/6c57187254f543dab0a1c9be0d11432d.png)
