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

20
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 };
if (fs.existsSync("users.json")) {
var data = fs.readFileSync("users.json", "utf8"); var data = fs.readFileSync("users.json", "utf8");
var users = JSON.parse(data); 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");
}); });

131
index.html
View File

@@ -1,35 +1,34 @@
<!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"
content="width=device-width"
/>
<title>Список пользователей</title> <title>Список пользователей</title>
<link <!-- bootstrap -->
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
rel="stylesheet" <script
/> src="bootstrap/js/bootstrap.bundle.min.js"
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> crossorigin="anonymous"
></script>
<script src="jquery/jquery.min.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<main> <main class="text-center">
<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"> <div class="form-group mb-3">
<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"> <div class="form-group mb-3">
<label for="age">Возраст:</label> <label for="age">Возраст:</label>
<input class="form-control" name="age" /> <input type="number" class="form-control" name="age" />
</div> </div>
<div class="panel-body"> <div class="panel-body">
<button <button type="submit" class="btn btn-sm btn-primary">
type="submit" Сохранить
class="btn btn-sm btn-primary">Сохранить</button> </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>
@@ -38,8 +37,8 @@
<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>
@@ -49,58 +48,55 @@
// Получение всех пользователей // Получение всех пользователей
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); rows += row(user);
}); });
$('table tbody').append(rows); $("table tbody").append(rows);
}, },
}); });
} }
// Получение одного пользователя // Получение одного пользователя
function GetUser(id) { function GetUser(id) {
$.ajax({ $.ajax({
url: '/api/users/' + id, url: "/api/users/" + id,
type: 'GET', type: "GET",
contentType: 'application/json', contentType: "application/json",
success: function (user) { success: function (user) {
var form = document.forms['userForm']; var form = document.forms["userForm"];
form.elements['id'].value = user.id; form.elements["id"].value = user.id;
form.elements['name'].value = user.name; form.elements["name"].value = user.name;
form.elements['age'].value = user.age; form.elements["age"].value = user.age;
}, },
}); });
} }
// Добавление пользователя // Добавление пользователя
function CreateUser(userName, userAge) { function CreateUser(userName, userAge) {
$.ajax({ $.ajax({
url: 'api/users', url: "api/users",
contentType: 'application/json', contentType: "application/json",
method: 'POST', method: "POST",
data: JSON.stringify({ data: JSON.stringify({
name: userName, name: userName,
age: userAge, age: userAge,
}), }),
success: function (user) { success: function (user) {
reset(); reset();
$('table tbody').append(row(user)); $("table tbody").append(row(user));
}, },
}); });
} }
// Изменение пользователя // Изменение пользователя
function EditUser(userId, userName, userAge) { function EditUser(userId, userName, userAge) {
$.ajax({ $.ajax({
url: 'api/users', url: "api/users",
contentType: 'application/json', contentType: "application/json",
method: 'PUT', method: "PUT",
data: JSON.stringify({ data: JSON.stringify({
id: userId, id: userId,
name: userName, name: userName,
@@ -108,31 +104,27 @@
}), }),
success: function (user) { success: function (user) {
reset(); reset();
$("tr[data-rowid='" + user.id +"']").replaceWith(row(user)); $("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();
}, },
}); });
} }
@@ -143,12 +135,12 @@
user.id + user.id +
"'><td>" + "'><td>" +
user.id + user.id +
'</td>' + "</td>" +
'<td>' + "<td>" +
user.name + user.name +
'</td> <td>' + "</td> <td>" +
user.age + user.age +
'</td>' + "</td>" +
"<td><a class='editLink' data-id='" + "<td><a class='editLink' data-id='" +
user.id + user.id +
"'>Изменить</a> | " + "'>Изменить</a> | " +
@@ -158,38 +150,35 @@
); );
}; };
// сброс значений формы // сброс значений формы
$('#reset').click(function (e) { $("#reset").click(function (e) {
e.preventDefault(); e.preventDefault();
reset(); 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',
function () {
var id = $(this).data('id');
DeleteUser(id); DeleteUser(id);
} });
);
// загрузка пользователей // загрузка пользователей
GetUsers(); GetUsers();
</script> </script>
</main>
</body> </body>
</html> </html>

42
package-lock.json generated
View File

@@ -1,15 +1,28 @@
{ {
"name": "webapp", "name": "nodejs-api-webapp",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "webapp", "name": "nodejs-api-webapp",
"version": "1.0.0", "version": "1.0.0",
"license": "UNLICENSED",
"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"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/accepts": { "node_modules/accepts": {
@@ -52,6 +65,24 @@
"npm": "1.2.8000 || >= 1.4.16" "npm": "1.2.8000 || >= 1.4.16"
} }
}, },
"node_modules/bootstrap": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/bytes": { "node_modules/bytes": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -357,6 +388,11 @@
"node": ">= 0.10" "node": ">= 0.10"
} }
}, },
"node_modules/jquery": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
},
"node_modules/media-typer": { "node_modules/media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

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}]