Strona internetowa Node.js, część 2: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

Witamy w CZĘŚCI 2!!

To jest część 2 mojego samouczka aplikacji witryny Node.js. Podzieliłem ten samouczek na dwie części, ponieważ oddziela tych, którzy potrzebują tylko krótkiego wprowadzenia, i tych, którzy chcą pełnego samouczka na stronie internetowej.

Przejdę przez proces tworzenia mojej witryny. Twoje może być inne, więc podążaj za moimi i poznaj używane techniki. Po wybraniu innego szablonu HTML przepływ będzie tylko nieco inny. Pamiętaj o tym.

Krok 1: Struktura aplikacji

Więc moja strona podąża za generatorem ekspresowym, jednak używałem kierownicy zamiast jadeitu. Jeśli lubisz jadeit, idź na to! Jade jest skrótem HTML bez wszystkich nawiasów i divów. Jeśli nie rozumiesz, że możesz odwiedzić youtube i obejrzeć kilka samouczków HTML.

Wolę i czuję się bardziej komfortowo z HTML i kierownicami, więc tego właśnie używałem. Aby utworzyć projekt ekspresowy z kierownicami, uruchom polecenie ekspresowe.

express --hbs nazwamojejaplikacji

Następnie przejdź do kroku w części 1, aby zainstalować całe oprogramowanie pośredniczące.

Express tworzy bardzo specyficzną strukturę aplikacji i bardzo użyteczną, większość aplikacji node.js stosuje tę formę z pewnymi odmianami.

Na załączonym zdjęciu widać różne foldery i pliki, poniżej staram się to wszystko wyjaśnić.

kosz

Jest to folder, który jest uruchamiany jako pierwszy, gdy node.js uruchamia serwer. Wyszukuje plik www i podąża za tym plikiem w celu wykonania. Plik www mówi node.js, aby uruchomił serwer na porcie 3000 (może to zmienić się na prawie wszystko) i wykonał kilka innych rzeczy, takich jak nasłuchiwanie zdarzeń i tym podobne. Najważniejszą rzeczą jest port, na którym jest skonfigurowana Twoja aplikacja.

node_modules

W tym folderze znajduje się to, co nazywa się oprogramowaniem pośredniczącym. Oprogramowanie pośrednie, które lubię wyjaśniać jako dodatkowe oprogramowanie, aby ułatwić ci kodowanie. Są to w zasadzie inne biblioteki z funkcjami gotowymi do użycia. Niektóre dodatkowe oprogramowanie pośredniczące, którego użyłem w tym projekcie, to Nodemailer, Passport, Nodemon, bycrypt i inne.

publiczny

Tutaj trafią wszystkie Twoje obrazy, CSS i JavaScript dla Twojej witryny. Są one bezpośrednio wykorzystywane przez strony internetowe.

trasy

Są to zdefiniowane trasy dla Twojej witryny. Takich jak strona główna, strona logowania i inne.

wyświetlenia

Jak widać, widoki są plikami.hbs lub.handlebars, albo zadziała, wystarczy trochę manipulacji plikiem app.js. To są strony html twoich kierownic, które będą wyświetlane w przeglądarce. Układ to główny plik układu, który czasami znajduje się w osobnym podfolderze układu. Główny plik układu odwołuje się do innych plików kierownicy i wyświetla je, będzie to bardziej sensowne, gdy zagłębimy się w kod.

app.js

To jest główny plik aplikacji, czasami nazywany serwerem, zależy tylko od konfiguracji. Ten plik zawiera całą konfigurację serwera, a nawet niektóre funkcje specjalne. Będzie to również obsługa błędów.

pakiet.json

Ten plik jest tworzony przez express i informuje npm o całym oprogramowaniu pośredniczącym, którego chcesz użyć w swoim projekcie. Po uruchomieniu instalacji npm, całe oprogramowanie pośrednie wywołane w tym pliku zostanie zainstalowane w folderze node_modules.

Krok 2: Rozplanuj swój szablon

Możesz stworzyć cały swój kod HTML od podstaw lub użyć szablonu. Użyłem szablonu dla tej strony. Inne strony, w których rozwoju pomogłem, kodowałem od podstaw. Wybór należy do Ciebie, ten krok wyjaśnia układ szablonu.

Moja aplikacja internetowa używa szablonu bootstrap, który świetnie nadaje się do tworzenia niesamowitych CSS. Aby znaleźć szablony, odwiedź tę stronę. Jak wspomniano wcześniej w poprzednim kroku, wszystkie potrzebne pliki css, js i img znajdują się w folderze publicznym. Pliki te sprawiają, że witryna wygląda lepiej niż zwykły tekst i to w jaki sposób obrazy są używane w witrynie.

Aby styl szablonów kierownicy działał z szablonem Strony są podzielone na dwie części. Pierwszym jest to, co określa się mianem „układu”. Układ to właściwości, które chciałbyś, aby były wyświetlane na każdej stronie internetowej w Twojej witrynie. W moim przypadku jest to nagłówek, który zawiera pasek nawigacji i stopkę, która zawiera dodatkowe elementy nawigacji i wyświetlania.

Plik układu i inne pliki kierownicy znajdują się w folderze widoków. Przejdę do prostszego układu z generatora ekspresowego, którego używałeś wcześniej, aby pokazać, jak działa koncepcja, a następnie możesz zobaczyć mój kod i porównać je.

Ekspresowo wygenerowany plik layout.handlebars

{{tytuł}} {{{ciało}}}

Prawdziwa magia kierownicy tkwi w kierownicy {{title}} i {{{body}}}. Czyli te dwa działają inaczej {{title}} jest zmienną, która jest przekazywana z pliku index.js w trasach, po przekazaniu do szablonu, który jest wyświetlany. Znacznik {{{body}}} przyjmuje to, co zostało wywołane w funkcji render w pliku js trasy. W naszym przypadku index.js ma ten wiersz:

res.render('index', { title: 'Express', count: userCount});

To wywołuje plik 'indeks' tego, co kiedykolwiek używałeś, jadeit, kierownice i tak dalej, więc w naszym przypadku index.handlebars.

Ekspresowe wygenerowane index.handlebars

{{tytuł}}

Witamy w {{title}}

Plik index.handlebars jest przekazywany jako zmienna do tagu {{{body}}} i wyświetlany na Twojej stronie internetowej.

Dzięki temu możesz mieć statyczną część witryny i zmienną część. To sprawia, że nagłówki i stopki są przyjemne, ponieważ nie musisz ponownie renderować całej strony, podczas ładowania nowej strony zmieniane są tylko niektóre informacje.

Krok 3: Formularz kontaktowy

Do mojej strony internetowej włączyłem formularz kontaktowy, aby każdy mógł wysłać e-mail do mojej witryny z pytaniami lub komentarzami.

Ten formularz kontaktowy używał oprogramowania pośredniczącego npm o nazwie Node Mailer.

Konfiguracja Node Mailera

Aby zainstalować node-mailer, wystarczy uruchomić poniższy kod w pliku najwyższego poziomu, w naszym przypadku myapp.

sudo npm zainstaluj nodemailer

Po zainstalowaniu będziesz musiał skonfigurować kilka rzeczy w swoim pliku app.js.

Pierwsza to tylko zależność, która informuje węzeł, że planujemy użyć tego oprogramowania pośredniczącego.

var nodemailer = require('nodemailer');

Drugi to nasz transporter, transporter służy do łączenia się z serwerem pocztowym, w moim przypadku gmail.

//Transporter używany do uzyskania konta Gmail

var transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eusercontentSecret.com'google: 'Q775xefdHA_BGu3ZnY9-6sP-' refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc' accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

jeśli używasz nodemailer z innym serwerem pocztowym, zajrzyj tutaj, aby uzyskać dokumentację i pomoc.

Kilka rzeczy zmieni się z osoby na osobę: użytkownik, clientId, clientSecret. refreshToken i accessToken.

Twój identyfikator użytkownika to adres e-mail, którego chcesz użyć. Utworzyłem nowy, nazwany tak samo jak moja witryna.

ClientId, clientSecret, refreshToken i accessToken należy znaleźć na swoim koncie Google.

Jeśli potrzebujesz więcej pomocy, możesz śledzić ten film tutaj.

Po wypełnieniu wszystkich tych pól dodamy szczegóły naszej wiadomości.

Następnie musimy sprawdzić, czy wszystkie pola w naszym formularzu zostały wprowadzone i są prawidłowymi odpowiedziami.

// Express Validatorapp.use(expressValidator({ errorFormatter: function(param, msg, value) { var namespace = param.split('.'), root = namespace.shift(), formParam = root; while(namespace.length) { formParam += '[' + namespace.shift() + ']'; } return { param: formParam, msg: msg, value: value }; } }));

Teraz musimy uzyskać informacje z naszego formularza kontaktowego na naszej stronie internetowej i wysłać wiadomość.

//Post z przycisku przesyłania kontaktu, należy utworzyć stronę główną z komunikatem o powodzeniu przesłanych formularzy.post('/contact_Form', function(req, res){ //Pobierz informacje z formularza kontaktowego ze strony homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = { //tworzy informacje używane podczas wysyłania wiadomości z: ' Automatyczny e-mail”, na adres: '[email protected]', temat: 'Formularz kontaktowy witryny: ' + nazwa, tekst: 'Otrzymałeś nową wiadomość z formularza kontaktowego swojej witryny.\n\n' + 'Tutaj są szczegóły:\n\nNazwa: ' + nazwa + '\n\nE-mail: ' + email + '\n\nTelefon: ' + telefon + '\n\nWiadomość:\n' + wiadomość } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Błąd'); }else { console.log('Wysłany e-mail'); } }) res.render('index'); //render nowa strona główna, sprawdź, jak to zrobić z komunikatem o sukcesie, takim jak strona wylogowania })

Lampa błyskowa

Flash służy do wyświetlania wiadomości po wykonaniu czynności. Możesz to zobaczyć, gdy przesyłasz formularz lub nie wpisujesz poprawnie pola.

Zainstaluj flash tak jak inne oprogramowanie pośredniczące npm.

sudo npm zainstaluj połączenie flash

var flash = require('connect-flash'); //miała funkcję flash do wyświetlania komunikatów na ekranie

// Połącz Flashapp.use(flash());

Włącz flash, który przesyła i aktualizuje wiadomości na stronie internetowej. Są to komunikaty, które mówią takie rzeczy, jak sukces lub niepoprawne wprowadzenie informacji.

// Globalne Vars

app.use(function (req, res, next) { res.locals.success_msg = req.flash('success_msg'); res.locals.error_msg = req.flash('error_msg'); res.locals.error = req.flash('błąd'); res.locals.user = req.user || null; next(); });

Niektórzy potrzebują zmiennych związanych z flashem.

Proszę o zrobiony formularz kontaktowy.

Krok 4: Strona logowania

To było po prostu coś, co chciałem zobaczyć, czy mogę to zrobić i może użyję tego w przyszłości. Chciałem tylko wyjaśnić kod tak, jak jest w moim repozytorium git.

Tak więc ta część używa jeszcze kilku programów pośredniczących npm. Zainstaluj następujące elementy, korzystając z poniższych poleceń.

npm zainstaluj paszport && npm zainstaluj paszport-lokalny && npm zainstaluj bcryptjs

&& umożliwia uruchamianie wielu poleceń w jednym wierszu.

Logowanie i użytkownicy

Będziesz musiał utworzyć plik login.js i user.js w folderze tras. Posłuży to do stworzenia użytkownika, który będzie przechowywany w naszej bazie danych i umożliwi użytkownikowi zalogowanie się poprzez sprawdzenie bazy danych.

user.js

var express = require('express');var router = express. Router(); var paszport = require('paszport'); var LocalStrategy = require('passport-local'). Strategy; var Użytkownik = wymagaj('../models/użytkownik'); // Zarejestruj router.get('/register', function(req, res){ res.render('register'); }); //Zarejestruj użytkownika router.post('/register', function(req, res){ var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Walidacja req.checkBody('name', 'Nazwa jest wymagana').notEmpty(); req.checkBody('email', 'Adres e-mail jest wymagany').notEmpty(); req.checkBody('email', 'Adres e-mail jest nieprawidłowy').isEmail(); req.checkBody('nazwa użytkownika', 'Nazwa użytkownika jest wymagana').notEmpty(); req.checkBody(' password', 'Hasło jest wymagane').notEmpty(); req.checkBody('password2', 'Hasła nie pasują').equals(req.body.password); var errors = req.validationErrors();if(błędy){ res.render('register', { error:errors }); } else { var newUser = new User({ name: name, email:email, username: username, password: password }); User.createUser(newUser, function(err, user){ if(err) throw err; console.log(user); }); req.flash('success_msg', 'Jesteś zarejestrowany i możesz się teraz zalogować'); res.redirect(' /Zaloguj sie'); } });

Rozkładanie tego kawałek po kawałku

Najpierw dołączamy całe potrzebne oprogramowanie pośredniczące, a następnie dołączamy nasz plik modelu, który jest wyjaśniony poniżej. Trasujemy z tagu rejestru i wyświetlamy tekst na kierownicy rejestru. Wtedy przychodzi ważna funkcja. Pozwalają nam one zarejestrować nowego użytkownika w naszej bazie danych. Funkcja sprawdza, czy wszystkie pola są prawidłowe i zawarte w formularzu, jeśli nie, zapyta o nie. Następnie sprawdza, czy nie ma błędów, a jeśli nie wystąpią żadne błędy, tworzy nowego użytkownika z podanymi informacjami. Następnie przekierowuje do strony logowania, umożliwiając zalogowanie się.

login.js

var express = require('express');

var router = express. Router();var paszport = require('paszport'); var LocalStrategy = require('passport-local'). Strategy; var Użytkownik = wymagaj('../models/użytkownik'); /* POBIERZ listę użytkowników. */ //Strona główna router.get('/', function(req, res){ res.render('login'); }); paszport.use(new LocalStrategy(function(username, password, done) { User.getUserByUsername(username, function(err, user){ if(err) throw err; if(!user){ return done(null, false, { message: 'Unknown User'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { return done(null, false, {message: 'Nieprawidłowe hasło'}); } }); }); })); paszport.serializeUser(function(user, done) { done(null, user.id); }); paszport.deserializeUser(function(id, done) { User.getUserById(id, function(err, user) { done(err, user); }); }); router.post('/login', paszport.authenticate('local', {successRedirect:'/', failureRedirect:'/login', failureFlash: true}), function(req, res) { res.redirect('/ deska rozdzielcza'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Jesteś wylogowany'); res.redirect('/homepage'); });

moduł.eksport = router;

Najpierw dołączamy całe potrzebne oprogramowanie pośredniczące, a następnie dołączamy nasz plik modelu, który jest wyjaśniony poniżej. Trasujemy z tagu logowania i wyświetlamy tekst naszego paska logowania. Następnie używamy kilku funkcji paszportowych, aby pobrać wprowadzoną nazwę użytkownika i hasło i sprawdzić je w naszej bazie danych. Użyjemy również zaszyfrowanego hasła, które może spowolnić logowanie na Raspberry Pi. Wyjaśnię to dalej. Po zweryfikowaniu nazwy użytkownika i hasła zostaniesz przekierowany na stronę główną, która pokaże pulpit nawigacyjny zgodnie z konfiguracją w naszym pliku indeksu. Dodajemy tutaj również możliwość wylogowania.

Jak już wcześniej wspomniałem, będziemy musieli również stworzyć model do sprawdzenia bazy danych.

Odbywa się to poprzez utworzenie folderu w głównym folderze aplikacji o nazwie modele. W tym folderze potrzebny jest również plik user.js.

model/user.js

var mangusta = require('mangusta');

var bcrypt = require('bcryptjs'); // Schemat użytkownika var UserSchema = mongoose. Schema({ username: { type: String, index:true }, password: { type: String }, email: { type: String }, name: { type: String } }); var User = module.exports = mongoose.model('Użytkownik', UserSchema);

module.exports.createUser = function(newUser, callback){

bcrypt.genSalt(10, function(err, salt) { bcrypt.hash(newUser.password, salt, function(err, hash) { newUser.password = hash; newUser.save(callback); }); }); } module.exports.getUserByUsername = function(username, callback){ var query = {username: username}; User.findOne(zapytanie, wywołanie zwrotne); } module.exports.getUserById = function(id, callback){ User.findById(id, callback); } module.exports.comparePassword = function(candidatePassword, hash, callback){ bcrypt.compare(candidatePassword, hash, function(err, isMatch) { if(err) throw err; callback(null, isMatch); }); }

Model ten określa, jak będą wyglądały nasze parametry użytkownika, a także sposób, w jaki będziemy do nich uzyskiwać dostęp. Wspomniałem wcześniej, że będziemy szyfrować nasze hasła. dzieje się tak, aby w przypadku naruszenia nie było przechowywane żadne hasło w bazie danych. Hasła są haszowane przy użyciu bcrypt oprogramowania pośredniego.

Krok 5: Licznik ruchu

Chciałem zobaczyć, ilu unikalnych użytkowników odwiedziło moją stronę internetową i policzyć „odsłony”. Jest na to wiele sposobów, wyjaśnię, jak to zrobiłem.

Wykorzystuje to kolekcję mongodb do śledzenia, ilu użytkowników odwiedziło moją stronę i ile razy odwiedził każdy unikalny użytkownik.

Ponieważ już rozmawialiśmy o konfigurowaniu mongoDB, nie będę przez to ponownie przechodził.

W celu skompilowania może być konieczne dodanie dwóch kolekcji do bazy danych. Aby to zrobić, możesz zainstalować RoboMongo, jeśli używasz interfejsu użytkownika, jednak jeśli używasz bezgłowego raspberry pi, takiego jak ja, będziesz bawić się następującymi poleceniami.

Muszla mongo

Aby edytować bazę danych, uzyskać informacje lub utworzyć kolekcję, będziesz potrzebować powłoki mongo na jednostce bezgłowej.

Biegać

mongo

To otworzy powłokę.

Dodaj kolekcję

W moim przypadku baza danych nazywa się loginapp, możesz ją dowolnie nazwać.

użyj nazwyswojejdb

Potrzebujemy kolekcji do przechowywania wszystkich naszych adresów IP użytkowników, którzy odwiedzają naszą witrynę.

db.creatCollection("ip")

Następnie tworzymy kolekcję, aby zliczać unikalne trafienia na naszą stronę. Jest to inicjowane identyfikatorem i liczbą zaczynającą się od 0.

db.createCollection("count", {id: "hit counter", count:0})

Śledź adresy IP

Aby to zrobić, pobierzemy adres IP użytkowników, gdy odwiedzają naszą stronę główną, zwiększymy naszą liczbę i zapiszemy je w celu późniejszego porównania.

Musimy stworzyć kilka modeli do przechowywania naszych schematów mangusty i dodać trochę kodu do naszego pliku homepage.js.

Tworzymy count.js i ip.js i przechowujemy je w naszym folderze modeli.

Plik ip.js to tylko schemat dla naszego adresu ip

var mangusta = require('mangusta'); //obsługa pakietu dla mongo

//Count Schema var IpSchema = mongoose. Schema({ ip: { type: String, }, count: { type: Number, } }); var Ip = module.exports = mongoose.model('IP', IpSchema);

count.js zostanie wywołany przez naszą stronę główną w celu zainicjowania śledzenia trafień. Odbywa się to tak, jak poniżej.

//Homepagerouter.get('/', function(req, res){ publicIp.v4().then(ip => { Public_ip = ip; console.log("ipv4: "+ Public_ip); //=> ' 46.5.21.123' }); publicIp.v6().then(ip => { console.log("ipv6" + ip); Public_ip=ip; //=> 'fe80::200:f8ff:fe21:67cf' });

Count.getCount(kolekcja, ipc, Public_ip, function(count){

}); count = db.collection('count').findOne({id: "licznik trafień"}, function(err, count){ userCount = count.count; res.render('homepage', {count: userCount}); }); });

Dzieje się tak za każdym razem, gdy ktoś wchodzi na naszą stronę główną, w tym przypadku nainternet.onthewifi.com/homepage.

Sprawdza adres IP użytkownika, ip4 lub ip6, a następnie przechowuje tę wartość i wysyła ją do count.get.collection, która jest funkcją przechowywaną w naszym pliku count.js.

Po sprawdzeniu wyjątkowości użytkownika zwraca i wysyła wartość licznika na stronę główną jako zmienną kierownicy.

Plik count.js wygląda następująco.

//count.jsvar mongo = require('mongodb'); //obsługuje bazę danych var mongoose = require('mongoose'); //obsługa pakietów dla mongo mongoose.connect('mongodb://localhost/loginapp'); var db = mangusta.połączenie; var Ip = require('../models/ip'); //Count Schema var CountSchema = mongoose. Schema({ id: { type: String, }, count: { type: Number, } }); var Count = module.exports = mongoose.model('Count', CountSchema); module.exports.getCount = function(count, ipc, Public_ip, callback){ //count jest testowany, callback isfunction ipc.findOne({ip: Public_ip}, function(err, iptest){ if(!iptest)//add nowy adres IP, jeśli nie ma go w bazie danych, i zaktualizuj licznik { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//dodaj nowy adres IP do database count.update(//zaktualizuj licznik odwiedzin { id: "licznik odwiedzin"}, { $inc: {count: 1} }) } else//zaktualizuj określony licznik adresów IP, aby zobaczyć, kto odwiedza najwięcej { ipc.update({ ip: Public_ip }, { $inc: {count: 1} }) } }); }

Tworzy to schemat licznika i naszą funkcję.getCount. Funkcja.getCount sprawdza w bazie danych adres IP użytkownika i jeśli go znajdzie, zwiększa liczbę tego użytkownika, a nie licznik trafień. Jeśli jednak adres ip użytkownika nie zostanie znaleziony, utworzy nowy obiekt kolekcji z adresem ip użytkownika i zwiększy licznik trafień o 1.

To jest następnie zwracane i wyświetlane na stronie internetowej.

Masz to licznik trafień śledzenia IP.

Krok 6: Blog

Obecnie próbuję stworzyć bloga scentralizowanego na temat moich zainteresowań dotyczących oprogramowania, inteligentnych domów i polaroidów. Stworzyłem więc sekcję bloga. Blog używa statycznych stron html i frameworka kierownicy. Po przyjrzeniu się lepszym technologiom ułatwiającym blogowanie, od tego czasu przeprojektowałem swoją stronę internetową za pomocą hugo. Hugo to statyczny generator HTML. Więcej na ten temat powiem w poniższym samouczku.

Krok 7: Zakończono

Tam idziesz dogłębny samouczek na mojej stronie node.js hostowanej lokalnie na moim Raspberry Pi. Jeśli masz pytania lub komentarze, zostaw je poniżej.

Mam nadzieję, że to pomoże innym.

Aby uzyskać inne podejście do tej witryny za pomocą hugo, statycznego generatora stron internetowych, zobacz mój inny samouczek (wkrótce).