Interrogation de SQL Server avec un nœud.js

Commençons

Je suppose que vous avez un nœud.js installé mais sinon, il peut être téléchargé ici.

Nous allons commencer par configurer notre nœud.serveur Web js et le tester. Ajoutez ensuite un code similaire à celui précédemment pour vous connecter et interroger notre base de données SQL Server.

Nous utiliserons le framework de serveur Web minimaliste pour node.js, Express. Il s’installe en tant que package npm.

Comme pour beaucoup de choses, il y a toujours plus à apprendre, alors quand je vous demande de taper une commande, lisez certainement plus sur la commande et ses options.

Mise en place

1. Pour le projet, créez un répertoire/dossier.
2. Ouvrez Visual Studio Code (VSCode) et ouvrez le dossier.
3. Ouvrez une nouvelle fenêtre de terminal et tapez,
   npm init
   Accepte les valeurs par défaut pour créer votre package.json.

4. Créez un fichier dans VSCode et enregistrez-le en tant qu’index.js. Si vous regardez dans votre colis.fichier json, vous verrez où vous pouvez changer le fichier « principal” par défaut.

5. Dans le type de fenêtre de terminal,
start npm
Cela démarre le nœud.serveur js.

Le Serveur Web

Dans le type de fenêtre de terminal,
npm install express

Ceci installe le Framework Web.

Nous sommes prêts à faire du rock and roll !

Le cœur du serveur Web est d’exiger le paquet express et de l’affecter à un titulaire (variable ou const.) Toutes les références au serveur Web se feront par l’intermédiaire de ce titulaire.

Nous devons démarrer le serveur Web et le faire écouter sur un port HTTP, je choisirai 5000. 8080 est commun, juste quelque chose de disponible.

Nous voulons que le serveur Web réponde au moins à une méthode HTTP get. Cela permettra de « botter les pneus » et de s’assurer que cela fonctionne. Il y a plus dans les méthodes HTTP ici sur le MDN. Nous utiliserons GET et POST.

• GET est utilisé pour récupérer à partir d’une ressource.
• POST est utilisé pour soumettre à une ressource.

Entrez le code suivant et nous en discuterons.

Exemple de serveur Web

• Nous avons besoin du paquet express, stockant la référence dans express par convention, mais nommez-la comme vous le souhaitez.
• Initialisez une instance d’express, stockez la référence dans app par convention, mais nommez-la comme vous le souhaitez.
• À la ligne 11, nous stockons une référence à l’endroit où notre serveur Web écoutera. Port 5000.
• À la ligne 5, nous utilisons l’instance HTTP GET with out du serveur Web à l’aide de l’application.obtenir. Ceci, par défaut, cherchera à obtenir des données du répertoire racine (’/’). La fonction de rappel est assez importante car elle contient les objets Request (req) et Response (res). Les noms req et res sont par convention.

Demande et réponse

• La demande proviendra de l’URL de notre navigateur. Plus d’informations peuvent être trouvées ici.
• La réponse est la réponse à une demande. Plus peut être trouvé ici.

En un mot, notre navigateur fera une demande et nous renverrons une réponse.

Lancez les pneus

1. Dans VSCode, appuyez sur F5 (abréviation de Démarrer le débogage dans le menu Débogage.) Votre console devrait ressembler à ceci.

2. Accédez à votre navigateur et tapez LocalHost: 5000 et appuyez sur Entrée. Vous devriez voir ce qui suit.

Votre navigateur a fait une demande GET et nous avons renvoyé une réponse en utilisant res.send.

Connexion au nœud SQL Server

(Facultatif si cela a été fait auparavant.) Dans la fenêtre du terminal, tapez
npm install mssql
Cela installe les pilotes SQL Server.

Exemple de base de données

C’est exactement le même code de départ que mon article précédent, donc je ne vais pas le parcourir en détail. Cependant, sa position dans l’objet app sera importante.

Quelques choses à noter qui seront différentes d’avant, après notre test initial,

• la performance de nos employés sera envoyée à partir d’une page Web (POSTée.)
• le résultat de la Requête sera affiché sur une Page Web à l’aide de la Réponse.

Exemple de connexion/requête à la base de données

Entrez le code ci-dessous.

Il est important de noter que nous avons un serveur Web et une connexion et une requête à la base de données. Mais ils n’interagissent pas. Pourtant !

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

and you will see the web server is running et il y a une sortie de console des données de la requête. Mais nous ne recevons rien du serveur Web ni n’envoyons rien à une page Web.

Le HTML

Nous avons besoin d’une page à servir lorsque l’utilisateur se rend sur notre site. Cette page leur permettra d’envoyer un paramètre (PerformanceRating) qui peut être utilisé dans la requête de base de données.

Remarque: Je ne vais pas me préoccuper du style de notre page Web. Ce sera simple et précis.

Nous enregistrons également tout dans la racine. Une bonne pratique ? Pas question! Mais nous allons vers la fonctionnalité. Le nettoyage peut avoir lieu plus tard.

1. Créez les pages Web suivantes et nommez-les index.html et employés.HTML.

• index.html sera notre page source principale.
• Employés.html sera l’endroit où notre résultat se termine.

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. L’un d’eux est la façon dont je choisis de servir index.HTML. D’autres sources que vous lisez peuvent entrer dans le routage. Le routage est un domaine très important, mais en dehors de notre champ d’application. Notre chemin n’est qu’un chemin parmi d’autres. Les nouveaux ajouts à notre code seront,

• path — cela nous aidera à utiliser res.sendFile pour serveur le fichier que nous voulons lorsqu’un visiteur vient sur notre site.
• bodyParser – rend les données de formulaire disponibles une fois qu’un MESSAGE est terminé
• sendFile — vous permet de servir la page par défaut souhaitée.

Apportez les modifications suivantes à votre code,

Exécutez-le en arrêtant et démarrant le serveur Web ou en l’actualisant. Dans votre navigateur, après avoir rafraîchi le navigateur, vous devriez voir,

En utilisant les Données du Formulaire HTML Dans Notre Requête

Pour cela, nous devons ajouter une application.post. Cela engagera tout ce que nous désirons lorsque l’indice.html pour est affiché à partir de la page Web.

C’est une étape importante. Notre connexion à la base de données et notre requête doivent se trouver dans l’application.fonction de rappel post.

• La ligne 13 démarre l’application.post. Dans le corps du rappel se trouvent nos composants de base de données.
• La ligne 52 ferme l’application.post.

Pourrions-nous structurer tout cela différemment, oui. Je le fais de cette façon pour nous donner une fondation qui fonctionnera. Ensuite, nous / vous pouvez explorer d’autres options

En utilisant les données du formulaire

En utilisant les données du formulaire, il sera facile.

• Ligne 35, obtenez les données de formulaire à partir de l’élément Select. bodyParser est ce qui nous aide ici. req.corps.nom de l’élément.
• Ligne 37, la requête, utilise la valeur du formulaire.
• La ligne 50 envoie les données brutes interrogées aux employés.HTML.

Exécutez-le en arrêtant et en démarrant le serveur Web ou en le rafraîchissant.

1. Accédez à votre page Web et actualisez-la.

2. Choisissez « Moyenne » dans la liste déroulante des notes et cliquez sur ”Obtenir des résultats »

3. Vous devriez obtenir une sortie chez les employés.HTML. Pas attrayant, mais c’est un début.

Nous avons maintenant une connexion de notre Front-End à notre Back-End à notre Front-End. C’est UN GROS PROBLÈME.

Dernières Étapes – Nettoyez La Sortie (un peu.)

C’est la partie la plus facile et la plus difficile. Plus difficile parce qu’il y a tellement d’options. Nous allons suivre les bases des bases afin d’avoir un aperçu de ce qui se passe au plus profond de nous.

C’est un domaine que vous allez vouloir explorer beaucoup plus en détail. Pas seulement des méthodes supplémentaires de res, mais l’idée d’un « moteur de vue”.

Et j’en explorerai certains dans de futurs articles. En particulier, l’un de mes favoris, le guidon express.

Pour l’instant, nous allons construire notre sortie. Oui. Construisez-le nous-mêmes. Créez une table de nos données en code et envoyez-la! Parcourez simplement nos données.enregistrer et construire.

Voir ce qui suit

Vous voudrez ajouter des lignes 50-57.

La sortie sera la suivante lors de l’interrogation de « Moyenne”

Que faire ensuite (oui vous)

Jouez avec, ajoutez plus, modifiez la structure. Travailler à partir des bases, et travailler.

Nous travaillons avec first principles pour nous aider à comprendre ce qui se passe derrière certaines des couches ajoutées par les modèles, les frameworks et les bibliothèques JavaScript de nos jours.

Nous avons construit nous-mêmes, un système à pile complète. Oui, croyez-le ou non.

Ce qui nécessite le plus de travail, la sortie. Mais tout cet exercice ouvre un monde d’exploration et d’opportunités. Nous voulons donc étendre les concepts de,

• Plus d’opérations CRUD
• Routage
• Moteurs / modèles de vue

Merci d’avoir fait ce voyage et nous explorerons plus.

Vous pouvez également profiter,