Update
This commit is contained in:
qwr
220
public/index.html
Normal file
220
public/index.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width"/>
|
||||
<title>Список пользователей</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Список пользователей</h2>
|
||||
<input id='id' type="hidden" value="0"/>
|
||||
<div class="form-group">
|
||||
<label for="name">Имя:</label>
|
||||
<input id="name" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="age">Возраст:</label>
|
||||
<input id="age" class="form-control" name="age"/>
|
||||
</div>
|
||||
<form action="/imageLoad" method="post" enctype="multipart/form-data">
|
||||
<label>Файл</label><br>
|
||||
<input type="file" id="img" name="image" accept=".png, .jpg, .svg, .jpeg"/><br><br>
|
||||
|
||||
<button type="submit" id="save" class="btn btn-sm btn-primary">Сохранить изменения в таблице</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Сохранить изображение</button>
|
||||
<a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
|
||||
</form>
|
||||
|
||||
<table class="table table-condensed table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Имя</th>
|
||||
<th>возраст</th>
|
||||
<th>картинка</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
|
||||
// Получение всех пользователей
|
||||
function GetUsers() {
|
||||
$.ajax({
|
||||
url: '/api/users',
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function (users) {
|
||||
var rows = '';
|
||||
$.each(users, function (
|
||||
index,
|
||||
user
|
||||
) {
|
||||
// добавляем полученные элементы в таблицу
|
||||
rows += row(user);
|
||||
});
|
||||
$('table tbody').append(rows);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Получение одного пользователя
|
||||
function GetUser(id) {
|
||||
$.ajax({
|
||||
url: '/api/users/' + id,
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
success: function (user) {
|
||||
$('#id').val(user.id);
|
||||
$('#name').val(user.name);
|
||||
$('#age').val(user.age);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// загрузка data изображения
|
||||
var imageData = null;
|
||||
$('input[type=file]').on('change', function(){
|
||||
imageData = this.files;
|
||||
});
|
||||
|
||||
// Добавление пользователя
|
||||
function CreateUser(userName, userAge, userImage) {
|
||||
if ($('input[type=file]').val() == "" || $('#name').val()== "" || $('#age').val() == "") {return};
|
||||
if (imageData == null || imageData['0'].size <= 10 * 1024 * 1024 ) { //10мб
|
||||
$.ajax({
|
||||
url: 'api/users',
|
||||
contentType: 'application/json',
|
||||
method: 'POST',
|
||||
|
||||
data: JSON.stringify({
|
||||
name: userName,
|
||||
age: userAge,
|
||||
image: userImage,
|
||||
}),
|
||||
success: function (user) {
|
||||
if (user.id == null) {
|
||||
user.id = 0
|
||||
}
|
||||
reset();
|
||||
$('table tbody').append(row(user));
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Изменение пользователя
|
||||
function EditUser(userId, userName, userAge, userImage) {
|
||||
if (imageData == null || imageData['0'].size <= 10 * 1024 * 1024) { //10мб
|
||||
$.ajax({
|
||||
url: 'api/users',
|
||||
contentType: 'application/json',
|
||||
method: 'PUT',
|
||||
data: JSON.stringify({
|
||||
id: userId,
|
||||
name: userName,
|
||||
age: userAge,
|
||||
image: userImage,
|
||||
}),
|
||||
success: function (user) {
|
||||
reset();
|
||||
$("tr[data-rowid='" + user.id + "']").replaceWith(row(user));
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// сброс формы
|
||||
function reset() {
|
||||
$('#id').val(0);
|
||||
$('#name').val("");
|
||||
$('#age').val("");
|
||||
}
|
||||
|
||||
// Удаление пользователя
|
||||
function DeleteUser(id) {
|
||||
$.ajax({
|
||||
url: 'api/users/' + id,
|
||||
contentType: 'application/json',
|
||||
method: 'DELETE',
|
||||
success: function (user) {
|
||||
$(
|
||||
"tr[data-rowid='" +
|
||||
user.id +
|
||||
"']"
|
||||
).remove();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// создание строки для таблицы
|
||||
var row = function (user) {
|
||||
return (
|
||||
"<tr data-rowid='" +
|
||||
user.id +
|
||||
"'><td>" +
|
||||
user.id +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
user.name +
|
||||
'</td> <td>' +
|
||||
user.age +
|
||||
'</td> <td><img class="logo" style="width:100px; height:100px;" src="http://localhost:3000/images/' + user.image + '">' + '</td>' +
|
||||
"<td><a class='editLink' data-id='" +
|
||||
user.id +
|
||||
"'>Изменить</a> | " +
|
||||
"<a class='removeLink' data-id='" +
|
||||
user.id +
|
||||
"'>Удалить</a></td></tr>"
|
||||
);
|
||||
};
|
||||
|
||||
// сохранение данных
|
||||
$('#save').click(function (e) {
|
||||
e.preventDefault();
|
||||
var id = $('#id').val();
|
||||
var name = $('#name').val();
|
||||
var age = $('#age').val();
|
||||
var image = $('input[type=file]').val()
|
||||
image = image.replace("C:\\fakepath\\","")
|
||||
|
||||
if (id == 0){
|
||||
CreateUser(name, age, image);
|
||||
}
|
||||
else {
|
||||
EditUser(id, name, age, image);
|
||||
}
|
||||
});
|
||||
|
||||
// сброс значений формы
|
||||
$('#reset').click(function (e) {
|
||||
e.preventDefault();
|
||||
reset();
|
||||
});
|
||||
|
||||
// нажимаем на ссылку Изменить
|
||||
$('body').on('click', '.editLink', function () {
|
||||
var id = $(this).data('id');
|
||||
GetUser(id);
|
||||
});
|
||||
|
||||
// нажимаем на ссылку Удалить
|
||||
$('body').on(
|
||||
'click',
|
||||
'.removeLink',
|
||||
function () {
|
||||
var id = $(this).data('id');
|
||||
DeleteUser(id);
|
||||
}
|
||||
);
|
||||
|
||||
// загрузка пользователей
|
||||
GetUsers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user