158 lines
5.8 KiB
HTML
158 lines
5.8 KiB
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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
<style>
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.profile-card {
|
|
width: 50%;
|
|
display: flex;
|
|
}
|
|
.profile-image {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.profile-image img {
|
|
border-radius: 50%;
|
|
width: 150px;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
}
|
|
.profile-details {
|
|
flex: 2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card profile-card">
|
|
<div class="card-content" style="width: 100rem;">
|
|
<div class="profile-image">
|
|
<img src="{{.avatar}}" alt="头像">
|
|
</div>
|
|
<div class="profile-details">
|
|
<form id="updateProfileForm">
|
|
<input type="hidden" type="text" value="{{.id}}" name="id" id="id">
|
|
<div class="input-field">
|
|
<input id="name" type="text" class="validate" name="name" value="{{.name}}">
|
|
<label for="name">姓名</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="gender" type="text" class="validate" name="gender" value="{{.gender}}">
|
|
<label for="gender">性别</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="avatar" type="text" class="validate" name="avatar" value="{{.avatar}}">
|
|
<label for="avatar">头像URL</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="address" type="text" class="validate" name="address" value="{{.address}}">
|
|
<label for="address">地址</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="email" type="email" class="validate" name="email" value="{{.email}}">
|
|
<label for="email">邮箱</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="phone" type="text" class="validate" name="phone" value="{{.phone}}">
|
|
<label for="phone">手机</label>
|
|
</div>
|
|
<button class="btn waves-effect waves-light" type="submit" name="action">更新
|
|
<i class="material-icons right">send</i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function getCookie(name) {
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) return parts.pop().split(';').shift();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化Materialize组件
|
|
M.updateTextFields();
|
|
|
|
// 获取用户数据
|
|
fetch('/user/listUsers')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// 假设返回的是一个用户列表，我们取第一个用户作为示例
|
|
console.log(data.data)
|
|
let username = getCookie('username');
|
|
let user = data.data[0];
|
|
for (let i = 0; i < data.data.length; i++) {
|
|
if (data.data[i].username == username) {
|
|
user = data.data[i];
|
|
}
|
|
}
|
|
document.getElementById('id').value = user.id;
|
|
document.getElementById('name').value = user.name;
|
|
document.getElementById('gender').value = user.gender;
|
|
document.getElementById('avatar').value = user.avatar;
|
|
document.getElementById('address').value = user.address;
|
|
document.getElementById('email').value = user.email;
|
|
document.getElementById('phone').value = user.phone;
|
|
|
|
// 更新表单字段状态
|
|
M.updateTextFields();
|
|
});
|
|
|
|
// 更新用户数据
|
|
document.getElementById('updateProfileForm').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
console.log(this.id.value)
|
|
// id to int
|
|
function int(str) {
|
|
return parseInt(str, 10);
|
|
}
|
|
console.log(int(this.id.value))
|
|
const formData = {
|
|
id: int(this.id.value),
|
|
name: this.name.value,
|
|
gender: this.gender.value,
|
|
avatar: this.avatar.value,
|
|
address: this.address.value,
|
|
email: this.email.value,
|
|
phone: this.phone.value
|
|
};
|
|
|
|
fetch('/user/updateUser', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
M.toast({html: '更新成功'});
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
M.toast({html: '更新失败'});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|