<!DOCTYPE html>
<html>
<head>
<title>个人信息管理</title>
</head>
<body>
<h1>个人信息管理</h1>
<div>
<h2>添加用户</h2>
<form id="user-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<button type="submit">添加用户</button>
</form>
</div>
<div id="user-list"></div>
<script>
// 获取所有用户
function fetchUsers() {
fetch('/api/users')
.then(response => response
.json())
.then(data => {
const userList =
document.getElementById('user-list');
userList
.innerHTML = '';
if (data
.length === 0) {
userList
.innerHTML = '<p>没有用户数据</p>';
} else {
data
.forEach(user => {
const userDiv =
document.createElement('div');
userDiv
.innerHTML = `${user
.name} (${user
.email})
<button class="edit-btn" data-id="${user
.id}">编辑</button>
<button class="delete-btn" data-id="${user
.id}">删除</button>`;
userList
.appendChild(userDiv);
});
// 为所有删除按钮添加点击事件监听器
document.querySelectorAll('
.delete-btn')
.forEach(button => {
button
.addEventListener('click', function() {
const
userId = this
.getAttribute('data-id');
deleteUser(
userId);
});
});
// 为所有编辑按钮添加点击事件监听器
document.querySelectorAll('
.edit-btn')
.forEach(button => {
button
.addEventListener('click', function() {
const
userId = this
.getAttribute('data-id');
editUser(
userId);
});
});
}
})
.catch(error => {
console
.error('获取用户数据时出错:', error);
const userList =
document.getElementById('user-list');
userList
.innerHTML = '<p>获取用户数据时出错</p>';
});
}
// 页面加载时获取用户数据
window
.onload = fetchUsers;
// 添加用户
document.getElementById('user-form')
.addEventListener('submit', function(event) {
event
.preventDefault();
const name =
document.getElementById('name')
.value;
const email =
document.getElementById('email')
.value;
fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/
json',
},
body:
JSON
.stringify({ name, email }),
})
.then(response => {
if (!response
.ok) {
throw new Error('网络响应不正常');
}
return response
.json();
})
.then(data => {
alert('用户添加成功');
fetchUsers();
})
.catch(error => {
console
.error('添加用户时出错:', error);
alert('添加用户时出错');
});
});
// 删除用户
function deleteUser(
userId) {
if (confirm('确定要删除这个用户吗？')) {
fetch(`/api/users/${
userId}`, {
method: 'DELETE',
})
.then(response => {
if (!response
.ok) {
throw new Error('网络响应不正常');
}
return response
.json();
})
.then(data => {
alert('用户删除成功');
fetchUsers();
})
.catch(error => {
console
.error('删除用户时出错:', error);
alert('删除用户时出错');
});
}
}
// 编辑用户
function editUser(
userId) {
const newName = prompt('请输入新的姓名:', '');
const newEmail = prompt('请输入新的邮箱:', '');
if (newName !==
null && newEmail !==
null) {
fetch(`/api/users/${
userId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/
json',
},
body:
JSON
.stringify({ name: newName, email: newEmail }),
})
.then(response => {
if (!response
.ok) {
throw new Error('网络响应不正常');
}
return response
.json();
})
.then(data => {
alert('用户更新成功');
fetchUsers();
})
.catch(error => {
console
.error('更新用户时出错:', error);
alert('更新用户时出错');
});
}
}
</script>
</body>
</html> from flask import Blueprint, request,
jsonify
from models import db, User
api = Blueprint('api', __name__)
@api
.route('/users', methods=['GET'])
def get_users():
users = User
.query
.all()
return
jsonify([user
.to_dict() for user in users])
@api
.route('/users', methods=['POST'])
def create_user():
data = request
.json
user = User(name=data['name'], email=data['email'])
db
.session
.add(user)
db
.session
.commit()
return
jsonify(user
.to_dict()), 201
@api
.route('/users/<int:user_id>', methods=['PUT'])
def update_user(user_id):
user = User
.query
.get_or_404(user_id)
data = request
.json
user
.name = data
.get('name', user
.name)
user
.email = data
.get('email', user
.email)
db
.session
.commit()
return
jsonify(user
.to_dict())
@api
.route('/users/<int:user_id>', methods=['DELETE'])
def delete_user(user_id):
user = User
.query
.get_or_404(user_id)
db
.session
.delete(user)
db
.session
.commit()
return '', 204 修改代码实现删除用户
本文介绍了解决IE8中无法通过getElementById获取元素值的问题，并提供了360浏览器中确保正确获取DOM元素的方法。同时，文中还讨论了如何判断变量是否为null的几种方式。
扫一扫
9441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
