API tools faq
paste
Advertisement
sphinx2001

simple-api.html

sphinx2001
May 6th, 2023
934
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>FastAPI client</title>
  6.     <style>
  7.         td {
  8.             padding: 5px;
  9.         }
  10.  
  11.         button {
  12.             margin: 5px;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.     <h2>Список пользователей</h2>
  19.     <div>
  20.         <input type="hidden" id="userId" />
  21.         <p>
  22.             Имя:<br />
  23.             <input id="userName" />
  24.         </p>
  25.         <p>
  26.             Возраст:<br />
  27.             <input id="userAge" type="number" />
  28.         </p>
  29.         <p>
  30.             <button id="saveBtn">Сохранить</button>
  31.             <button id="resetBtn">Сбросить</button>
  32.         </p>
  33.     </div>
  34.     <table>
  35.         <thead>
  36.             <tr>
  37.                 <th>Имя</th>
  38.                 <th>Возраст</th>
  39.                 <th></th>
  40.             </tr>
  41.         </thead>
  42.         <tbody>
  43.         </tbody>
  44.     </table>
  45.  
  46.     <script>
  47.         // Получение всех пользователей
  48.         async function getUsers() {
  49.             // отправляет запрос и получаем ответ
  50.             const response = await fetch("/api/users", {
  51.                 method: "GET",
  52.                 headers: { "Accept": "application/json" }
  53.             });
  54.             // если запрос прошел нормально
  55.             if (response.ok === true) {
  56.                 // получаем данные
  57.                 const users = await response.json();
  58.                 const rows = document.querySelector("tbody");
  59.                 // добавляем полученные элементы в таблицу
  60.                 users.forEach(user => rows.append(row(user)));
  61.             }
  62.         }
  63.         // Получение одного пользователя
  64.         async function getUser(id) {
  65.             const response = await fetch(`/api/users/${id}`, {
  66.                 method: "GET",
  67.                 headers: { "Accept": "application/json" }
  68.             });
  69.             if (response.ok === true) {
  70.                 const user = await response.json();
  71.                 document.getElementById("userId").value = user.id;
  72.                 document.getElementById("userName").value = user.name;
  73.                 document.getElementById("userAge").value = user.age;
  74.             }
  75.             else {
  76.                 // если произошла ошибка, получаем сообщение об ошибке
  77.                 const error = await response.json();
  78.                 console.log(error.message); // и выводим его на консоль
  79.             }
  80.         }
  81.         // Добавление пользователя
  82.         async function createUser(userName, userAge) {
  83.  
  84.             const response = await fetch("api/users", {
  85.                 method: "POST",
  86.                 headers: { "Accept": "application/json", "Content-Type": "application/json" },
  87.                 body: JSON.stringify({
  88.                     name: userName,
  89.                     age: parseInt(userAge, 10)
  90.                 })
  91.             });
  92.             if (response.ok === true) {
  93.                 const user = await response.json();
  94.                 document.querySelector("tbody").append(row(user));
  95.             }
  96.             else {
  97.                 const error = await response.json();
  98.                 console.log(error.message);
  99.             }
  100.         }
  101.         // Изменение пользователя
  102.         async function editUser(userId, userName, userAge) {
  103.             const response = await fetch("api/users", {
  104.                 method: "PUT",
  105.                 headers: { "Accept": "application/json", "Content-Type": "application/json" },
  106.                 body: JSON.stringify({
  107.                     id: userId,
  108.                     name: userName,
  109.                     age: parseInt(userAge, 10)
  110.                 })
  111.             });
  112.             if (response.ok === true) {
  113.                 const user = await response.json();
  114.                 document.querySelector(`tr[data-rowid='${user.id}']`).replaceWith(row(user));
  115.             }
  116.             else {
  117.                 const error = await response.json();
  118.                 console.log(error.message);
  119.             }
  120.         }
  121.         // Удаление пользователя
  122.         async function deleteUser(id) {
  123.             const response = await fetch(`/api/users/${id}`, {
  124.                 method: "DELETE",
  125.                 headers: { "Accept": "application/json" }
  126.             });
  127.             if (response.ok === true) {
  128.                 const user = await response.json();
  129.                 document.querySelector(`tr[data-rowid='${user.id}']`).remove();
  130.             }
  131.             else {
  132.                 const error = await response.json();
  133.                 console.log(error.message);
  134.             }
  135.         }
  136.  
  137.         // сброс данных формы после отправки
  138.         function reset() {
  139.             document.getElementById("userId").value =
  140.                 document.getElementById("userName").value =
  141.                 document.getElementById("userAge").value = "";
  142.         }
  143.         // создание строки для таблицы
  144.         function row(user) {
  145.  
  146.             const tr = document.createElement("tr");
  147.             tr.setAttribute("data-rowid", user.id);
  148.  
  149.             const nameTd = document.createElement("td");
  150.             nameTd.append(user.name);
  151.             tr.append(nameTd);
  152.  
  153.             const ageTd = document.createElement("td");
  154.             ageTd.append(user.age);
  155.             tr.append(ageTd);
  156.  
  157.             const linksTd = document.createElement("td");
  158.  
  159.             const editLink = document.createElement("button");
  160.             editLink.append("Изменить");
  161.             editLink.addEventListener("click", async () => await getUser(user.id));
  162.             linksTd.append(editLink);
  163.  
  164.             const removeLink = document.createElement("button");
  165.             removeLink.append("Удалить");
  166.             removeLink.addEventListener("click", async () => await deleteUser(user.id));
  167.  
  168.             linksTd.append(removeLink);
  169.             tr.appendChild(linksTd);
  170.  
  171.             return tr;
  172.         }
  173.         // сброс значений формы
  174.         document.getElementById("resetBtn").addEventListener("click", () => reset());
  175.  
  176.         // отправка формы
  177.         document.getElementById("saveBtn").addEventListener("click", async () => {
  178.  
  179.             const id = document.getElementById("userId").value;
  180.             const name = document.getElementById("userName").value;
  181.             const age = document.getElementById("userAge").value;
  182.             if (id === "")
  183.                 await createUser(name, age);
  184.             else
  185.                 await editUser(id, name, age);
  186.             reset();
  187.         });
  188.  
  189.         // загрузка пользователей
  190.         getUsers();
  191.     </script>
  192. </body>
  193. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!