Segédlet

Command-ok

Commandok a backend létrehozásához.


npm init -y                                 // package.json létrehozása

npm i http fs typescript --save-dev         // szükséges csomagok telepítése

npx tsc --init                              // alapértelmezett tsconfig.json létrehozása

npx tsc                                     // fordítás

Importok

A szükséges csomagok importálása.


import http, { IncomingMessage, ServerResponse } from "http";
import fs from "fs";

Interface

Példa interface


interface [interface neve] {
  title : string
  duration : number
  explicit : boolean
}

Fájlok beolvasása és server létrehozása

fs és http használatával


fs.readFile('[fajlnev].json', 'utf-8', (err : any, data : string) => {
  if (err) {
    console.error('Error reading [fajlnev].json:', err);
    return;
  }
  const test : [interface neve][] = JSON.parse(data);
  const server = http.createServer((req : IncomingMessage, res : ServerResponse) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('content-type', 'application/json; charset=utf-8');
    res.end(JSON.stringify(test));
  });
  server.listen(3000, () => {
    console.log('Server is listening on port 3000');
  });
});

Adatok rendezése

.sort használatával


test.sort((a, b) => a.[kitétel] - b.[kitétel]);       // valami szerint növekvő
test.sort((a, b) => b.[kitétel] - a.[kitétel]);       // valami szerint csökkenő

Command-ok

Commandok a frontend létrehozásához.


npm create vite@latest [project-name]       //itt válaszd a vanilla-t és a TypeScript-et

cd [project-name]

npm i
s
npm run dev

Adatok fetchelése

Példa


const data = await fetch('http://localhost:3000');
const test = await data.json();
console.log(test);

Kiíratás

Példa kiíratás listával


const ul = document.createElement("ul");
test.forEach((valami) => {
    const listItem = document.createElement("li");
    listItem.textContent = valami.title;
    ul.appendChild(listItem);
});
document.body.appendChild(ul);

Kiíratás

Példa kiíratás táblázatban


const table = document.createElement("table");
const headerRow = document.createElement("tr");
headerRow.innerHTML = "CímHosszExplicit";
table.appendChild(headerRow);

test.forEach((valami) => {
    const row = document.createElement("tr");
    row.innerHTML = `${valami.title}${valami.duration}${valami.explicit}`;
    table.appendChild(row);
});

document.body.appendChild(table);

Backend

Frontend