SQL Server opvragen met knooppunt.js

laten we beginnen

Ik neem aan dat je node hebt.js geïnstalleerd, maar zo niet, het kan hier worden gedownload.

we beginnen met het opzetten van onze node.js webserver en testen. Voeg dan dezelfde code toe als voorheen om verbinding te maken met en onze SQL Server-Database te bevragen.

we gebruiken het minimalistische web server framework voor node.js, Express. Het wordt geïnstalleerd als een NPM-pakket.

zoals met veel dingen, is er altijd meer te leren dus als ik je een commando laat typen, lees dan zeker meer over het commando en zijn opties.

instellen

1. Voor het project, maak een map / map aan.
2. Open Visual Studio Code (VSCode) en open de map.
3. Open een nieuw terminalvenster en typ,
   npm init
   accepteert de standaardwaarden om uw pakket aan te maken.json.

4. Maak een bestand in VSCode en sla het op als index.js. Als je in je pakje kijkt.JSON bestand, zult u zien waar u de standaard kunt wijzigen “main” bestand.

5. In het Terminalvenstertype,
start npm
start het knooppunt.js server.

de webserver

In het Terminalvenstertype,
npm install express

dit installeert het webframework.

We zijn klaar om te rocken!

de kern van de webserver is om het express pakket te vereisen en toe te wijzen aan een houder (variabele of const.) Alle verwijzingen naar de webserver vindt plaats via deze houder.

We moeten de webserver starten en laten luisteren op een HTTP-poort, ik kies 5000. 8080 is gebruikelijk, gewoon iets beschikbaar.

we willen dat de webserver op zijn minst reageert op een HTTP get-methode. Dit zal het mogelijk maken om “kick de banden” en zorg ervoor dat het werkt. Er is meer in HTTP methoden hier op de MDN. We zullen GET en POST gebruiken.

• GET wordt gebruikt om uit een bron op te halen.
• POST wordt gebruikt om naar een bron te verzenden.

Voer de volgende code in en we zullen het bespreken.

webserver voorbeeld

• we hebben het express-pakket nodig, waarbij we de referentie in express volgens afspraak opslaan, maar het naar wens noemen.
• Initialiseer een instantie van express, slaat de referentie op in app volgens conventie, maar noem het zoals gewenst.
• in regel 11 slaan we een verwijzing op naar waar onze webserver zal luisteren. Bakboord 5000.
• in regel 5 gebruiken we de HTTP GET met out instantie van de webserver met behulp van app.krijgen. Dit, standaard zal kijken om gegevens uit de root directory (‘/’) te krijgen. De callback functie is heel belangrijk omdat het de Request (req) en Response (res) objecten bevat. De namen req en res zijn bij overeenkomst.

verzoek en antwoord

• verzoek komt van de url van onze browser. Meer informatie vindt u hier.
• antwoord is het antwoord op een verzoek. Meer vindt u hier.

In een notendop zal onze browser een verzoek indienen en zullen we een antwoord terugsturen.

Kick the Tires

1. in VSCode, hit F5 (kort voor Start Debugging in het Debug menu.) Uw console ziet er als volgt uit.

2. Ga naar uw Browser en typ LocalHost: 5000 en druk op Enter. Je zou het volgende moeten zien.

uw browser heeft een GET-verzoek ingediend en we hebben een antwoord teruggestuurd met res.send.

Node SQL Server Connection

(optioneel indien eerder gedaan.) Typ in het terminalvenster
npm install mssql
dit installeert de SQL Server Drivers.

Databasevoorbeeld

Dit is exact dezelfde Startcode als mijn vorige artikel, dus Ik zal het niet in detail doornemen. Echter, het is de positie in de app object zal belangrijk zijn.

een paar dingen om op te merken die anders zijn dan voor, na onze eerste test,

• De PerformanceRating van onze medewerkers zal worden verzonden vanaf een webpagina (geplaatst.)
• het resultaat van de Query zal worden uitgevoerd naar een webpagina met behulp van antwoord.

databaseverbinding / Query voorbeeld

voer onderstaande code in.

belangrijk om op te merken is dat we een webserver en een Database verbinding en Query hebben. Maar ze hebben geen interactie. Nog niet!

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

and you will see the web server is running en er is console-uitvoer van de gegevens van de query. Maar we krijgen niets van de webserver of sturen niets naar een webpagina.

de html

we hebben een pagina nodig om op te geven wanneer de gebruiker naar onze site gaat. Op deze pagina kunnen ze een parameter (PerformanceRating) verzenden die gebruikt kan worden in de database Query.

opmerking: Ik maak me geen zorgen over het stylen van onze webpagina. Het zal eenvoudig en to the point zijn.

We slaan ook alles op in de root. Een goede praktijk? Echt niet! Maar we gaan voor functionaliteit. Opruimen kan later gebeuren.

1. maak de volgende webpagina ‘ s en noem ze index.html en werknemers.HTML.

• index.html zal onze belangrijkste bron pagina.
• werknemers.html zal zijn waar ons resultaat eindigt.

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. Een daarvan is hoe ik ervoor kies om de index op te dienen.HTML. Andere bronnen die u leest, kunnen in contact komen met routing. Routing is een zeer belangrijk gebied, maar buiten ons bereik. Onze manier is slechts een van de vele manieren. De nieuwe toevoegingen aan onze code zullen zijn:

• pad-dit zal ons helpen res. sendFile te gebruiken om het bestand dat we willen op te server als een bezoeker naar onze site komt.
• bodyParser-maakt formuliergegevens beschikbaar zodra een bericht is geplaatst
• sendFile-stelt u in staat om de gewenste standaardpagina weer te geven.

breng de volgende wijzigingen aan in uw code,

voer het uit door de webserver te stoppen en te starten of te vernieuwen. In uw browser, na het verversen van de browser,ziet u,

gebruikmakend van de HTML-formuliergegevens in onze zoekopdracht

hiervoor moeten we een app toevoegen.post. Dit zal zich bezighouden met wat we willen wanneer de index.html Voor wordt gepost vanaf de webpagina.

Dit is een belangrijke stap. Onze Database verbinding en Query MOETEN in de app.post callback functie.

• regel 13 start de app.post. In de body van de callback zijn onze Database componenten.
• regel 52 sluit de app.post.

kunnen we dit allemaal anders structureren, Ja. Ik doe het op deze manier om ons een stichting te geven die zal werken. Dan kunnen we / you andere opties verkennen

met behulp van de formuliergegevens

het gebruik van de formuliergegevens zal gemakkelijk zijn.

• regel 35, haal de formuliergegevens uit het geselecteerde element. bodyParser is wat ons Hier helpt. req.lichaam.elementnaam.
• regel 37, De Query, gebruikt de waarde van het formulier.
• regel 50 stuurt de onbewerkte gegevens naar werknemers.HTML.

voer het uit door de webserver te stoppen en te starten of te verversen.

1. ga naar uw webpagina en ververs.

2. Kies “Average”uit de rating drop down en klik op”Get Results”

3. Je zou output in werknemers moeten krijgen.HTML. Niet aantrekkelijk, maar het is een begin.

we hebben nu een verbinding van onze front-end naar onze back-end naar onze front-end. Dit is belangrijk.

laatste stappen — ruim de uitvoer op (een beetje.)

Dit is het makkelijkste en moeilijkste deel. Het moeilijkste omdat er zoveel opties zijn. We gaan voor de basis van de basis, zodat we een glimp krijgen van wat er diep van binnen gebeurt.

Dit is een gebied dat u veel meer in detail wilt verkennen. Niet alleen extra methoden van res, maar het idee van een”view engine”.

en ik zullen enkele van deze artikelen in toekomstige artikelen onderzoeken. In het bijzonder, een van mijn favorieten, express-stuur.

voorlopig gaan we onze uitvoer construeren. Bevestigend. Bouw het zelf. Bouw een tabel van onze gegevens in code en stuur het! Loop gewoon door onze gegevens.recordset en bouwen.

zie het volgende

u wilt regels 50-57 toevoegen.

De uitvoer zal als volgt zijn bij het opvragen van “Average”

wat nu te doen (ja je)

speel ermee, voeg meer toe, verander de structuur. Werk vanaf de basis, en werk omhoog.

we werken met de eerste principes om ons te helpen begrijpen wat er gebeurt achter sommige lagen die tegenwoordig worden toegevoegd door JavaScript-sjablonen, frameworks en bibliotheken.

we hebben zelf een full-stack systeem gebouwd. Ja, Geloof het of niet.

wat het meeste werk nodig heeft, de uitvoer. Maar deze hele oefening opent een wereld van exploratie en kansen. Dus willen we de concepten van,

• meer CRUD operaties
• Routing
• View engines/templates

Dank u voor het nemen van deze reis en we zullen meer verkennen.

u kunt ook genieten van