v2-local-js-css
This commit is contained in:
Yankovskaya Natalia
20
app.js
20
app.js
@@ -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 };
|
||||
|
||||
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");
|
||||
});
|
||||
|
||||
129
index.html
129
index.html
@@ -1,35 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="ru-en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width"
|
||||
/>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<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">
|
||||
<div class="form-group mb-3">
|
||||
<label for="name">Имя:</label>
|
||||
<input class="form-control" name="name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-3">
|
||||
<label for="age">Возраст:</label>
|
||||
<input class="form-control" name="age" />
|
||||
<input type="number" class="form-control" name="age" />
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<button
|
||||
type="submit"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
@@ -38,8 +37,8 @@
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Имя</th>
|
||||
<th>возраст</th>
|
||||
<th></th>
|
||||
<th>Возраст</th>
|
||||
<th>Опции</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
@@ -49,58 +48,55 @@
|
||||
// Получение всех пользователей
|
||||
function GetUsers() {
|
||||
$.ajax({
|
||||
url: '/api/users',
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
url: "/api/users",
|
||||
type: "GET",
|
||||
contentType: "application/json",
|
||||
success: function (users) {
|
||||
var rows = '';
|
||||
$.each(users, function (
|
||||
index,
|
||||
user
|
||||
) {
|
||||
var rows = "";
|
||||
$.each(users, function (index, user) {
|
||||
// добавляем полученные элементы в таблицу
|
||||
rows += row(user);
|
||||
});
|
||||
$('table tbody').append(rows);
|
||||
$("table tbody").append(rows);
|
||||
},
|
||||
});
|
||||
}
|
||||
// Получение одного пользователя
|
||||
function GetUser(id) {
|
||||
$.ajax({
|
||||
url: '/api/users/' + id,
|
||||
type: 'GET',
|
||||
contentType: 'application/json',
|
||||
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;
|
||||
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',
|
||||
url: "api/users",
|
||||
contentType: "application/json",
|
||||
method: "POST",
|
||||
data: JSON.stringify({
|
||||
name: userName,
|
||||
age: userAge,
|
||||
}),
|
||||
success: function (user) {
|
||||
reset();
|
||||
$('table tbody').append(row(user));
|
||||
$("table tbody").append(row(user));
|
||||
},
|
||||
});
|
||||
}
|
||||
// Изменение пользователя
|
||||
function EditUser(userId, userName, userAge) {
|
||||
$.ajax({
|
||||
url: 'api/users',
|
||||
contentType: 'application/json',
|
||||
method: 'PUT',
|
||||
url: "api/users",
|
||||
contentType: "application/json",
|
||||
method: "PUT",
|
||||
data: JSON.stringify({
|
||||
id: userId,
|
||||
name: userName,
|
||||
@@ -115,24 +111,20 @@
|
||||
|
||||
// сброс формы
|
||||
function reset() {
|
||||
var form = document.forms['userForm'];
|
||||
var form = document.forms["userForm"];
|
||||
form.reset();
|
||||
form.elements['id'].value = 0;
|
||||
form.elements["id"].value = 0;
|
||||
}
|
||||
|
||||
// Удаление пользователя
|
||||
function DeleteUser(id) {
|
||||
$.ajax({
|
||||
url: 'api/users/' + id,
|
||||
contentType: 'application/json',
|
||||
method: 'DELETE',
|
||||
url: "api/users/" + id,
|
||||
contentType: "application/json",
|
||||
method: "DELETE",
|
||||
success: function (user) {
|
||||
console.log(user);
|
||||
$(
|
||||
"tr[data-rowid='" +
|
||||
user.id +
|
||||
"']"
|
||||
).remove();
|
||||
$("tr[data-rowid='" + user.id + "']").remove();
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -143,12 +135,12 @@
|
||||
user.id +
|
||||
"'><td>" +
|
||||
user.id +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
user.name +
|
||||
'</td> <td>' +
|
||||
"</td> <td>" +
|
||||
user.age +
|
||||
'</td>' +
|
||||
"</td>" +
|
||||
"<td><a class='editLink' data-id='" +
|
||||
user.id +
|
||||
"'>Изменить</a> | " +
|
||||
@@ -158,38 +150,35 @@
|
||||
);
|
||||
};
|
||||
// сброс значений формы
|
||||
$('#reset').click(function (e) {
|
||||
$("#reset").click(function (e) {
|
||||
e.preventDefault();
|
||||
reset();
|
||||
});
|
||||
|
||||
// отправка формы
|
||||
$('form').submit(function (e) {
|
||||
$("form").submit(function (e) {
|
||||
e.preventDefault();
|
||||
var id = this.elements['id'].value;
|
||||
var name = this.elements['name'].value;
|
||||
var age = this.elements['age'].value;
|
||||
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);
|
||||
});
|
||||
|
||||
// нажимаем на ссылку Изменить
|
||||
$('body').on('click', '.editLink', function () {
|
||||
var id = $(this).data('id');
|
||||
$("body").on("click", ".editLink", function () {
|
||||
var id = $(this).data("id");
|
||||
GetUser(id);
|
||||
});
|
||||
// нажимаем на ссылку Удалить
|
||||
$('body').on(
|
||||
'click',
|
||||
'.removeLink',
|
||||
function () {
|
||||
var id = $(this).data('id');
|
||||
$("body").on("click", ".removeLink", function () {
|
||||
var id = $(this).data("id");
|
||||
DeleteUser(id);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// загрузка пользователей
|
||||
GetUsers();
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
package-lock.json
generated
42
package-lock.json
generated
@@ -1,15 +1,28 @@
|
||||
{
|
||||
"name": "webapp",
|
||||
"name": "nodejs-api-webapp",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "webapp",
|
||||
"name": "nodejs-api-webapp",
|
||||
"version": "1.0.0",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"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": {
|
||||
@@ -52,6 +65,24 @@
|
||||
"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": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
@@ -357,6 +388,11 @@
|
||||
"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": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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}]
|
||||
Reference in New Issue
Block a user