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");
}); });

363
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> <script>
// Получение всех пользователей // Получение всех пользователей
function GetUsers() { function GetUsers() {
$.ajax({ $.ajax({
url: '/api/users', url: "/api/users",
type: 'GET', type: "GET",
contentType: 'application/json', contentType: "application/json",
success: function (users) { success: function (users) {
var rows = ''; var rows = "";
$.each(users, function ( $.each(users, function (index, user) {
index, // добавляем полученные элементы в таблицу
user rows += row(user);
) { });
// добавляем полученные элементы в таблицу $("table tbody").append(rows);
rows += row(user); },
}); });
$('table tbody').append(rows); }
}, // Получение одного пользователя
}); function GetUser(id) {
} $.ajax({
// Получение одного пользователя url: "/api/users/" + id,
function GetUser(id) { type: "GET",
$.ajax({ contentType: "application/json",
url: '/api/users/' + id, success: function (user) {
type: 'GET', var form = document.forms["userForm"];
contentType: 'application/json', form.elements["id"].value = user.id;
success: function (user) { form.elements["name"].value = user.name;
var form = document.forms['userForm']; form.elements["age"].value = user.age;
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",
function CreateUser(userName, userAge) { contentType: "application/json",
$.ajax({ method: "POST",
url: 'api/users', data: JSON.stringify({
contentType: 'application/json', name: userName,
method: 'POST', age: userAge,
data: JSON.stringify({ }),
name: userName, success: function (user) {
age: userAge, reset();
}), $("table tbody").append(row(user));
success: function (user) { },
reset(); });
$('table tbody').append(row(user)); }
}, // Изменение пользователя
}); function EditUser(userId, userName, userAge) {
} $.ajax({
// Изменение пользователя url: "api/users",
function EditUser(userId, userName, userAge) { contentType: "application/json",
$.ajax({ method: "PUT",
url: 'api/users', data: JSON.stringify({
contentType: 'application/json', id: userId,
method: 'PUT', name: userName,
data: JSON.stringify({ age: userAge,
id: userId, }),
name: userName, success: function (user) {
age: userAge, reset();
}), $("tr[data-rowid='" + user.id + "']").replaceWith(row(user));
success: function (user) { },
reset(); });
$("tr[data-rowid='" + user.id +"']").replaceWith(row(user)); }
},
});
}
// сброс формы // сброс формы
function reset() { function reset() {
var form = document.forms['userForm']; var form = document.forms["userForm"];
form.reset(); form.reset();
form.elements['id'].value = 0; form.elements["id"].value = 0;
} }
// Удаление пользователя // Удаление пользователя
function DeleteUser(id) { function DeleteUser(id) {
$.ajax({ $.ajax({
url: 'api/users/' + id, url: "api/users/" + id,
contentType: 'application/json', contentType: "application/json",
method: 'DELETE', method: "DELETE",
success: function (user) { success: function (user) {
console.log(user); console.log(user);
$( $("tr[data-rowid='" + user.id + "']").remove();
"tr[data-rowid='" + },
user.id + });
"']" }
).remove(); // создание строки для таблицы
}, var row = function (user) {
}); return (
} "<tr data-rowid='" +
// создание строки для таблицы user.id +
var row = function (user) { "'><td>" +
return ( user.id +
"<tr data-rowid='" + "</td>" +
user.id + "<td>" +
"'><td>" + user.name +
user.id + "</td> <td>" +
'</td>' + user.age +
'<td>' + "</td>" +
user.name + "<td><a class='editLink' data-id='" +
'</td> <td>' + user.id +
user.age + "'>Изменить</a> | " +
'</td>' + "<a class='removeLink' data-id='" +
"<td><a class='editLink' data-id='" + user.id +
user.id + "'>Удалить</a></td></tr>"
"'>Изменить</a> | " + );
"<a class='removeLink' data-id='" + };
user.id + // сброс значений формы
"'>Удалить</a></td></tr>" $("#reset").click(function (e) {
); e.preventDefault();
}; reset();
// сброс значений формы });
$('#reset').click(function (e) {
e.preventDefault();
reset();
});
// отправка формы // отправка формы
$('form').submit(function (e) { $("form").submit(function (e) {
e.preventDefault(); e.preventDefault();
var id = this.elements['id'].value; var id = this.elements["id"].value;
var name = this.elements['name'].value; var name = this.elements["name"].value;
var age = this.elements['age'].value; var age = this.elements["age"].value;
if (id == 0) CreateUser(name, age); if (id == 0) CreateUser(name, age);
else EditUser(id, name, age); else EditUser(id, name, age);
}); });
// нажимаем на ссылку Изменить // нажимаем на ссылку Изменить
$('body').on('click', '.editLink', function () { $("body").on("click", ".editLink", function () {
var id = $(this).data('id'); var id = $(this).data("id");
GetUser(id); GetUser(id);
}); });
// нажимаем на ссылку Удалить // нажимаем на ссылку Удалить
$('body').on( $("body").on("click", ".removeLink", function () {
'click', var id = $(this).data("id");
'.removeLink', DeleteUser(id);
function () { });
var id = $(this).data('id');
DeleteUser(id);
}
);
// загрузка пользователей // загрузка пользователей
GetUsers(); GetUsers();
</script> </script>
</body> </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}]