lad os komme i gang
Jeg antager, at du har node.JS installeret, men hvis ikke, det kan hentes her.
Vi starter med at oprette vores node.JS Server og teste den. Tilføj derefter lignende kode som før for at oprette forbindelse til og forespørge på vores SERVERDATABASE.
Vi vil bruge den minimalistiske Server ramme for node.JS, hurtig. Det installeres som en npm-pakke.
som med mange ting er der altid mere at lære, så når jeg har du skriver en kommando, skal du helt sikkert læse mere om kommandoen, og det er muligheder.
opsætning
- for projektet skal du oprette en mappe / mappe.
- Åbn Visual Studio Code (VSCode), og åbn mappen.
- Åbn et nyt terminalvindue og skriv,
npm init
accepterer standardindstillingerne for at oprette din pakke.json.
4. Opret en fil i VSCode og gem den som indeks.js. Hvis du kigger i din pakke.json fil, vil du se, hvor du kan ændre standard “main” fil.
5. I Terminalvinduetypenstart npmdette starter noden.JS server.
internetserveren
i Terminalvinduetypennpm install express
dette installerer Internetrammen.
Vi er klar til at rocke og rulle!
kernen i internetserveren er at kræve ekspresspakken og tildele den til en indehaver (variabel eller const.) Alle henvisninger til internetserveren vil være gennem denne indehaver.
Vi skal starte internetserveren og få den til at lytte på en HTTP-port, jeg vælger 5000. 8080 er almindelig, bare noget tilgængeligt.
Vi vil gerne have, at internetserveren i det mindste reagerer på en HTTP get-metode. Dette giver mulighed for at “sparke dækkene” og sørge for, at det fungerer. Der er mere i HTTP-metoder her på MDN. Vi vil bruge GET og POST.
- GET bruges til at hente fra en ressource.
- POST bruges til at indsende til en ressource.
Indtast følgende kode, og vi vil diskutere det.
Internetservereksempel
- Vi kræver ekspresspakken, lagring af referencen i udtrykkelig efter konvention, men navngiv den som ønsket.
- Initialiser en forekomst af ekspres, lagring af referencen i app efter konvention, men navngiv den som ønsket.
- i linje 11 gemmer vi en reference til, hvor vores internetserver vil lytte. Port 5000.
- i linje 5 bruger vi HTTP GET uden forekomst af internetserveren ved hjælp af app.få. Dette vil som standard se ud for at hente data fra rodmappen (‘/’). Tilbagekaldsfunktionen er ret vigtig, da den indeholder objekterne anmodning (anmodning) og svar (res). Navnene res og Res er efter konvention.
anmodning og svar
- anmodning kommer fra vores URL. Mere information kan findes her.
- svar er svaret på en anmodning. Mere kan findes her.
kort sagt vil vores bro.ser stille en anmodning, og vi sender et svar tilbage.
Spark dækkene
- i VSCode skal du trykke på F5 (forkortelse for Start Debugging i Debug-menuen.) Din konsol skal se ud som følger.
2. Gå til din bro.ser og skriv LocalHost:5000 og tryk på Enter. Du bør se følgende.
din bro.ser lavede en GET-anmodning, og vi sendte et svar tilbage ved hjælp af res.send.
node serverforbindelse
(valgfrit, hvis det er gjort før.) I terminalvinduet skal du skrivenpm install mssql
dette installerer SERVERDRIVERNE.
Databaseeksempel
Dette er nøjagtigt den samme startkode som min tidligere artikel, så jeg vil ikke gennemgå den i detaljer. Imidlertid, det er position i app-objektet vil være vigtigt.
et par ting at bemærke, der vil være anderledes end før, efter vores første test,
- udførelsen af vores medarbejdere vil blive sendt fra en hjemmeside (indsendt.)
- resultatet af forespørgslen vil blive sendt til en hjemmeside ved hjælp af svar.
databaseforbindelse/Forespørgselseksempel
Indtast koden nedenfor.
noget vigtigt at bemærke er, at vi har en internetserver og en databaseforbindelse og forespørgsel. Men de interagerer ikke. Endnu!
Run it with by stopping and starting the web server or refreshing
and you will see the web server is running og der er konsol output af data fra forespørgslen. Men vi får ikke noget fra serveren eller sender noget ud til en hjemmeside.
HTML
Vi har brug for en side til at tjene op, når brugeren går til vores hjemmeside. Denne side giver dem mulighed for at sende en parameter (PerformanceRating), der kan bruges i Databaseforespørgslen.
Bemærk: Jeg vil ikke være bekymret for styling af vores hjemmeside. Det vil være enkelt og til det punkt.
Vi gemmer også alt i roden. En bedste praksis? Ingen måde! Men vi går efter funktionalitet. Oprydning kan ske senere.
- Opret følgende hjemmesider og navngiv dem indeks.html og medarbejdere.HTML.
- indeks.html vil være vores vigtigste kilde side.
- medarbejdere.html vil være, hvor vores resultat ender.
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. En af dem er, hvordan jeg vælger at tjene op indeks.HTML. Andre kilder, du læser, kan komme ind i routing. Routing er et meget vigtigt område, men uden for vores anvendelsesområde. Vores måde er kun en af mange måder. De nye tilføjelser til vores kode vil være,
- sti — dette vil hjælpe os brugt res.sendFile til server op den fil, vi ønsker, når en besøgende kommer til vores hjemmeside.
- bodyParser — gør formulardata tilgængelige, når et indlæg er udført
- sendFile — giver dig mulighed for at servere den ønskede standardside.
foretag følgende ændringer i din kode,
div >
kør det med ved at stoppe og starte internetserveren eller opdatere. Når du har opdateret bro. ser, skal du se
brug af HTML-formulardataene i vores forespørgsel
til dette skal vi tilføje en app.indlæg. Dette vil engagere, hvad vi ønsker, når indekset.html for er lagt ud fra hjemmesiden.
Dette er et vigtigt skridt. Vores databaseforbindelse og forespørgsel skal være inde i appen.indlæg tilbagekald funktion.
- linje 13 starter appen.indlæg. I tilbagekaldets krop er vores Databasekomponenter.
- linje 52 lukker appen.indlæg.
kunne vi strukturere alt dette anderledes, ja. Jeg gør det på denne måde for at give os et fundament, der vil fungere. Derefter kan vi/du udforske andre muligheder
ved hjælp af formulardataene
brug af formulardataene vil være let.
- linje 35, Hent formulardataene fra det valgte element. bodyParser er det, der hjælper os her. rekv.krop.elementnavn.
- linje 37, forespørgslen, bruger værdien fra formularen.
- Linje 50 sender de rå forespurgte data til medarbejderne.HTML.
kør det ved at stoppe og starte internetserveren eller opdatere.
- gå til din hjemmeside og opdater.
2. Vælg ” gennemsnit “fra rating falde ned og klik på”få resultater”
3. Du bør få output i medarbejdere.HTML. Ikke attraktivt, men det er en start.
Vi har nu en forbindelse fra vores front-end til vores back-end til vores front-end. Dette er en BIG DEAL.
sidste trin — Ryd op Output (lidt.)
Dette er den nemmeste og sværeste del. Hårdest, fordi der er så mange muligheder. Vi vil gå med det grundlæggende i det grundlæggende, så vi får et glimt af, hvad der sker dybt inde.
dette er et område, du vil udforske meget mere detaljeret. Ikke kun yderligere metoder til res, men ideen om en “visningsmotor”.
og jeg vil udforske nogle af disse i fremtidige artikler. Især en af mine favoritter, ekspresstyr.
For nu skal vi konstruere vores output. Ja. Konstruer det selv. Byg en tabel over vores data i kode og send det! Bare loop gennem vores data.recordset og build.
se følgende
div >
du vil tilføje linjer 50-57.
udgangen vil være som følger, Når du spørger til “gennemsnit”
Hvad skal man gøre næste (Ja dig)
spil med det, tilføj mere, Skift strukturen. Arbejde ud fra grundlæggende, og arbejde op.
Vi arbejder med de første principper for at hjælpe os med at forstå, hvad der foregår bag nogle af de lag, der tilføjes af JavaScript-skabeloner, rammer og biblioteker i disse dage.
Vi har bygget på vores egen, et full-stack system. Ja, Tro det eller ej, vi har.
Hvad har brug for mest arbejde, output. Men hele denne øvelse åbner en verden af udforskning og muligheder. Så vi ønsker at udvide begreberne
- More CRUD operations
- Routing
- se motorer/skabeloner
Tak fordi du tog denne rejse, og vi vil udforske mere.
Du kan også nyde,