LEKCJA 01 - EXPRESS (p) - GET

1. serwer NodeJS

Node.js – środowisko programistyczne zaprojektowane do tworzenia wysoce skalowalnych aplikacji internetowych,
szczególnie serwerów www napisanych w języku JavaScript. Umożliwia tworzenie aplikacji sterowanych zdarzeniami
wykorzystujących asynchroniczny system wejścia-wyjścia. Jest aplikacją open source. [Wikipedia]

https://nodejs.orgkopiuj

otwieramy cmd na folderze lekcji i z konsoli - sprawdzamy czy Node jest zainstalowany:

node --versionkopiuj


2. Framework Express

Express - framework web dla serwera NodeJS

http://expressjs.com/kopiuj

instalacja na serwerze Node:
tworzymy katalog na aplikację i w konsoli wpisujemy

npm install expresskopiuj

z repozytorium npm pobiera się zestaw bibliotek express-a
wszystkie zostają skopiowane do katalogu node_modules
w katalogu naszej aplikacji

3. podstawowa struktura aplikacji na dziś

{katalog_lekcji}
|   
|__ static
|   |__ css
|   |   |__style.css
|   |
|   |__ gfx
|   |   |__plik.png
|   |
|   |__ js
|   |   |__script.js
|   |
|   |__ index.html
|   
|__ server.jskopiuj


4. bazowy plik serwera NodeJS plus framework Express - plik server01.js

zmienne, stałe

var express = require("express")
var app = express()
const PORT = 3000;kopiuj

nasłuch na określonym porcie

app.listen(PORT, function () {
    console.log("start serwera na porcie " + PORT )
})kopiuj

ćwiczenie
tworzymy pliki wg powyższej struktury:

index.html
css/style.css z dowolnym stylem
js/script.js z dowolnym skryptem js
gfx/plik.png
linkujemy je względnie wobec strony index.html

przed app.listen(...) dodajemy gotowy routing, czyli informację dla serwera,
gdzie znajdują się statyczne pliki aplikacji (czyli podkatalog /static)

app.use(express.static('static'))kopiuj

teraz serwer wie skąd pobierać pliki js,css,gfx i stronę index.html
taki routing oznacza, że do przeglądarki zwracana jest strona index.html z katalogu /static, nie inna

start serwera

node server.jskopiuj

wpisujemy w przeglądarce adres localhost:3000 i sprawdzamy:
- czy w przeglądarce uruchamia się strona, grafika, style i js
- obserwujemy konsolę serwera i jej komunikaty


5. komunikaty serwera do przeglądarki - routing adresu

dodaj bazowy plik server02.js

przed app.listen(...) dodajemy własny routing: obsługę żądania typu GET
własny routing umożliwia obsługę żądania innych stron niż index.html
lub odesłanie prostych komunikatów metodą res.send()

app.get("/", function (req, res) {
    res.send("dane html odesłane z serwera do przeglądarki")   
})kopiuj

uwaga, teraz NIE używamy

app.use(express.static('static'))

wpisujemy w przeglądarce adres localhost:3000 i sprawdzamy:
- czy w przeglądarce widać napis "dane html odesłane z serwera do przeglądarki"


6. ćwiczenie - serwowanie strony html w zależności od adresu url, czyli obsługa adresów typu:

http://www.domain.com/
http://www.domain.com/index.html
http://www.domain.com/indexkopiuj

dodaj bazowy plik server03.js

var path = require("path")kopiuj

app.get("/", function (req, res) {
    console.log("ścieżka do katalogu głównego aplikacji: "+__dirname)
    res.sendFile(path.join(__dirname + "/static/strona.html"))
    
})kopiuj

i

app.get("/strona", function (req, res) {
    res.sendFile(path.join(__dirname + "/static/strona.html"))
    console.log(__dirname)
})kopiuj


gdzie __dirname to wbudowana stała wartość określająca adres głównego katalogu naszej aplikacji

aby serwer widział zasoby css, gfx, js z katalogu "static" :

app.use(express.static('static'))kopiuj

teraz wpisujemy w przeglądarce adres localhost:3000 lub localhost:3000/strona i sprawdzamy:
- czy w przeglądarce uruchamia się strona
- obserwujemy konsolę serwera

w obu wypadkach serwer dostarcza stronę strona.html do przeglądarki


http://www.domain.com/?p1=3
http://www.domain.com/?p1=666&p2=5kopiuj

dodaj bazowy plik server04.js

czytanie parametrów z adresu i odesłanie ich do przeglądarki

app.get('/', function (req, res) {   
    console.log(req.query) // to jest obiekt z danymi pobranymi z paska adresu    
    console.log(req.query.p1) // to jest jedno pole (właściwość) tego obiektu   
    res.send(req.query) // odesłanie obiektu z danymi z powrotem do przeglądarki   
});kopiuj

- obserwujemy konsolę serwera i przeglądarkę


http://www.domain.com/user/idkopiuj

dodaj bazowy plik server05.js

a w nim :

app.get('/user/:id', function (req, res) {
    
    var id = req.params.id
    if (id == 2)
        res.send("odsyłam stronę usera z id = 2")
    else
        res.send("taki user nie istnieje")
});kopiuj

- obserwujemy konsolę serwera

9. ćwiczenie - cookies - wysłanie cookie do przeglądarki i odebranie na serwerze


dodaj bazowy plik server06.js

app.use(cookieParser())kopiuj

ustawienie cookie na 2 godziny

app.get('/', function (req, res) {
    res        
        .cookie("cookieA", "aaa", { expires: new Date(Date.now() + 1000 * 60 * 60 * 4) , httpOnly:true})
        .send('cookieA zostało ustawione')

    console.log("cookies :  ", req.cookies);
   
});kopiuj

-sprawdź czy cookies widać w przeglądarce:
chrome f12 / Application / Cookies
lub firefox f12 / dane / ciasteczka
- obserwuj konsolę serwera

https://pl.wikipedia.org/wiki/HTTP_cookie

Uwaga techniczna: Flaga httpOnly = true wpływa na bezpieczeństwo w ten sposób, że blokuje próby odczytu cookie z tą flagą przez API inne niż HTTP. Oznacza to, że np. JavaScript nie może odczytać takiego cookie


200 - ok, wysyłane defaultowo z serwera przy wykonaniu funkcji res.send() lub res.sendFile()
401 - brak autoryzacji
403 - dostęp zabroniony
404 - brak strony
500 - wewnętrzny błąd serwera

dodaj bazowy plik server07.js

app.get('/', function (req, res) {
    res.status(404).send("brak strony takiego produktu")
})kopiuj

sprawdź status w przeglądarce

f12 / network / status

dokumentacja

https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

11. Zadania

A. serwowanie różnych stron

http://localhost:3000/koty
http://localhost:3000/auta
http://localhost:3000/drzewa

- dodaj trzy strony html w katalogu static/pages,
- ten katalog NIE ma zawierać innych plików
- na każdej stronie akapit z dowolnym tekstem,
- w pliku css trzy style dla tych akapitów
- napisz plik serwer08.js obsługujący routing tych trzech stron
- wpisuj w adresie serwera nazwy stron bez .html i sprawdzaj czy działają strony i style

B. querystring

http://localhost:3000/?count=4&bg=red

- napisz plik serwer09.js
- funkcji res.send() aby zwrócić do przeglądarki najprostszy string html z taką
ilością divów jak w przykładowym adresie zapytania oraz w takim kolorze tła
- na serwere napisz funkcję przyjmującą oba parametry, a zwracającą cały plik html w postaci stringa

C. querystring

http://localhost:3000/?value=180&toRad=true
http://localhost:3000/?value=1&toRad=false

napisz plik serwer10.js

- napisz na serwerze funkcję, która przeliczy stopnie na radiany lub radiany na stopnie
przyjmującą parametry jak w powyższych adresach, i zwróci wynik do przeglądarki, w postaci:

"180 stopni to 3,14 radianów"
lub
"1 radian to 57,30 stopni"

D. parametry w url-u

napisz plik serwer11.js

- utwórz 3 strony product1.html, product2.html, product3.html w katalogu static/products
- ten katalog nie ma zawierać innych plików
- na każdej stronie wstaw inny obrazek i napis, sformatowane w pliku css (wielkość obrazka, kolor napisu)

http://localhost:3000/product_id/1

- w zależności od id produktu w url-u, zwróć inną stronę html do przeglądarki
- jeśli wpisane id nie mieści się w zakresie 1-3, zwróć do przeglądarki zrozumiałą informację o braku produktu i jego strony

E. parametry w url-u, linki

napisz plik serwer12.js

- wygeneruj na serwerze 50 linków (znaczników a href) kierującymi do losowych adresów od 0 do 100, np /product/23 etc
- po kliknięciu dowolnego z nich, przechodzimy w przeglądarce do danego adresu
- obsługujemy ten adres na serwerze jak w zadaniu poprzednim
- serwer zwraca do przeglądarki napis np: "podstrona z danymi produktu o id = 23"