odpytywanie serwera SQL z węzłem.js

zaczynajmy

zakładam, że masz węzeł.js Zainstalowany, ale jeśli nie, można go pobrać tutaj.

zaczniemy od ustawienia naszego węzła.js Web Server i testowanie go. Następnie dodaj podobny kod jak wcześniej, aby połączyć się z naszą bazą danych SQL Server i odpytać.

użyjemy minimalistycznego frameworka serwera www dla węzła.js, Express. Instaluje się jako pakiet npm.

podobnie jak w przypadku wielu rzeczy, zawsze jest więcej do nauczenia się, więc kiedy mam wpisać polecenie, na pewno przeczytaj więcej o poleceniu i jego opcjach.

Konfigurowanie

1. dla projektu utwórz katalog/folder.
2. Otwórz Visual Studio Code (VSCode) i otwórz folder.
3. Otwórz nowe okno terminala i wpisz
   npm init
   przyjmuje domyślne ustawienia, aby utworzyć pakiet.json.

4. Utwórz plik w VSCode i zapisz go jako indeks.js. Jeśli zajrzysz do paczki.plik json, zobaczysz, gdzie możesz zmienić domyślny plik „główny”.

5. W oknie terminala
start npm
rozpoczyna się węzeł.serwer js.

Serwer Www

w oknie terminala wpisz
npm install express

to instaluje Framework www.

jesteśmy gotowi na rock and roll!

rdzeniem serwera www jest wymaganie pakietu express i przypisanie go do posiadacza (zmiennej lub const.) Wszystkie odniesienia do serwera www będą przez tego posiadacza.

musimy uruchomić serwer WWW i niech nasłuchuje na porcie HTTP, ja wybieram 5000. 8080 jest powszechne, po prostu coś dostępne.

chcemy, aby serwer WWW przynajmniej odpowiedział na metodę HTTP get. Pozwoli to na „kopnięcie opon” i upewnienie się, że działa. Jest więcej w metodach HTTP tutaj na MDN. Użyjemy GET I POST.

• GET służy do pobierania z zasobu.
• POST służy do przesłania do zasobu.

wpisz poniższy kod, a my go omówimy.

przykład serwera www

• wymagamy pakietu express, przechowując odniesienie w express zgodnie z konwencją, ale nazwij go zgodnie z życzeniem.
• inicjalizuje instancję express, przechowując referencję w aplikacji zgodnie z konwencją, ale nazwij ją zgodnie z potrzebami.
• w wierszu 11 przechowujemy odniesienie do miejsca, w którym nasz serwer WWW będzie nasłuchiwał. Port 5000.
• w linii 5, używamy HTTP GET Z out instancji serwera www za pomocą aplikacji.idź. To, domyślnie będzie wyglądać, aby uzyskać dane z katalogu głównego (’/’). Funkcja zwrotna jest bardzo ważna, ponieważ zawiera obiekty Request (req) i Response (res). Nazwy req i res są zgodne z konwencją.

żądanie i odpowiedź

• żądanie będzie pochodzić z adresu url naszej przeglądarki. Więcej informacji można znaleźć tutaj.
• odpowiedź jest odpowiedzią na żądanie. Więcej można znaleźć tutaj.

w skrócie nasza przeglądarka wyśle zapytanie, a my odeślemy odpowiedź.

Kopnij opony

1. w VSCode, naciśnij F5 (skrót od Start Debugging w menu debugowania.) Konsola powinna wyglądać następująco.

2. Przejdź do przeglądarki i wpisz LocalHost: 5000 i naciśnij Enter. Powinieneś zobaczyć następujące rzeczy.

twoja przeglądarka wykonała żądanie GET, a my odesłaliśmy odpowiedź za pomocą res.send.

połączenie Node SQL Server

(opcjonalne, jeśli zostało wykonane wcześniej.) W oknie Terminal wpisz
npm install mssql
To zainstaluje sterowniki SQL Server.

przykład bazy danych

jest to dokładnie ten sam kod początkowy, co mój poprzedni artykuł, więc nie będę go szczegółowo omawiał. Jednak jego pozycja w obiekcie aplikacji będzie ważna.

kilka rzeczy, które będą inne niż wcześniej, po naszym wstępnym teście,

• Wyniki naszych pracowników zostaną wysłane ze strony internetowej (zamieszczonej.)
• wynik zapytania zostanie wyświetlony na stronie internetowej za pomocą odpowiedzi.

połączenie z bazą danych / przykład zapytania

wpisz poniższy kod.

warto zauważyć, że mamy serwer WWW, połączenie z bazą danych i zapytanie. Ale nie wchodzą w interakcje. Jeszcze!

Run it with by stopping and starting the web server or refreshing

and you will see the web server is running i jest konsolowe wyjście danych z zapytania. Ale nie otrzymujemy niczego z serwera ani nie wysyłamy niczego na stronę internetową.

HTML

potrzebujemy strony, która będzie serwowana, gdy użytkownik wejdzie na naszą stronę. Ta strona pozwoli im wysłać parametr (Performancering), który może być użyty w zapytaniu do bazy danych.

Uwaga: Nie będę się przejmował stylizacją naszej strony. To będzie proste i do rzeczy.

zapisujemy również wszystko w korzeniu. Najlepsze praktyki? Nie ma mowy! Ale chodzi o funkcjonalność. Sprzątanie może nastąpić później.

1. Utwórz następujące strony i nazwij je indeksem.html i pracownicy.html.

• indeks.html będzie naszą główną stroną źródłową.
• pracownicy.html będzie miejscem, gdzie kończy się nasz wynik.

Note the <form action=”/Employees…
This is where our output will go.

Add the following to Employees.html

2. This next step is going to require a couple of things. Jednym z nich jest to, jak wybieram podawanie indeksu.html. Inne źródła, które czytasz, mogą dostać się do routingu. Routing jest bardzo ważnym obszarem, ale poza naszym zakresem. Nasz sposób jest tylko jednym z wielu sposobów. Nowymi dodatkami do naszego kodu będą:

• ścieżka-pomoże nam to wykorzystać plik res. sendFile do serwera pliku, który chcemy, gdy odwiedzający odwiedzi naszą stronę.
• bodyParser-udostępnia dane formularza po zakończeniu postu
• sendFile — umożliwia serwowanie żądanej strony domyślnej.

wprowadź następujące zmiany w kodzie,

uruchom ją, zatrzymując i uruchamiając serwer WWW lub odświeżając. W przeglądarce, po odświeżeniu przeglądarki,powinieneś zobaczyć,

używając danych formularza HTML w naszym zapytaniu

w tym celu musimy dodać aplikację.poczta. To zaangażuje wszystko, czego pragniemy, gdy indeks.html for Jest zamieszczany ze strony www.

to ważny krok. Nasze połączenie z bazą danych i zapytanie muszą znajdować się wewnątrz aplikacji.funkcja Post callback.

• linia 13 uruchamia aplikację.poczta. W ciele wywołania zwrotnego znajdują się nasze komponenty bazy danych.
• linia 52 zamyka aplikację.poczta.

czy moglibyśmy to wszystko zorganizować inaczej, tak. Robię to w ten sposób, aby dać nam fundament, który będzie działał. Następnie możemy / możesz zbadać inne opcje

za pomocą danych formularza

Korzystanie z danych formularza będzie łatwe.

• linia 35, Pobierz dane formularza z elementu select. bodyParser jest tym, co nam pomaga. req.ciało.elementname.
• wiersz 37, zapytanie, używa wartości z formularza.
• linia 50 wysyła surowe dane do pracowników.html.

uruchom go zatrzymując i uruchamiając serwer WWW lub odświeżając.

1. przejdź do swojej strony i odśwież.

2. Wybierz „średnia” z listy rozwijanej oceny i kliknij „uzyskaj wyniki”

3. Powinieneś uzyskać wydajność w pracownikach.html. Niezbyt atrakcyjne, ale to dopiero początek.

mamy teraz połączenie od naszego front-endu do naszego back-endu do naszego front-endu. To poważna sprawa.

ostatnie kroki — Wyczyść wyjście (trochę.)

To jest najłatwiejsza i najtrudniejsza część. Najtrudniej, bo jest tak wiele opcji. Przejdziemy do podstaw podstaw, aby uzyskać wgląd w to, co dzieje się głęboko w środku.

jest to obszar, który będziesz chciał zbadać bardziej szczegółowo. Nie tylko dodatkowe metody OZE, ale idea „view engine”.

i będę badał niektóre z nich w przyszłych artykułach. W szczególności, jeden z moich ulubionych, express-kierownica.

na razie zamierzamy skonstruować nasze wyjście. Tak. Sami to zbudujemy. Zbuduj tabelę naszych danych w kodzie i wyślij ją! Przejrzyj nasze dane.recordset I build.

Zobacz:

będziesz chciał dodać linie 50-57.

wynik będzie następujący, gdy zapytasz o „średni”

co dalej (tak ty)

baw się tym, Dodaj więcej, Zmień strukturę. Praca od podstaw i praca w górę.

pracujemy z pierwszymi zasadami, aby pomóc nam zrozumieć, co dzieje się za niektórymi warstwami, które są obecnie dodawane przez szablony JavaScript, frameworki i biblioteki.

we have built on our own, a full-stack system. Tak, wierz lub nie.

to, co najbardziej wymaga pracy, wyjście. Ale całe to ćwiczenie otwiera świat poszukiwań i możliwości. Dlatego chcemy rozszerzyć koncepcje,

• więcej operacji CRUD
• Routing
• Zobacz silniki/szablony

Dziękujemy za wzięcie udziału w tej podróży i będziemy odkrywać więcej.

Możesz również cieszyć się,