ukryj menu
SPEC
aktualizacja: 2021-10-20 10:09:03
1. GET a POST
https://pl.wikipedia.org/wiki/GET_(metoda)
https://pl.wikipedia.org/wiki/POST_(metoda)kopiuj
2. formularze - przesył danych metodą GET
dodaj plik server01.js
w katalogu static aplikacji zamieść stronę o nazwie formularz.html (nie index.html !!) z formularzem zawierającym:
- input hidden z dowolnym name
- input color z dowolnym name
- input radio z dowolnym name
- dwa inputy checkbox z tym samym name i różnymi value
- button submit
wszystko w poniższym formularzu:
<form action="/handleForm" method="GET"></form>kopiuj
wysłanie strony z formularzem do przeglądarki
app.get("/", function(req, res){
// res.sendFile(...)
})kopiuj
odbiór przesłanych danych na serwerze po kliknięciu butona
app.get("/handleForm", function(req, res){
console.log(req.query.color)
})kopiuj
a) odeślij przesłane dane do klienta (res.send(...))
b) zwróć uwagę na pasek adresu z przesyłanymi danymi
3. formularze - przesył danych metodą GET - ćwiczenie
dodaj plik server02.js (kopia poprzedniego)
a) po przesłaniu koloru z inputa typu color, odeślij stringa tworzącego stronę, w wybranym kolorze tła
4. formularze - przesył danych metodą POST
dodaj plik server03.js
formularz jak poprzednio, tylko metoda POST
<form action="/handleForm" method="POST"></form>kopiuj
do parsowania na obiekty danych przesyłanych w formularzu, potrzebny jest body-parser
przed app.get(...)
obowiązujące obecnie wersje body parsera
w Express v4.16.0 i wyżej
const express = require('express');
app.use(express.urlencoded({
extended: true
}));kopiuj
dla Express < 4.16.0
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true
}));kopiuj
const express = require('express');
app.use(express.urlencoded({
extended: true
}));kopiuj
dla Express < 4.16.0
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true
}));kopiuj
odbiór danych na serwerze
app.post("/handleForm", function(req, res){
console.log(req.body)
})kopiuj
a) odeślij przesłane dane do klienta
b) odeślij pustą stronę w wybranym kolorze tła
c) zwróć uwagę na pasek adresu
5. zadanie - newsletter
dodaj plik server04.js
na serwerze tworzymy wstępną tablicę obiektów zawierającą dane kilku userów (nick, email)
let users = [
{nick:"111", email:"111@w.pl"},
{nick:"222", email:"222@w.pl"},
{nick:"333", email:"333@w.pl"}
]
kopiuj
a) strona addUser.html
- wymusza wpisanie poprawnego emaila po stronie klienta i serwera
- umożliwia dodanie danych usera do powyższej tablicy obiektów na serwerze
- warunek - dany mail nie istnieje, jeśli jest inaczej - komunikat odsyłany do przeglądarki: "taki mail już jest w bazie"
- wysłane formularzem dane to: nick, email
b) adres /removeUserBySelect umożliwia usunięcie z tablicy wybranego w select usera
c) adres /removeUserByRadio umożliwia usunięcie z tablicy wybranego w radiobuttonie usera
d) adres /removeUserByCheckbox umożliwia usunięcie z tablicy wybranych w checkboxach userów
6. pesel
wykonaj formularz, wysyłający pesel na serwer (testuj na swoim peselu)
serwer sprawdza czy:
- pesel jest poprawny
- właściciel pesela jest danej płci
- pokazuje się data urodzenia
dane o peselu do samodzielnej analizy:
https://obywatel.gov.pl/pl/dokumenty-i-dane-osobowe/czym-jest-numer-pesel