Lass uns anfangen
Ich nehme an, du hast node .js installiert, aber wenn nicht, kann es hier heruntergeladen werden.
Wir beginnen mit der Einrichtung unseres Knotens.js Webserver und testen. Fügen Sie dann ähnlichen Code wie zuvor hinzu, um eine Verbindung zu unserer SQL Server-Datenbank herzustellen und diese abzufragen.
Wir werden das minimalistische Webserver-Framework für node verwenden.js, Express. Es wird als npm-Paket installiert.
Wie bei vielen Dingen gibt es immer mehr zu lernen, also wenn Sie einen Befehl eingeben, lesen Sie auf jeden Fall mehr über den Befehl und seine Optionen.
Einrichten
- Erstellen Sie für das Projekt ein Verzeichnis/einen Ordner.
- Öffnen Sie Visual Studio Code (VSCode) und öffnen Sie den Ordner.
- Öffnen Sie ein neues Terminalfenster und geben Sie ein,
npm init
Akzeptiert die Standardwerte, um Ihr Paket zu erstellen.json.
4. Erstellen Sie eine Datei in VSCode und speichern Sie sie als Index.js. Wenn Sie in Ihr Paket schauen.json-Datei sehen Sie, wo Sie die Standarddatei „main“ ändern können.
5. Im Terminal-Fenstertypstart npmDies startet den Knoten.js-Server.
Der Webserver
Im Terminal-Fenster Typ,npm install express
Dies installiert das Web-Framework.
Wir sind bereit zu rocken und zu rollen!
Der Kern des Webservers besteht darin, das Express-Paket zu benötigen und es einem Halter (Variable oder const .) Alle Verweise auf den Webserver werden durch diesen Halter sein.
Wir müssen den Webserver starten und ihn an einem HTTP-Port abhören lassen, ich wähle 5000. 8080 ist üblich, nur etwas zur Verfügung.
Wir möchten, dass der Webserver zumindest auf eine HTTP-Get-Methode antwortet. Auf diese Weise können Sie „die Reifen treten“ und sicherstellen, dass es funktioniert. Es gibt mehr in HTTP-Methoden hier auf dem MDN. Wir werden GET und POST verwenden.
- GET wird verwendet, um von einer Ressource abzurufen.
- POST wird verwendet, um an eine Ressource zu senden.
Geben Sie den folgenden Code ein und wir werden ihn besprechen.
Webserver Beispiel
- Wir benötigen das Express-Paket, das die Referenz in Express nach Konvention speichert, aber wie gewünscht benennt.
- Initialisieren Sie eine Instanz von Express, speichern Sie die Referenz in App nach Konvention, benennen Sie sie jedoch wie gewünscht.
- In Zeile 11 speichern wir einen Verweis darauf, wo unser Webserver lauschen wird. Hafen 5000.
- In Zeile 5 verwenden wir die HTTP GET with out Instanz des Webservers mit app.bekommen. Dies sucht standardmäßig nach Daten aus dem Stammverzeichnis (‚/‘). Die Callback-Funktion ist sehr wichtig, da sie die Objekte Request (req) und Response (res) enthält. Die Namen req und res sind Konvention.
Anfrage und Antwort
- Die Anfrage kommt von der URL unseres Browsers. Weitere Informationen finden Sie hier.
- Response ist die Antwort auf eine Anfrage. Mehr dazu finden Sie hier.
Kurz gesagt, unser Browser stellt eine Anfrage und wir senden eine Antwort zurück.
Treten Sie die Reifen
- Drücken Sie in VSCode F5 (kurz für Start Debugging im Debug-Menü.) Ihre Konsole sollte wie folgt aussehen.
2. Gehen Sie zu Ihrem Browser und geben Sie LocalHost: 5000 ein und drücken Sie die Eingabetaste. Sie sollten Folgendes sehen.
Ihr Browser hat eine GET-Anfrage gestellt und wir haben eine Antwort mit res.send gesendet.
Knoten SQL Server-Verbindung
(Optional, falls zuvor ausgeführt.) Geben Sie im Terminalfensternpm install mssql
Dies installiert die SQL Server-Treiber.
Datenbankbeispiel
Dies ist genau der gleiche Startcode wie in meinem vorherigen Artikel, daher werde ich nicht im Detail darauf eingehen. Die Position im App-Objekt ist jedoch wichtig.
Ein paar Dinge zu beachten, die anders sein wird als vor, nach unserem ersten Test,
- die PerformanceRating unserer Mitarbeiter werden von einer Web-Seite gesendet werden (geschrieben.)
- das Ergebnis der Abfrage wird mit Response auf einer Webseite ausgegeben.
Beispiel für Datenbankverbindung/Abfrage
Geben Sie den folgenden Code ein.
Wichtig zu beachten ist, dass wir einen Webserver und eine Datenbankverbindung und -abfrage haben. Aber sie interagieren nicht. Noch!
Run it with by stopping and starting the web server or refreshing
and you will see the web server is running und es gibt eine Konsolenausgabe der Daten aus der Abfrage. Wir erhalten jedoch weder etwas vom Webserver noch senden wir etwas an eine Webseite.
Die HTML
Wir brauchen eine Seite zu dienen, wenn der Benutzer auf unsere Website geht. Auf dieser Seite können sie einen Parameter (PerformanceRating) senden, der in der Datenbankabfrage verwendet werden kann.
Hinweis: Ich werde mir keine Gedanken über das Styling unserer Webseite machen. Es wird einfach und auf den Punkt sein.
Wir speichern auch alles im Stammverzeichnis. Eine Best Practice? Auf keinen Fall! Aber wir gehen für Funktionalität. Aufräumen kann später passieren.
- Erstellen Sie die folgenden Webseiten und benennen Sie sie index.html und Mitarbeiter.HTML.
- indexieren.html wird unsere Hauptquellseite sein.
- Mitarbeiter.html wird sein, wo unser Ergebnis endet.
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. Eines davon ist, wie ich mich entscheide, Index zu servieren.HTML. Andere Quellen, die Sie lesen, können dazu beitragen. Routing ist ein sehr wichtiger Bereich, aber außerhalb unseres Geltungsbereichs. Unser Weg ist nur einer von vielen Wegen. Die neuen Ergänzungen zu unserem Code werden sein,
- path — dies wird uns helfen, res.sendFile zu verwenden, um die Datei zu sichern, die wir wollen, wenn ein Besucher auf unsere Seite kommt.
- bodyParser – stellt Formulardaten zur Verfügung, sobald ein BEITRAG fertig ist
- sendFile — ermöglicht es Ihnen, die gewünschte Standardseite bereitzustellen.
Nehmen Sie die folgenden Änderungen an Ihrem Code vor:
endFile
Führen Sie es aus, indem Sie den Webserver stoppen und starten oder aktualisieren. In Ihrem Browser sollten Sie nach dem Aktualisieren des Browsers Folgendes sehen:
Verwenden der HTML-Formulardaten In unserer Abfrage
Dazu müssen wir eine App hinzufügen.Post. Dies wird engagieren, was wir wünschen, wenn der Index.html für wird von der Webseite gepostet.
Dies ist ein wichtiger Schritt. Unsere Datenbankverbindung und Abfrage müssen in der App sein.post Callback-Funktion.
- Zeile 13 startet die App.Post. Im Hauptteil des Rückrufs befinden sich unsere Datenbankkomponenten.
- Zeile 52 schließt die App.Post.
Könnten wir das alles anders strukturieren, ja. Ich mache es so, um uns eine Grundlage zu geben, die funktionieren wird. Dann können wir / Sie andere Optionen erkunden
Mit den Formulardaten
Mit den Formulardaten wird einfach sein.
- Zeile 35, holen Sie sich die Formulardaten aus dem Select-Element. bodyParser ist das, was uns hier hilft. req.Körper.elementname.
- Zeile 37, die Abfrage, verwendet den Wert aus dem Formular.
- Zeile 50 sendet die abgefragten Rohdaten an die Mitarbeiter.HTML.
Führen Sie es aus, indem Sie den Webserver anhalten und starten oder aktualisieren.
- Gehen Sie zu Ihrer Webseite und aktualisieren Sie sie.
2. Wählen Sie „Durchschnitt“ aus der Dropdown-Liste und klicken Sie auf „Ergebnisse abrufen“
3. Sie sollten die Ausgabe in Mitarbeiter erhalten.HTML. Nicht attraktiv, aber es ist ein Anfang.
Wir haben jetzt eine Verbindung von unserem Front-End zu unserem Back-End zu unserem Front-End. Das ist eine große Sache.
Letzte Schritte – Bereinigen Sie die Ausgabe (ein bisschen.)
Dies ist der einfachste und schwierigste Teil. Am schwierigsten, weil es so viele Möglichkeiten gibt. Wir werden mit den Grundlagen der Grundlagen gehen, damit wir einen Einblick bekommen, was tief im Inneren passiert.
Dies ist ein Bereich, den Sie viel detaillierter erkunden möchten. Nicht nur zusätzliche Res-Methoden, sondern die Idee einer „View Engine“.
Und ich werde einige davon in zukünftigen Artikeln untersuchen. Insbesondere einer meiner Favoriten, Express-Lenker.
Im Moment werden wir unsere Ausgabe erstellen. Ja. Konstruieren Sie es selbst. Erstellen Sie eine Tabelle unserer Daten im Code und senden Sie sie! Nur Schleife durch unsere Daten.recordset und build.
Siehe Folgendes
Sie möchten die Zeilen 50-57 hinzufügen.
Die Ausgabe wird wie folgt sein, wenn nach „Durchschnitt“ gefragt wird
Was als Nächstes zu tun ist (ja, Sie)
Spielen Sie damit, fügen Sie mehr hinzu, ändern Sie die Struktur. Arbeiten Sie von den Grundlagen aus und arbeiten Sie auf.
Wir arbeiten mit First Principles, um zu verstehen, was hinter einigen Ebenen steckt, die heutzutage von JavaScript-Vorlagen, Frameworks und Bibliotheken hinzugefügt werden.
Wir haben ein eigenes Full-Stack-System entwickelt. Ja, ob Sie es glauben oder nicht, wir haben.
Was am meisten Arbeit braucht, ist die Ausgabe. Aber diese ganze Übung eröffnet eine Welt der Erforschung und Möglichkeiten. Also wollen wir die Konzepte von erweitern,
- Mehr CRUD-Operationen
- Routing
- View engines/templates
Vielen Dank für diese Reise und wir werden mehr erforschen.
Sie können auch genießen,