查询信息的方法：
def query_info(self):
"""
查询集合people_info并返回所有"deleted"字段为0的数据。
注意返回的信息需要去掉_id
"""
return [
{'id': 1, 'name': '测试数据', 'age': 18, 'birthday': '2000-01-02',
'origin_home': '测试数据', 'current_home': '测试数据'},
{'id': 2, 'name': '测试数据', 'age': 18, 'birthday': '2000-01-02',
'origin_home': '测试数据', 'current_home': '测试数据'},
{'id': 3, 'name': '测试数据', 'age': 18, 'birthday': '2000-01-02',
'origin_home': '测试数据', 'current_home': '测试数据'}]
此时页面可以看到是固定的数据，并没有从数据库中获得
在bin目录下执行生成数据的文件：
打开数据库图形界面，可以看到刚刚生成的数据：
修改得到人员信息的代码：再次刷新页面
编辑功能：
改名字为张三：
删除按钮：
可以看到删除了234工号的人员
添加人员：
这是刚刚写进去的人员信息：
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人员管理系统</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/spectre.min.css')}}">
<script src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
</head>
<body>
<div class="container">
<div class="columns">
<div class="column col-8 col-mx-auto">
<header class="navbar">
<section class="centered">
<div class="navbar-brand mr-2"><h2>人员管理系统</h2></div>
</section>
</header>
</div>
</div>
<div class="columns">
<div class="col-10 col-mx-auto">
<div class="card">
<div class="card-body">
<div class="col-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>年龄</th>
<th>出生日期</th>
<th>户籍地址</th>
<th>当前住址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for data in data_list %}
<tr>
<td class="id" rowindex="{{data['id']}}">{{data['id']}}</td>
<td class="name" rowindex="{{data['id']}}">{{data.name}}</td>
<td class="age" rowindex="{{data['id']}}">{{data.age}}</td>
<td class="birthday" rowindex="{{data['id']}}">{{data.birthday}}</td>
<td class="origin-home" rowindex="{{data['id']}}">{{data.origin_home}}</td>
<td class="current-home" rowindex="{{data['id']}}">{{data.current_home}}</td>
<td>
<button class="btn btn-success" name="edit_this_info" rowindex="{{data['id']}}">编辑
</button>
<button class="btn btn-error" name="delete_this_info" rowindex="{{data['id']}}">删除
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-12" style="margin-top: 15px">
<button class="btn btn-success centered" id="open_add_modal">添加人员</button>
</div>
</div>
</div>
<div class="modal" id="modal_edit_info">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<div id="close_edit_modal" class="btn btn-clear float-right" aria-label="Close"></div>
<div class="modal-title h5">编辑信息</div>
</div>
<div class="form-horizontal">
<div class="modal-body">
<div class="content">
<fieldset disabled>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-name">工号</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-id">
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-name">姓名</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-name" placeholder="姓名">
</div>
</div>
<fieldset disabled>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-age">年龄</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-age" placeholder="年龄：根据生日自动计算">
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-birthday">出生日期</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-birthday" placeholder="出生日期">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-origin-home">户籍地址</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-origin-home" placeholder="户籍地址">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="edit-current-home">当前住址</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="edit-current-home"
placeholder="当前住址">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success centered" id="update_info">更新</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal_add_info">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<div id="close_add_modal" class="btn btn-clear float-right" aria-label="Close"></div>
<div class="modal-title h5">添加信息</div>
</div>
<div class="form-horizontal">
<div class="modal-body">
<div class="content">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-name">姓名</label>
</div>
<div class="col-9 col-sm-12">
<input name="name" class="form-input" type="text" id="input-name"
placeholder="姓名">
</div>
</div>
<fieldset disabled>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-age">年龄</label>
</div>
<div class="col-9 col-sm-12">
<input name="age" class="form-input" type="text" id="input-age"
placeholder="年龄:根据生日自动计算">
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-birthday">出生日期</label>
</div>
<div class="col-9 col-sm-12">
<input name="birthday" class="form-input" type="text" id="input-birthday"
placeholder="出生日期">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-origin-home">户籍地址</label>
</div>
<div class="col-9 col-sm-12">
<input name="origin_home" class="form-input" type="text" id="input-origin-home"
placeholder="户籍地址">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-current-home">当前住址</label>
</div>
<div class="col-9 col-sm-12">
<input name="current_home" class="form-input" type="text"
id="input-current-home"
placeholder="当前住址">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success centered" id="add_info">添加</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{url_for('static', filename='js/operation.js')}}"></script>
</body>
</html>
js方法：
function open_edit_info_modal() {
$('#modal_edit_info').attr('class', 'modal active');
var index = $(this).attr('rowindex').toString();
$('#edit-id').attr('value', $('td[class="id"][rowindex="' + index + '"]').text());
$('#edit-name').attr('value', $('td[class="name"][rowindex="' + index + '"]').text());
$('#edit-age').attr('value', $('td[class="age"][rowindex="' + index + '"]').text());
$('#edit-birthday').attr('value', $('td[class="birthday"][rowindex="' + index + '"]').text());
$('#edit-origin-home').attr('value', $('td[class="origin-home"][rowindex="' + index + '"]').text());
$('#edit-current-home').attr('value', $('td[class="current-home"][rowindex="' + index + '"]').text());
}
function close_edit_info_modal() {
$('#modal_edit_info').attr('class', 'modal')
}
function open_add_info_modal() {
$('#modal_add_info').attr('class', 'modal active')
}
function close_add_info_modal() {
$('#modal_add_info').attr('class', 'modal')
}
function delete_people() {
var url = '/delete/' + $(this).attr('rowIndex');
console.log(url);
$.ajax({
url: url,
success: function () {
window.location.reload();
}
})
}
function post_info_to_add() {
var name = $('#input-name').val();
var age = $('#input-age').val();
var birthday = $('#input-birthday').val();
var origin_home = $('#input-origin-home').val();
var current_home = $('#input-current-home').val();
if (name.length <= 0) {
alert('姓名不能为空')
return
}
/* if (!birthday.match('\\d{2}-\\d{2}')) {
alert('格式为：mm-dd')
return
}
age = parseInt(age); */
/* if (isNaN(age) || age < 0 || age > 120) {
alert('年龄必需为一个范围在0-120之间数字。')
return
} */
$.ajax({
url: '/add',
data: JSON.stringify({
'name': name, 'age': age, 'birthday': birthday,
'origin_home': origin_home, 'current_home': current_home
}),
type: 'POST',
contentType: 'application/json',
dataType: 'json',
success: function (data) {
if (data['success']) {
window.location.reload();
}
}
})
}
function update_info() {
var id = $('#edit-id').val();
var name = $('#edit-name').val();
var age = $('#edit-age').val();
var birthday = $('#edit-birthday').val();
var origin_home = $('#edit-origin-home').val();
var current_home = $('#edit-current-home').val();
if (name.length <= 0) {
alert('姓名不能为空ya!!')
return
}
/* if (!birthday.match('\\d{2}-\\d{2}')) {
alert('格式为：mm-dd')
return
} */
// age = parseInt(age);
/* if (isNaN(age) || age < 0 || age > 120) {
alert('年龄必需为一个范围在0-120之间数字。')
return
} */
$.ajax({
url: '/update',
data: JSON.stringify({
'people_id': id,
'updated_info': {
'name': name, 'age': age, 'birthday': birthday,
'origin_home': origin_home, 'current_home': current_home
}
}),
type: 'POST',
contentType: 'application/json',
dataType: 'json',
success: function (data) {
if (data['success']) {
window.location.reload();
} else {
if ('reason' in data) {
alert(data['reason'])
} else {
alert('更新失败')
}
}
}
})
}
function calc_age() {
/* birthYear = parseInt(birthdayStr.split('-')[0]);
if (birthYear === 2018) {
return 1
}
thisYear = (new Date()).getFullYear(); */
return birthdayStr
}
function load() {
$('button[name="edit_this_info"]').each(function () {
$(this).click(open_edit_info_modal);
});
$('button[name="delete_this_info"]').each(function () {
$(this).click(delete_people)
});
$('#close_edit_modal').click(close_edit_info_modal);
$('#open_add_modal').click(open_add_info_modal);
$('#close_add_modal').click(close_add_info_modal);
$('#add_info').click(post_info_to_add);
$('#update_info').click(update_info);
$('#input-birthday').change(function () {
birthdayStr = $(this).val();
if (birthdayStr.match('\\d{2}-\\d{2}')) {
$('#input-age').val(calc_age())
}
});
$('#edit-birthday').change(function () {
birthdayStr = $(this).val();
if (birthdayStr.match('\\d{2}-\\d{2}')) {
$('#edit-age').val(calc_age())
}
})
}
load();
