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

365
index.html
View File

@@ -1,195 +1,184 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="ru-en" data-bs-theme="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta name="viewport" content="width=device-width" />
name="viewport" <title>Список пользователей</title>
content="width=device-width" <!-- bootstrap -->
/> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<title>Список пользователей</title> <script
<link src="bootstrap/js/bootstrap.bundle.min.js"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous"
rel="stylesheet" ></script>
/> <script src="jquery/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head>
</head> <body>
<body> <main class="text-center">
<main> <h2 class="my-5 text-center">Список пользователей</h2>
<h2 class="my-5 text-center">Список пользователей</h2> <form name="userForm">
<form name="userForm"> <input type="hidden" name="id" value="0" />
<input type="hidden" name="id" value="0" /> <div class="form-group mb-3">
<div class="form-group"> <label for="name">Имя:</label>
<label for="name">Имя:</label> <input class="form-control" name="name" />
<input class="form-control" name="name" /> </div>
</div> <div class="form-group mb-3">
<div class="form-group"> <label for="age">Возраст:</label>
<label for="age">Возраст:</label> <input type="number" class="form-control" name="age" />
<input class="form-control" name="age" /> </div>
</div> <div class="panel-body">
<div class="panel-body"> <button type="submit" class="btn btn-sm btn-primary">
<button Сохранить
type="submit" </button>
class="btn btn-sm btn-primary">Сохранить</button> <a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
<a id="reset" class="btn btn-sm btn-primary">Сбросить</a> </div>
</div> </form>
</form> <table class="table table-condensed table-striped table-bordered">
<table class="table table-condensed table-striped table-bordered"> <thead>
<thead> <tr>
<tr> <th>Id</th>
<th>Id</th> <th>Имя</th>
<th>Имя</th> <th>Возраст</th>
<th>возраст</th> <th>Опции</th>
<th></th> </tr>
</tr> </thead>
</thead> <tbody></tbody>
<tbody></tbody> </table>
</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));
},
});
}
// сброс формы <script>
function reset() { // Получение всех пользователей
var form = document.forms['userForm']; function GetUsers() {
form.reset(); $.ajax({
form.elements['id'].value = 0; 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) { function reset() {
$.ajax({ var form = document.forms["userForm"];
url: 'api/users/' + id, form.reset();
contentType: 'application/json', form.elements["id"].value = 0;
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();
});
// отправка формы // Удаление пользователя
$('form').submit(function (e) { function DeleteUser(id) {
e.preventDefault(); $.ajax({
var id = this.elements['id'].value; url: "api/users/" + id,
var name = this.elements['name'].value; contentType: "application/json",
var age = this.elements['age'].value; method: "DELETE",
if (id == 0) CreateUser(name, age); success: function (user) {
else EditUser(id, name, age); 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 () { $("form").submit(function (e) {
var id = $(this).data('id'); e.preventDefault();
GetUser(id); var id = this.elements["id"].value;
}); var name = this.elements["name"].value;
// нажимаем на ссылку Удалить var age = this.elements["age"].value;
$('body').on( if (id == 0) CreateUser(name, age);
'click', else EditUser(id, name, age);
'.removeLink', });
function () {
var id = $(this).data('id');
DeleteUser(id);
}
);
// загрузка пользователей // нажимаем на ссылку Изменить
GetUsers(); $("body").on("click", ".editLink", function () {
</script> var id = $(this).data("id");
</body> GetUser(id);
});
// нажимаем на ссылку Удалить
$("body").on("click", ".removeLink", function () {
var id = $(this).data("id");
DeleteUser(id);
});
// загрузка пользователей
GetUsers();
</script>
</main>
</body>
</html> </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", "version": "1.0.0",
"dependencies": { "dependencies": {
"body-parser": "^1.16.0", "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/", "description": "https://nodejsdev.ru/guides/metanit/express-api/",
"main": "app.js", "main": "app.js",
"devDependencies": {},
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "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}]