280 lines
10 KiB
HTML
280 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale=1 , user-scalable=0”>
|
|
<title>词汇江湖-用户信息管理</title>
|
|
<link rel="shortcut icon" href="bitbug_favicon.ico" />
|
|
<!-- 引入所需要的css -->
|
|
<!-- 引入页面所需要的css -->
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
<link rel="stylesheet" href="../assets/css/header.css">
|
|
<link rel="stylesheet" href="../assets/css/footer.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css">
|
|
<link rel="stylesheet" href="../assets/css/base.css">
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.css">
|
|
<link rel="stylesheet" href="../assets/iconfont/iconfont.css">
|
|
<!-- 引入所需要的js文件 -->
|
|
<script src="../assets/js/jquery-1.9.1.min.js"></script>
|
|
<script src="../assets/js/ajax.js"></script>
|
|
<!-- 头部导航所需要的css -->
|
|
<style>
|
|
body {
|
|
background: url(../assets/images/bg5.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.w {
|
|
margin: 0 auto;
|
|
width: 1200px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="header"></div>
|
|
<!-- 头部导航结束 -->
|
|
<!-- 富文本编辑器开始 -->
|
|
<div class="user-wrap ">
|
|
<div class="user-area ">
|
|
<div class="text ">
|
|
<h1 style="font-size: 20px;margin-right: -20px; ">用户管理</h1>
|
|
</div>
|
|
<hr style="border: 1px dashed #e8e8e8;">
|
|
<div class="user ">
|
|
<ul class="user-list">
|
|
<a href="../index.html">
|
|
<li>
|
|
<span class="iconfont icon-shouye"></span>首 页
|
|
</li>
|
|
</a>
|
|
<a href="./index.html">
|
|
<li>
|
|
<span class="iconfont icon-zelvgongyongyonghuzhongxinz003"></span>用户中心
|
|
</li>
|
|
</a>
|
|
<a href="./text.html">
|
|
<li>
|
|
<span class="iconfont icon-fabu"></span>发布诗词
|
|
</li>
|
|
</a>
|
|
<a href="./mytext.html">
|
|
<li>
|
|
<span class="iconfont icon-wodefabu"></span>我的发布
|
|
</li>
|
|
</a>
|
|
<a href="./guanli.html">
|
|
<li>
|
|
<span class="iconfont icon-wodefabu"></span>诗词管理
|
|
</li>
|
|
</a>
|
|
<a href="./shoucang.html">
|
|
<li>
|
|
<span class="iconfont icon-shoucang"></span>我的收藏
|
|
</li>
|
|
</a>
|
|
<a href="./guanzhu.html">
|
|
<li>
|
|
<span class="iconfont icon-wodeguanzhu"></span>我的关注
|
|
</li>
|
|
</a>
|
|
<a href="./manage.html">
|
|
<li>
|
|
<span class="iconfont icon-shezhi"></span>账号设置
|
|
</li>
|
|
</a>
|
|
<a href="./xiaoxi.html">
|
|
<li>
|
|
<span class="iconfont icon-xiaoxi"></span>消息中心
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="user-right">
|
|
<div class="user-manager">
|
|
<h2>账号中心</h2>
|
|
<form action="" method="get" accept-charset="utf-8">
|
|
|
|
|
|
<p>修改用户名</p>
|
|
<span id="m1" style="color: red"></span>
|
|
<div class="manage-input">
|
|
<input type="text" placeholder=" 请输入新的用户名，若为空则不修改" id="username" onkeyup="checkUsername()">
|
|
</div>
|
|
<p>邮箱</p>
|
|
<span id="m4" style="color: red"></span>
|
|
<div class="manage-input">
|
|
<input type="email" placeholder=" 请输入新的邮箱，若为空则不修改" readonly="readonly" id="email" onkeyup="checkEmail()" style="cursor:no-drop">
|
|
</div>
|
|
|
|
<p>修改密码</p>
|
|
<span id="m2" style="color: red"></span>
|
|
<div class="manage-input">
|
|
<input type="password" placeholder=" 请输入新的密码，若为空则不修改" id="password" onkeyup="checkPassword()">
|
|
</div>
|
|
<p>确认修改密码</p>
|
|
<span id="m3" style="color: red"></span>
|
|
<div class="manage-input">
|
|
<input type="password" placeholder=" 请输入再新的密码，若为空则不修改" id="passwords" onkeyup="checkPasswords()">
|
|
</div>
|
|
<div class="user-manager-button">
|
|
<input type="button" class="btn btn-success" style="width: 20%; height: 40px; margin:25px auto;background-color:#28a745;" value="保存信息" onclick="xiugaimessage()"></input>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</body>
|
|
<script>
|
|
$(function() {
|
|
$('#header').load('./common/header.html');
|
|
$('#footer').load('./common/footer.html');
|
|
})
|
|
//获取用户信息
|
|
window.onload= function usermessage() {
|
|
var userId = window.sessionStorage.getItem('userId');
|
|
var userToken = window.sessionStorage.getItem("yq_token");
|
|
console.log("用户信息");
|
|
$.ajax({
|
|
|
|
url: 'http://127.0.0.1:81/consumer/user/fineById/' + userId + '/', //请求url
|
|
undefined,
|
|
type: "get",
|
|
headers: {
|
|
undefined,
|
|
"token": userToken //此处放置请求到的用户token
|
|
},
|
|
success: function(data) {
|
|
if (data.code == 200) {
|
|
|
|
document.getElementById("denglu").innerHTML = '<div style="display:flex;"><a href="./index.html"><img src=http://cdn.shuguangwl.com/2022/04/01/9d62eaa7c11f2.png style="width:20px;height:20px;">' + data.data.username + '</a><a href="./logout.html"><img src=http://cdn.shuguangwl.com/2022/04/10/60fc777f1b526.png style="width:20px;height:20px;">退出登录</a><div>';
|
|
document.getElementById("username").value = data.data.username;
|
|
document.getElementById("password").value = data.data.password;
|
|
document.getElementById("passwords").value = data.data.password;
|
|
document.getElementById("email").value = data.data.email;
|
|
|
|
} else {
|
|
alert("您未登录，没有访问权限");
|
|
window.location.href = "http://haoyueshici.com/user/login.html";
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// 校验用户名
|
|
// 中文
|
|
function checkUsername() {
|
|
// 获取用户名
|
|
var username = $("#username").val();
|
|
// 正则表达式
|
|
var reg_username = /[\u4e00-\u9fa5]/;
|
|
|
|
// 判断
|
|
var flag = reg_username.test(username);
|
|
if (flag) {
|
|
$("#username").css("border", "")
|
|
$("#m1").html("");
|
|
} else {
|
|
// 用户名非法
|
|
$("#username").css("border", "1px solid red");
|
|
$("#m1").html("用户名应该为中文");
|
|
}
|
|
return flag;
|
|
}
|
|
// 密码
|
|
function checkPassword() {
|
|
// 获取用户名
|
|
var password = $("#password").val();
|
|
// 正则表达式
|
|
var reg_password = /^\w{6,10}/;
|
|
|
|
// 判断
|
|
var flag = reg_password.test(password);
|
|
if (flag) {
|
|
$("#password").css("border", "")
|
|
$("#m2").html("");
|
|
} else {
|
|
// 用户名非法
|
|
$("#password").css("border", "1px solid red");
|
|
$("#m2").html("密码应不少于6位");
|
|
}
|
|
return flag;
|
|
}
|
|
//重复密码
|
|
function checkPasswords() {
|
|
var password = $.trim($("#password").val());
|
|
var passwords = $.trim($("#passwords").val());
|
|
if (password == passwords) {
|
|
$("#passwords").css("border", "")
|
|
$("#m3").html("");
|
|
} else {
|
|
$("#passwords").css("border", "1px solid red");
|
|
$("#m3").html("两次输入密码不一致");
|
|
}
|
|
|
|
}
|
|
//邮箱
|
|
function checkEmail() {
|
|
var email = $("#email").val();
|
|
var reg_email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]){1,2}[A-Za-z\d]{2,5}$/g;
|
|
var flag = reg_email.test(email);
|
|
if (flag) {
|
|
$("#email").css("border", "")
|
|
$("#m4").html("");
|
|
} else {
|
|
$("#email").css("border", "1px solid red");
|
|
$("#m4").html("邮箱格式有误");
|
|
}
|
|
return flag;
|
|
}
|
|
function xiugaimessage() {
|
|
var userId = sessionStorage.getItem('userId');
|
|
var userToken = sessionStorage.getItem("yq_token");
|
|
var username = $.trim($("#username").val());
|
|
var email = $.trim($("#email").val());
|
|
var password = $.trim($("#password").val());
|
|
var passwords = $.trim($("#passwords").val());
|
|
console.log(userId);
|
|
var data = {
|
|
'username': username,
|
|
'password': password,
|
|
'email': email,
|
|
'userId': userId
|
|
};
|
|
$.ajax({
|
|
//请求地址
|
|
// contentType: 'application/json;charset=UTF-8',
|
|
url: 'http://127.0.0.1:81/consumer/user/modification',
|
|
undefined,
|
|
type: 'GET',
|
|
headers: {
|
|
undefined,
|
|
"token": userToken //此处放置请求到的用户token
|
|
},
|
|
data: data,
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
alert("修改成功,请牢记用户信息");
|
|
window.location.href="./manage.html"
|
|
},
|
|
error: function(data) {
|
|
alert("网络错误，请稍后再试");
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</html> |