Antone/TIS-lab4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v2-local-js-css

Browse Source
This commit is contained in:
Yankovskaya Natalia
2023-10-25 12:23:05 +03:00
parent 6bdfd08c10
commit 3d15d4bea7
5 changed files with 871 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app.js
View File

@@ -2,10 +2,18 @@ const express = require("express");
const bodyParser = require("body-parser");
const fs = require("fs");
const { join } = require("path");
const { log } = require("console");
const app = express();
const jsonParser = bodyParser.json();
app.use(
"/bootstrap",
express.static(join(__dirname, "node_modules/bootstrap/dist"))
);
app.use("/jquery", express.static(join(__dirname, "node_modules/jquery/dist")));
// app.use(express.static(__dirname + 'public'));
// получение списка данных
@@ -46,21 +54,25 @@ app.post("/api/users", jsonParser, function (req, res) {
if (!req.body) return res.sendStatus(400);
var userName = req.body.name;
var userAge = req.body.age;
var userAge = +req.body.age;
var user = { name: userName, age: userAge };
var data = fs.readFileSync("users.json", "utf8");
var users = JSON.parse(data);
if (fs.existsSync("users.json")) {
var data = fs.readFileSync("users.json", "utf8");
var users = JSON.parse(data);
} else {
fs.writeFileSync("users.json");
}
// находим максимальный id
var id = Math.max.apply(
var maxid = Math.max.apply(
Math,
users.map(function (o) {
return o.id;
})
);
// увеличиваем его на единицу
user.id = id + 1;
user.id = maxid + 1;
// добавляем пользователя в массив
users.push(user);
var data = JSON.stringify(users);
@@ -124,5 +136,5 @@ app.put("/api/users", jsonParser, function (req, res) {
});
app.listen(3000, function () {
console.log("Сервер на порту 3000");
log("Сервер на порту 3000");
});

365
index.html
View File

@@ -1,195 +1,184 @@
<!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>
<main>
<h2 class="my-5 text-center">Список пользователей</h2>
<form name="userForm">
<input type="hidden" name="id" value="0" />
<div class="form-group">
<label for="name">Имя:</label>
<input class="form-control" name="name" />
</div>
<div class="form-group">
<label for="age">Возраст:</label>
<input class="form-control" name="age" />
</div>
<div class="panel-body">
<button
type="submit"
class="btn btn-sm btn-primary">Сохранить</button>
<a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
</div>
</form>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Id</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) {
var form = document.forms['userForm'];
form.elements['id'].value = user.id;
form.elements['name'].value = user.name;
form.elements['age'].value = user.age;
},
});
}
// Добавление пользователя
function CreateUser(userName, userAge) {
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'POST',
data: JSON.stringify({
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$('table tbody').append(row(user));
},
});
}
// Изменение пользователя
function EditUser(userId, userName, userAge) {
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'PUT',
data: JSON.stringify({
id: userId,
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$("tr[data-rowid='" + user.id +"']").replaceWith(row(user));
},
});
}
<html lang="ru-en" data-bs-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Список пользователей</title>
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script
src="bootstrap/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<script src="jquery/jquery.min.js" crossorigin="anonymous"></script>
</head>
<body>
<main class="text-center">
<h2 class="my-5 text-center">Список пользователей</h2>
<form name="userForm">
<input type="hidden" name="id" value="0" />
<div class="form-group mb-3">
<label for="name">Имя:</label>
<input class="form-control" name="name" />
</div>
<div class="form-group mb-3">
<label for="age">Возраст:</label>
<input type="number" class="form-control" name="age" />
</div>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary">
Сохранить
</button>
<a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
</div>
</form>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Имя</th>
<th>Возраст</th>
<th>Опции</th>
</tr>
</thead>
<tbody></tbody>
</table>
// сброс формы
function reset() {
var form = document.forms['userForm'];
form.reset();
form.elements['id'].value = 0;
}
<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) {
var form = document.forms["userForm"];
form.elements["id"].value = user.id;
form.elements["name"].value = user.name;
form.elements["age"].value = user.age;
},
});
}
// Добавление пользователя
function CreateUser(userName, userAge) {
$.ajax({
url: "api/users",
contentType: "application/json",
method: "POST",
data: JSON.stringify({
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$("table tbody").append(row(user));
},
});
}
// Изменение пользователя
function EditUser(userId, userName, userAge) {
$.ajax({
url: "api/users",
contentType: "application/json",
method: "PUT",
data: JSON.stringify({
id: userId,
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$("tr[data-rowid='" + user.id + "']").replaceWith(row(user));
},
});
}
// Удаление пользователя
function DeleteUser(id) {
$.ajax({
url: 'api/users/' + id,
contentType: 'application/json',
method: 'DELETE',
success: function (user) {
console.log(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><a class='editLink' data-id='" +
user.id +
"'>Изменить</a> | " +
"<a class='removeLink' data-id='" +
user.id +
"'>Удалить</a></td></tr>"
);
};
// сброс значений формы
$('#reset').click(function (e) {
e.preventDefault();
reset();
});
// сброс формы
function reset() {
var form = document.forms["userForm"];
form.reset();
form.elements["id"].value = 0;
}
// отправка формы
$('form').submit(function (e) {
e.preventDefault();
var id = this.elements['id'].value;
var name = this.elements['name'].value;
var age = this.elements['age'].value;
if (id == 0) CreateUser(name, age);
else EditUser(id, name, age);
});
// Удаление пользователя
function DeleteUser(id) {
$.ajax({
url: "api/users/" + id,
contentType: "application/json",
method: "DELETE",
success: function (user) {
console.log(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><a class='editLink' data-id='" +
user.id +
"'>Изменить</a> | " +
"<a class='removeLink' data-id='" +
user.id +
"'>Удалить</a></td></tr>"
);
};
// сброс значений формы
$("#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);
}
);
// отправка формы
$("form").submit(function (e) {
e.preventDefault();
var id = this.elements["id"].value;
var name = this.elements["name"].value;
var age = this.elements["age"].value;
if (id == 0) CreateUser(name, age);
else EditUser(id, name, age);
});
// загрузка пользователей
GetUsers();
</script>
</body>
// нажимаем на ссылку Изменить
$("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>
</main>
</body>
</html>

1308
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -3,11 +3,12 @@
"version": "1.0.0",
"dependencies": {
"body-parser": "^1.16.0",
"express": "^4.18.2"
"bootstrap": "^5.3.2",
"express": "^4.18.2",
"jquery": "^3.7.1"
},
"description": "https://nodejsdev.ru/guides/metanit/express-api/",
"main": "app.js",
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

2
users.json
View File

@@ -1 +1 @@
[{"id":1,"name":"Tom","age":24},{"id":2,"name":"Bob","age":27},{"id":3,"name":"Alice","age":"23"},{"name":"Антоне","age":"400","id":4},{"name":"мяу мау мау","age":"bababooye","id":5}]
[{"id":1,"name":"Tom","age":24},{"id":2,"name":"Bob","age":27},{"id":3,"name":"Alice","age":23},{"name":"Антоне","age":400,"id":4},{"name":"Захаров Николай","age":76,"id":6},{"name":"Попов Алексей","age":26,"id":7},{"name":"Казаков Александр","age":23,"id":8},{"name":"Родина Ирина","age":45,"id":9},{"name":"Краснов Александр","age":13,"id":10},{"name":"Бондарева Александра","age":48,"id":11},{"name":"Кононов Артём","age":74,"id":12},{"name":"Иванов Иван","age":16,"id":13},{"name":"Блинов Роберт","age":64,"id":14},{"name":"Карпов Андрей","age":64,"id":15},{"name":"Некрасов Александр","age":47,"id":16},{"name":"Ефимов Роман","age":28,"id":17},{"name":"Антонова Ксения","age":65,"id":18},{"name":"Ларина Виктория","age":15,"id":19},{"name":"Никитина Софья","age":21,"id":20},{"name":"Попова Элина","age":56,"id":21},{"name":"Клюев Руслан","age":65,"id":22},{"name":"Копылов Максим","age":9,"id":23},{"name":"Кудряшова Алиса","age":24,"id":24},{"name":"Кузнецова Анастасия","age":71,"id":25}]