Created
September 5, 2026 10:28
-
-
Save thinkphp/27680130b5a9382834fce4569fc1c84e to your computer and use it in GitHub Desktop.
server galerie cu documentatie
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const http = require('http') | |
| const fs = require('fs') | |
| const path = require('path') | |
| const port = 3000 | |
| function serveFile(res, filePath, contentType) { | |
| fs.readFile(filePath, (err, data) => { | |
| if( err ) { | |
| res.writeHead(500, {'Content-Type': 'text/plain'}) | |
| res.end('ERROR FILE READING'); | |
| return; | |
| } | |
| res.writeHead(200, {'Content-Type': contentType}); | |
| res.end( data ) | |
| }) | |
| } | |
| //create SERVER HTTP | |
| http.createServer((req, res) => { | |
| if(req.url === '/') { | |
| //pagina principala | |
| fs.readdir(path.join(__dirname,'public','images'), (err, files) => { | |
| if( err ) { | |
| res.writeHead(500, {'Content-Type': 'text/plain'}); | |
| res.end('Eroare la citirea directorului de imagini') | |
| return; | |
| } | |
| //filtra fisierele de tip imagine | |
| //regEXP regular expressions | |
| const imageFiles = files.filter(file =>/\.(jpg|jpeg|png|gif)$/.test( file )) | |
| let htmlContent = ` | |
| <!DOCTYPE html> | |
| <html lang = "en"> | |
| <head> | |
| <title>Galerie de imagini</title> | |
| <link rel="stylesheet" href="/style.css"> | |
| </head> | |
| <body> | |
| <h1>Galerie de imagini</h1> | |
| <div class="gallery"> | |
| `; | |
| imageFiles.forEach(image => { | |
| htmlContent += ` | |
| <div class="image-item"> | |
| <img src="/images/${image}" alt="${image}"> | |
| </div> | |
| `; | |
| }) | |
| htmlContent += `</div> </body> </html>`; | |
| res.writeHead(200, {'Content-Type': 'text/html'}) | |
| res.end( htmlContent ) | |
| }) | |
| } else if(req.url.startsWith('/images/')) { //verifica daca URL ul incepe cu images | |
| //serveste fisierele ca imagini | |
| const filePath = path.join(__dirname, 'public', req.url); //construieste calea | |
| serveFile(res, filePath, 'image/png'); | |
| } else if(req.url === '/style.css') { | |
| //serveste fisierul CSS | |
| serveFile(res, path.join(__dirname, 'public', 'style.css'), 'text/css') | |
| } else { | |
| res.writeHead(404, {'Content-Type': 'text/plain'}) | |
| res.end('Pagina nu a fost gasita') | |
| } | |
| }).listen(port, () => { | |
| console.log(`Serverul ruleaza la http://localhost:${port}`) | |
| }) | |
| /* | |
| 3 module importate Node.js | |
| http - permite crearea serverului WEB | |
| fs FILE SYSTEM permite citirea fisierelor si directoarelor | |
| path -> ajuta la construirea corecta a cailor catre fisre | |
| //path.join(__dirname, 'public', 'images') | |
| //construieste calea catre folderul | |
| proiect | |
| ---server.js | |
| ---public/ | |
| ....images | |
| __dirname = reprezinta folderul in care se afla fisierul javascript curent | |
| PORT | |
| const port = 3000 | |
| serverul va asculta pe portul 3000 | |
| asta inseamna ca vom accesa http://localhost:3000 | |
| serveFile() | |
| aceasta functie este folosita pentru a trimite un fisier catre BROWSER | |
| primeste 3 parametri: | |
| - res = este raspunsul pe care serverul il trimite browserului | |
| - filePath = este calea catre fisier | |
| c:\proiect\public\style.css | |
| - contentType = spune browser-ului ce tip de continut primeste | |
| "text/css" | |
| inseamna ca avem CSS | |
| pentru o imagine 'image/jpeg' sau 'image/png' | |
| fs.readFile(filePath, (err, data) => {....}) | |
| Node.js incearca sa citeasca fisierul. Daca apare o eroare: | |
| if( err ) { | |
| res.writeHead(500, {'Content-Type': 'text/plain'}) | |
| res.end("EROARE") | |
| return | |
| } | |
| Serverul trimite HTTP 500 adica o eroare interna | |
| Daca totul este OK | |
| res.writeHead(200, {'Content-Type': contentType}) | |
| status 200 inseamna ca totul este OK | |
| res.end( data ) | |
| CREAREA serverului | |
| http.createServer((req, res) => { | |
| }) | |
| AICI se creeaza serverul propriu-zis | |
| De fiecare data cand browserul face o cerere , functia primeste: req si res | |
| req = request CE CERE BROWSERUL | |
| GET / | |
| sau | |
| GET /images/poza1 | |
| GET /images/poza2 | |
| GET /images/poza3 | |
| res = response Raspunsul pe care serverul il trimite browserului | |
| Cand utilizatorul intra pe / | |
| if(req.url === '/') {...} | |
| daca acceseaza http://localhost:3000/ | |
| se executa blocul dela linia 34 | |
| Severul citeste folderul cu imagini | |
| fs.readdir(path.join(__dirname, 'public','images'), (err, files) => {) | |
| inseamna : da-mi lista fisierelor din acesta director | |
| public / | |
| images/ | |
| a.jpg | |
| b.jpg | |
| c.jpg | |
| d.jpg | |
| files va contine numele lor | |
| Filtrarea imaginilor | |
| const imageFiles = files.filter(file => /\.(jpg|gif|png|jpeg)$/.test(file)) | |
| file => .... | |
| este o functie arrow | |
| iar /\.(jpg|gif|png|jpeg)$ este expresia regulata | |
| poza1.jpg DA | |
| cat.jpeg DA | |
| document.txt NU | |
| document2.PDF NU | |
| animatie.gif DA | |
| Urmatorul PAS este contruirea HTML-ului | |
| let htmlContent = ` | |
| <!DOCTYPE html> | |
| <html lang = "en"> | |
| <head> | |
| <title>Galerie de imagini</title> | |
| <link rel="stylesheet" href="/style.css"> | |
| </head> | |
| <body> | |
| <h1>Galerie de imagini</h1> | |
| <div class="gallery"> | |
| `; | |
| //adaugarea imaginilor | |
| //serverul parcurge fiecare imagine | |
| imageFiles.forEach(image => { | |
| htmlContent += ` | |
| <div class="image-item"> | |
| <img src="/images/${image}" alt="${image}"> | |
| </div> | |
| `; | |
| }) | |
| <div class="image-item"> | |
| <img src="/images/image1" alt="image1"> | |
| </div> | |
| <div class="image-item"> | |
| <img src="/images/image2" alt="image2"> | |
| </div> | |
| <div class="image-item"> | |
| <img src="/images/image3" alt="image3"> | |
| </div> | |
| htmlContent += `</div> </body> </html>`; | |
| res.writeHead(200, {'Content-Type': 'text/html'}) | |
| res.end( htmlContent ) | |
| }) | |
| Cand browserul cere o imagine | |
| Dupa ce primeste HTML browserul bede <img src="/images/image.png"> | |
| face automat o noua cerere GET /images/image1.png | |
| //FISIERE CSS | |
| Daca browserul cere | |
| /style.css | |
| serverul ajunge la linia: linia 95 | |
| si executa serveFile(resm path.join(__dirname,'public','style.css'), 'text/css') | |
| astfel CSS-ul este trimis browserului | |
| //////////////////////////////////// | |
| URL necunoascut | |
| daca utilizatorul intra de exemplu pe http://localhost:3000/test | |
| nu se potriveste cu niciuna din CONDITII, se executa linia 101 adica : | |
| ....else { | |
| res.writeHead(404, {'Content-Type':'text/plain'}) | |
| res.end('Pagina nu a fost gasita') | |
| } | |
| 404 inseamna NOT FOUND resursa nu exista | |
| Final: | |
| serverul porneste si asculta la portul 3000 | |
| Fluxul este urmatourl: | |
| Browser | |
| || | |
| \/ | |
| GET / | |
| node.js server | |
| --- citeste public/images | |
| --- gaseste: | |
| image1.png | |
| image2.png | |
| image3.png | |
| ......construieste HTML | |
| || | |
| \/ | |
| BROWSER | |
| GET /style.css | |
| GET /images/poza1.png | |
| GET /images/poza2.png | |
| GET /images/poza3.png | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment