130 lines
4.6 KiB
HTML
130 lines
4.6 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-details">
|
|
<form id="updateProfileForm">
|
|
<input type="hidden" type="text" value="{{.id}}" name="id" id="id">
|
|
<div class="input-field">
|
|
<input id="username" type="text" class="validate" name="username">
|
|
<label for="username">用户名</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="password" type="password" class="validate" name="password">
|
|
<label for="password">密码</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="name" type="text" class="validate" name="name">
|
|
<label for="name">姓名</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="gender" type="text" class="validate" name="gender">
|
|
<label for="gender">性别</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="avatar" type="text" class="validate" name="avatar">
|
|
<label for="avatar">头像URL</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="address" type="text" class="validate" name="address">
|
|
<label for="address">地址</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="email" type="email" class="validate" name="email">
|
|
<label for="email">邮箱</label>
|
|
</div>
|
|
<div class="input-field">
|
|
<input id="phone" type="text" class="validate" name="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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化Materialize组件
|
|
M.updateTextFields();
|
|
|
|
// 更新用户数据
|
|
document.getElementById('updateProfileForm').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const formData = {
|
|
username: this.username.value,
|
|
password: this.password.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/addUser', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
// M.toast({html: '添加成功'});
|
|
if (data.code != 100) {
|
|
M.toast({html: data.msg});
|
|
} else {
|
|
M.toast({html: '添加成功'});
|
|
}
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
M.toast({html: '添加失败'});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|