Add initial json-server support

db.json

@@ -0,0 +1,14 @@
+{
+    "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
+    "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
+    "profile": { "name": "typicode" },
+    "students": [
+        { "id": 1, "last_name": "Ivanov", "first_name": "Ivan", "bdate": "01.01.1999", "groupId": 1 },
+        { "id": 2, "last_name": "Petrov", "first_name": "Petr", "bdate": "12.12.2000", "groupId": 1 },
+        { "id": 3, "last_name": "Sidorov", "first_name": "Sidr", "bdate": "12.12.2000", "groupId": 2 }
+    ],
+    "groups": [
+        { "id": 1, "name": "SomeGroup-11" },
+        { "id": 2, "name": "SomeGroup-12" }
+    ]
+}

js/banner.js

@@ -30,6 +30,7 @@ function myBanner(root) {
     const LAST_INDEX = banners.length - 1;
 
     // Получить сведения о баннере для показа и его настройках
+    // function getBannerConfig() {
     const getBannerConfig = () => {
         // Получить текущий баннер
         const currentElement = banners.find((banner) => banner.classList.contains("active"));

package.json

@@ -3,9 +3,11 @@
     "version": "1.0.0",
     "type": "module",
     "scripts": {
-        "start": "vite",
+        "start": "npm-run-all --parallel fake-back vite",
+        "vite": "vite",
         "serve": "http-server -p 3000 ./dist/",
         "build": "vite build",
+        "fake-back": "json-server -p 3001 --watch db.json",
         "prod": "npm-run-all build serve",
         "lint": "eslint . --ext js --report-unused-disable-directives --max-warnings 0"
     },
@@ -15,6 +17,7 @@
     },
     "devDependencies": {
         "http-server": "14.1.1",
+        "json-server": "1.0.0-beta.3",
         "vite": "5.4.8",
         "npm-run-all": "4.1.5",
         "eslint": "8.57.1",

page-js.html

@@ -35,57 +35,25 @@
             </div>
         </nav>
     </header>
-    <main class="container-fluid p-3">
+    <main id="students" class="container-fluid p-3">
     </main>
     <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
         Автор, 2022
     </footer>
     <script type="module">
-        function someFunc() {
-            return "world!";
-        }
+        const getPosts = async () => {
+            const students = document.getElementById("students");
+            const response = await fetch("http://localhost:3001/students?_embed=group");
+            const data = await response.json();
+            data.forEach(element => {
+                students.innerHTML += `<p>${element.last_name} - ${element.group.name}</p>`;
+            });
+            console.log(data);
+        };
 
-        const someFunc2 = function () {
-            return "asdasd";
-        }
-
-        const someFunc3 = () => "asdasd111";
-
-        const someFunc4 = (x, y) => x * y;
-
-        const TEST = `asdasd
-                asdasdasd
-        asdasdasd`;
-
-        const manufacturer = "lada";
-        const car = {
-            manufacturer,
-            speed: 10,
-            color: "red",
-            price: 1000.2,
-            print: () => `Color is`,
-        }
-
-        let x = "hello!";
-        console.log(x, someFunc(), someFunc2(), someFunc3(), someFunc4(3, 4));
-        x = 3;
-        console.log(`value is ${x} ${x * 2} price ${car.price}`, TEST, car, car.print());
-
-        let { speed, color, price } = car;
-
-        console.log(speed, color, price);
-
-        var arr = [1, 'asd', 'asd', false];
-        console.log(arr);
-
-        let arr1 = [1, 2, 3, 4];
-        let arr2 = ['a', 'b', 'c'];
-        let arr3 = [arr1, arr2];
-
-        console.log(arr3);
-
-        let func = (a, b, c, d) => a + b + c + d
-        console.log(func(...arr1))
+        document.addEventListener("DOMContentLoaded", () => {
+            getPosts();
+        });
     </script>
 </body>