docTZT - Laboratorium 5 Node.js: parametry w URL, proste szablony
download 
Reklamacja Transkrypt
TZT - Laboratorium 5 Node.js: parametry w URL, proste szablony
TZT - Laboratorium 5
Node.js: parametry w URL, proste szablony
Zadanie 1 – parametry w adresie URL
Tworzymy aplikację w Node.js z użyciem Express. Aplikacja ma obsługiwać adres URL z dwoma
parametrami:
• imie,
• wiek,
które trzeba pobrać i wyświetlić odpowiednią informację użytkownikowi w przeglądarce, jak poniżej:
Zadanie 2 – dwie funkcje do jednego adresu URL
Tworzymy drugą funkcję, która dla adresu ULR postaci /:imie/edycja wyświetli nam prosty napis:
„Edycja imienia „+imie. Jak to zrobić skoro adres URL z pierwszego polecenia przechwytuje adres i
wyświetla jak na obrazku?
Przeanalizuj poniższy kod, dodaj do programu, sprawdź działanie. Następnie zdobytą wiedzę
wykorzystaj do zrobienia tego zadania. Zobacz parametr next i metodę next().
app.get('/owoc/:nazwa', function (req, res, next) {
var nazwa = req.params.nazwa;
if(nazwa==='zjedz') {
next();
return;
}
res.send('Mam owoc o nazwie '+nazwa+'.');
});
app.get('/owoc/zjedz', function (req, res) {
res.send('Jem owoc.');
});
Jak inaczej można rozwiązać ten problem?
Zadanie 3 – prosty silnik szablonów
Proszę wykorzystać dowolny silnik szablonów aby wyświetlić pod adresem /szablon prosty
formularz z nazwą aplikacji i nazwą owocu przekazywanymi jako zmienne do szablonu. Oczekiwany
wynik:
Należy zainstalować odpowiedni silnik szablonów, np.: npm install --save hjs
Dodać obsługę zainstalowanych szablonów, dodać plik szablonu (szablon.hjs) i wykorzystać szablon
metodą render()
Zabacz działający kod szablonu na przykładzie poniżej (plik index.js):
app.set('views', __dirname);
app.set('view engine', 'hjs');
app.get('/witaj', function (req, res) {
var Osoba = {
imie: "Janek",
wiek: 35
}
res.render('szablon', Osoba);
});
Zawartość pliku szablon.hjs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Szablon</title>
</head>
<body>
<p>Witaj {{imie}}. Masz {{wiek}} lat.</p>
</body>
</html>
Zadanie 4 – dwa szablony zwracane pod jednym adresem URL
Do zadania 3 proszę dodać drugi szablon, który będzie zawiera nagłówek strony. Zrenderowaną
zawartość obu szablonów proszę wczytać do jednej zmiennej tekstowej łącząc je i razem wyświetlając
na stronie. Wykorzystamy do tego metodę app.render(...) jak poniżej:
var dane = 'Jakieś dane ...';
// zawartość szablonu zapisana w zmiennej, która jest następnie zwrócona do
przeglądarki
app.render('szablon', Osoba, function(err, html) {
dane += html; // dopisanie szablonu
res.send(dane);
});
Zadanie 5 – bardziej kompleksowa obsługa danych w bazie, przygotowanie pod sprawozdanie
Tworzymy w Redis tablice asocjacyjne zawierające informację o dwóch studentach. Nazwa kluczy
powinna zawierać numer indeksu danego studenta. Informacje o każdym studencie, przykładowe:
• imie → „Jan”
• nazwisko → „Kowalski”
• dataur → „19970323”
• specjalnosc → „ABiBD”
Odpowiednimi poleceniami proszę wyświetlić:
• całą zawartość tablicy (pola i ich wartości),
• liczbę wszystkich pól.
Poleceniem KEY proszę wyświetlić z wszystkich kluczy dostępnych w bazie tylko te, które odnoszą
się do naszych dwóch studentów (odpowiednie wyrażenie regularne).
Zakładając, że są to klucze s:12045 i s:34056 proszę oprogramować obsługę odpowiednich adresów
URL zawierających odpowiednie informacje o naszych studentach. Proszę oprogramować poniższą
funkcjonalność:
Adres URL
Metoda Opis funkcjonalności
/studenci
GET
Zwraca listę studentów (wszystkie klucze postaci s:?????).
Numery indeksów powinny być odnośnikami do konkretnych
studentów, np. /student/12045.
/student/:index
GET
Zwraca informację o konkretnym studencie, nazwy kluczy i
zawartości pól.
/student/:index/add
GET
Wyświetla formularz z pustymi polami pozwalającymi dodać
nowego studenta do bazy.
/student/:index/add
POST
Dodaje studenta do bazy według pól przesłanych w
formularzu.
/student/:index/delete
POST
Usuwa danego studenta z bazy.
/student/:index/:pole/delete
POST
Usuwa jedno z pól danego studenta.
/student/:index/edit
GET
Wyświetla formularz pozwalający na edycję danych studenta.
Najlepiej jakby formularz miał już wczytane wartości z bazy
żeby użytkownik tylko zmieniał to co chce.
/student/:index/update
POST
Aktualizuje zawartość danego studenta zgodnie z tym co
przesłał formularz dostępny pod adresem /student/:index/edit
/student/:index/:pole/edit
GET
Wyświetla formularz z możliwością aktualizacji wartości
jednego pola danego studenta.
/student/:index/:pole/update POST Analogicznie jak wyżej...
Można, a nawet trzeba dodać obsługę szablonów, parametry w adresie URL, można troszkę
popracować nad wyglądem (ale bez przesady). To zadanie będzie świetnym wprowadzeniem do
przygotowania sprawozdania na ocenę.
Zadanie 6 – DLA CHĘTNYCH, zdalna baza działająca online
Można sobie założyć konto na https://redislabs.com/ - uzyskamy dostęp do darmowej bazy redis. Z
taką bazą należy się najpierw połączyć przez redis-cli, sprawdzić działanie. Następnie podmieniamy
połączenie z zadania pierwszego (localhost → baza z redislab).
Powinno działać.
Zadanie 7 – DLA CHĘTNYCH, cała aplikacja działająca online
Wykorzystując jakiś darmowy hosting Node.js, np. https://www.heroku.com/, tworzymy sobie projekt,
który działa online. Instrukcje po założeniu konta na heroku:
https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction
Oczywiście jeśli ktoś ma swój własny hosting albo zna lepszy jak najbardziej można wykorzystać.
Można zrobić jakąś prostą aplikację na zaliczenie sprawozdania 1, np.:
https://rperlinski.herokuapp.com
