Comencemos
Asumiré que tienes nodo.js instalado, pero si no, se puede descargar aquí.
Comenzaremos configurando nuestro nodo.Servidor Web js y probándolo. Luego agregue código similar al anterior para Conectarse y consultar nuestra base de datos de SQL Server.
Usaremos el framework de Servidor Web Minimalista para node.js, Expreso. Se instala como un paquete npm.
Al igual que con muchas cosas, siempre hay más que aprender, por lo que cuando escriba un comando, seguramente lea más sobre el comando y sus opciones.
Configurar
- Para el proyecto, cree un directorio / carpeta.
- Abra el código de Visual Studio (VSCode) y abra la carpeta.
- Abra una nueva ventana de terminal y escriba,
npm init
Acepta los valores predeterminados para crear su paquete.json.
4. Cree un archivo en VSCode y guárdelo como índice.js. Si miras en tu paquete.archivo json, verá dónde puede cambiar el archivo «principal» predeterminado.
5. En el tipo de ventana de terminal,
start npm Esto inicia el nodo.servidor js.
El Servidor Web
En el tipo de ventana de Terminal,
npm install express
Esto instala el Marco Web.
Estamos listos para el rock and roll!
El núcleo del Servidor Web es requerir el paquete express y asignarlo a un soporte (variable o const.) Todas las referencias al Servidor Web serán a través de este titular.
Tenemos que iniciar el servidor web y hacer que escuche en un puerto HTTP, elegiré 5000. 8080 es común, solo algo disponible.
Queremos que el servidor Web al menos responda a un método HTTP get. Esto permitirá el uso para «patear los neumáticos» y asegurarse de que funcione. Hay más en métodos HTTP aquí en MDN. Usaremos GET y POST.
- GET se utiliza para recuperar de un recurso.
- La publicación se utiliza para enviar a un recurso.
Introduzca el siguiente código y lo discutiremos.
Servidor Web de Ejemplo
- Necesitamos el paquete express, almacenando la referencia en express por convención, pero nómbralo como se desee.
- Inicialice una instancia de express, almacene la referencia en app por convención, pero nómbrela como desee.
- En la línea 11, almacenamos una referencia a dónde escuchará nuestro servidor web. Puerto 5000.
- En la línea 5, usamos el HTTP GET sin la instancia del servidor web utilizando la aplicación.conseguir. Esto, por defecto, buscará obtener datos del directorio raíz (‘/’). La función de devolución de llamada es muy importante, ya que contiene los objetos Request (req) y Response (res). Los nombres req y res son por convención.
Solicitud y respuesta
- La solicitud vendrá de la url de nuestro navegador. Puede encontrar más información aquí.
- la Respuesta es la respuesta a una solicitud. Se puede encontrar más aquí.
En pocas palabras, nuestro navegador realiza una Solicitud y le enviará una Respuesta.
Patea los neumáticos
- En VSCode, pulsa F5 (abreviatura de Iniciar depuración en el menú Depuración.) Su consola debe tener el siguiente aspecto.
2. Vaya a su navegador y escriba LocalHost: 5000 y presione Enter. Deberías ver lo siguiente.
Su navegador hizo una Petición GET y les envió una Respuesta mediante res.enviar.
Conexión de nodo SQL Server
(Opcional si se hace antes.) En la ventana de Terminal, escriba
npm install mssql
Esto instala los controladores de SQL Server.
Ejemplo de base de datos
Este es exactamente el mismo código de inicio que mi artículo anterior, por lo que no lo revisaré en detalle. Sin embargo, su posición en el objeto de la aplicación será importante.
Un par de cosas a tener en cuenta que serán diferentes de antes, después de nuestra prueba inicial,
- el rendimiento de nuestros Empleados se enviará desde una Página Web (publicada.)
- el resultado de la consulta se enviará a una página Web utilizando Response.
Ejemplo de conexión/Consulta de base de datos
Introduzca el siguiente código.
Algo importante a tener en cuenta es que tenemos un Servidor Web y una conexión y consulta de base de datos. Pero no interactúan. ¡Todavía!
Run it with by stopping and starting the web server or refreshing
and you will see the web server is running y hay salida de consola de los datos de la consulta. Pero no estamos recibiendo nada del servidor web ni enviando nada a una página web.
El código HTML
Tenemos una página para servir cuando el usuario accede a nuestro sitio. Esta página les permitirá enviar un parámetro (PerformanceRating) que se puede utilizar en la Consulta de la Base de datos.
Nota: no voy a estar preocupado por el estilo de nuestra página web. Será sencillo y directo al grano.
También estamos guardando todo en la raíz. Una mejor práctica? ¡De ningún modo! Pero vamos por la funcionalidad. La limpieza puede ocurrir más tarde.
- Crear las siguientes páginas web y nombrarlas índice.html y Empleados.HTML.
- índice.html será nuestra página fuente principal.
- Empleados.html será donde termina nuestro resultado.
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. Una de las cuales es cómo elijo servir índice.HTML. Otras fuentes que lea pueden entrar en el enrutamiento. El enrutamiento es un área muy importante, pero fuera de nuestro alcance. Nuestro camino es solo uno de muchos caminos. Las nuevas incorporaciones a nuestro código será,
- ruta — esto nos ayudará a utilizar res.sendFile al servidor el archivo que queremos cuando un visitante llega a nuestro sitio.
- bodyParser-hace que los datos del formulario estén disponibles una vez que se realiza una PUBLICACIÓN
- sendFile-le permite servir la página predeterminada deseada.
Realizar los siguientes cambios en el código,
Ejecutar con al detener e iniciar el servidor web o refrescante. En su navegador, después de actualizar el navegador,usted debe consultar
Usando los Datos del formulario HTML En Nuestra Consulta
Para esto, necesitamos agregar una aplicación.post. Esto involucrará lo que deseemos cuando el índice.html para se publica desde la página web.
Este es un paso importante. Nuestra conexión a la base de datos y la consulta deben estar dentro de la aplicación.función de devolución de llamada posterior.
- La línea 13 inicia la aplicación.post. En el cuerpo de la devolución de llamada están nuestros componentes de base de datos.
- La línea 52 cierra la aplicación.post.
Podríamos estructurar todo esto de manera diferente, sí. Lo estoy haciendo de esta manera para darnos una base que funcione. Luego podemos explorar otras opciones
Usando los datos del formulario
Usar los datos del formulario será fácil.
- Línea 35, obtener el formulario de datos del elemento Select. bodyParser es lo que nos está ayudando aquí. req.cuerpo.elementname.
- La línea 37, la Consulta, utiliza el valor del formulario.
- La línea 50 envía los datos sin procesar consultados a los empleados.HTML.
Ejecútelo deteniendo e iniciando el servidor web o actualizándolo.
- Vaya a su página web y actualice.
2. Elija «Promedio»en el menú desplegable de calificación y haga clic en «Obtener resultados»
3. Deberías obtener resultados en Empleados.HTML. No es atractivo, pero es un comienzo.
ahora Tenemos una conexión desde nuestro Front-End para nuestros Back-End para nuestros Front-End. Esto es ALGO IMPORTANTE.
Últimos Pasos: Limpie La Salida (un poco.)
Esta es la parte más fácil y difícil. Más difícil porque hay muchas opciones. Vamos a ir con lo básico de lo básico para que podamos vislumbrar lo que está sucediendo en el fondo.
Este es un área que va a querer explorar con mucho más detalle. No solo métodos adicionales de res, sino la idea de un «motor de visión».
Y exploraré algunos de estos en futuros artículos. En particular, uno de mis favoritos, el manillar exprés.
Por ahora, vamos a construir nuestra salida. Sí. Construirlo nosotros mismos. Construya una tabla de nuestros datos en código y envíela! Solo repasa nuestros datos.conjunto de registros y compilación.
el siguiente
Usted desea agregar líneas de 50 a 57.
El resultado será el siguiente al Consultar «Promedio»
Qué hacer A continuación (sí, usted)
Juegue con él, agregue más, cambie la estructura. Trabaje a partir de lo básico y trabaje hacia arriba.
Estamos trabajando con los primeros principios para ayudarnos a entender lo que sucede detrás de algunas de las capas que se agregan por plantillas, marcos y bibliotecas de JavaScript en estos días.
Hemos construido por nuestra cuenta, un sistema de pila completa. Sí, lo creas o no tenemos.
Lo que necesita más trabajo, la salida. Pero todo este ejercicio abre un mundo de exploración y oportunidades. Por lo tanto, queremos expandir los conceptos de,
- Más operaciones CRUD
- Enrutamiento
- Ver motores/plantillas
Gracias por realizar este viaje y exploraremos más.
También puede disfrutar,