Node.js Express Framework

Introducción a Express

Express es un framework de aplicaciones web de node.js simple y flexible que ofrece una serie de potentes características para ayudarte a crear varias aplicaciones web, así como abundantes herramientas HTTP.

Con Express puedes crear rápidamente un sitio web con todas las funciones.

Características principales del framework Express:

Se pueden configurar middleware para responder a las solicitudes HTTP.
Define una tabla de rutas para ejecutar diferentes acciones de solicitudes HTTP.
Se pueden renderizar páginas HTML dinámicamente pasando parámetros a las plantillas.

Instalación de Express

Instala Express y guárdalo en la lista de dependencias:

$ cnpm install express --save

El comando anterior instalará el framework Express en el directorio actual delnode_modulesdirectorio,node_modulesBajo el directorio se creará automáticamente el directorio express. Los siguientes módulos importantes deben instalarse junto con el framework express:

body-parser- Middleware de node.js, utilizado para procesar datos codificados en JSON, Raw, Text y URL.
cookie-parser- Esta es una herramienta para analizar cookies. A través de req.cookies se pueden obtener las cookies enviadas y convertirlas en objetos.
multer- Middleware de node.js, utilizado para procesar datos de formularios con enctype="multipart/form-data" (configura la codificación MIME del formulario).

$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

Después de la instalación, podemos comprobar el número de versión de express utilizada:

$ cnpm list express
/data/www/node
└── [email protected]  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

Primer ejemplo del framework Express

A continuación usaremos el framework Express para generar "Hello World".

En el siguiente ejemplo, importamos el módulo express y, después de que el cliente realice una solicitud, respondemos con la cadena "Hello World".

Crea el archivo express_demo.js, con el siguiente código:

Código del archivo express_demo.js:

//Archivo express_demo.js var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Ejemplo de aplicación, dirección de acceso: http://%s:%s", host, port) })

Ejecuta el código anterior:

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

Accede a http://127.0.0.1:8081 en el navegador, el resultado se muestra en la siguiente figura:

Solicitudes y respuestas

Las aplicaciones Express utilizan los parámetros de la función de devolución de llamada (callback):requestyresponseobjetos para manejar los datos de las solicitudes y respuestas.

app.get('/', function (req, res) {
   // --
})

requestyresponseDescripción detallada de los objetos:

Objeto Request- El objeto request representa una solicitud HTTP y contiene propiedades como la cadena de consulta, parámetros, contenido, encabezados HTTP, etc. Las propiedades comunes son:

req.app: cuando callback es un archivo externo, usa req.app para acceder a la instancia de express.
req.baseUrl: obtiene la ruta URL donde está instalada actualmente la ruta.
req.body / req.cookies: obtiene el "cuerpo de la solicitud" / Cookies.
req.fresh / req.stale: determina si la solicitud aún es "fresca".
req.hostname / req.ip: obtiene el nombre de host y la dirección IP.
req.originalUrl: obtiene la URL de solicitud original.
req.params: obtiene los parámetros de la ruta.
req.path: obtiene la ruta de la solicitud.
req.protocol: obtiene el tipo de protocolo.
req.query: obtiene la cadena de parámetros de consulta de la URL.
req.route: obtiene la ruta actualmente coincidente.
req.subdomains: obtiene los subdominios.
req.accepts(): comprueba los tipos de documento aceptables de la solicitud.
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages: devuelve la primera codificación de caracteres aceptable del conjunto de caracteres especificado.
req.get(): obtiene el encabezado de solicitud HTTP especificado.
req.is(): determina el tipo MIME del encabezado Content-Type de la solicitud.

Objeto Response- El objeto response representa la respuesta HTTP, es decir, los datos de respuesta HTTP que se envían al cliente al recibir una solicitud. Las propiedades comunes son:

res.app: igual que req.app.
res.append(): agrega el encabezado HTTP especificado.
res.set() restablecerá los encabezados establecidos anteriormente después de res.append().
res.cookie(nombre, valor [, opción]): establece una Cookie.
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie(): elimina una Cookie.
res.download(): envía el archivo de la ruta especificada.
res.get(): devuelve el encabezado HTTP especificado.
res.json(): envía una respuesta JSON.
res.jsonp(): envía una respuesta JSONP.
res.location(): solo establece el encabezado HTTP Location de la respuesta, sin establecer el código de estado ni cerrar la respuesta (close response).
res.redirect(): establece el encabezado HTTP Location de la respuesta y el código de estado 302.
res.render(view, [locals], callback): renderiza una vista y pasa la cadena renderizada al callback. Si ocurre un error durante el renderizado, se llamará automáticamente a next(err). Al callback se le pasará un posible error y la página renderizada, de modo que no se realizará una salida automática.
res.send(): envía una respuesta HTTP.
res.sendFile(ruta [, opciones] [, fn]): envía el archivo de la ruta especificada. - Establece automáticamente el Content-Type según la extensión del archivo.
res.set(): establece encabezados HTTP; si se pasa un objeto, se pueden establecer varios encabezados a la vez.
res.status(): establece el código de estado HTTP.
res.type(): establece el tipo MIME de Content-Type.

Enrutamiento

Ya hemos aprendido las aplicaciones básicas de las solicitudes HTTP, y el enrutamiento determina quién (script específico) responde a la solicitud del cliente.

En una solicitud HTTP, podemos extraer la URL de la solicitud y los parámetros GET/POST a través de las rutas.

A continuación, ampliaremos Hello World, añadiendo algunas funciones para manejar más tipos de solicitudes HTTP.

Crea el archivo express_demo2.js, con el siguiente código:

Código del archivo express_demo2.js:

Ejecute el código anterior:

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

Luego puede intentar acceder a diferentes direcciones en http://127.0.0.1:8081 para ver el efecto.

Acceda a http://127.0.0.1:8081/list_user en el navegador, el resultado se muestra en la siguiente figura:

Acceda a http://127.0.0.1:8081/abcd en el navegador, el resultado se muestra en la siguiente figura:

Acceda a http://127.0.0.1:8081/abcdefg en el navegador, el resultado se muestra en la siguiente figura:

Archivos estáticos

Express proporciona un middleware integrado express.static para configurar archivos estáticos como: imágenes, CSS, JavaScript, etc.

Puede usar express.static middleware para establecer la ruta de los archivos estáticos. Por ejemplo, si coloca imágenes, CSS y archivos JavaScript en el directorio public, puede escribir:

app.use('/public', express.static('public'));

Podemos poner algunas imágenes en el directorio public/images, como se muestra a continuación:

node_modules
server.js
public/
public/images
public/images/logo.png

Modifiquemos nuevamente la aplicación "Hello World" para agregar la funcionalidad de manejo de archivos estáticos.

Cree el archivo express_demo3.js, el código es el siguiente:

Código del archivo express_demo3.js:

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("Ejemplo de aplicación, dirección de acceso: http://%s:%s", host, port) })

Ejecute el código anterior:

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

Ejecute el código anterior:

Acceda a http://127.0.0.1:8081/public/images/logo.png en el navegador (este ejemplo usa el logotipo de Tutorial de Novato), el resultado se muestra en la siguiente figura:

Método GET

El siguiente ejemplo demuestra cómo enviar dos parámetros a través del método GET en un formulario. Podemos usar el enrutador en el archivo server.jsprocess_getpara procesar la entrada:

Código del archivo index.html:

<html> <body> <form action="/process_get" method="GET"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>

Código del archivo server.js:

Ejecute el código anterior:

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Acceda a http://127.0.0.1:8081/index.html en el navegador, como se muestra en la figura:

Ahora puede ingresar datos en el formulario y enviarlos, como se demuestra a continuación:

Método POST

El siguiente ejemplo demuestra cómo enviar dos parámetros a través del método POST en un formulario. Podemos usar el enrutador en el archivo server.jsprocess_postpara procesar la entrada:

Código del archivo index.html:

<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>

Código del archivo server.js:

Ejecute el código anterior:

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

Acceda a http://127.0.0.1:8081/index.html en el navegador, como se muestra en la figura:

Ahora puede ingresar datos en el formulario y enviarlos, como se demuestra a continuación:

Subida de archivos

A continuación creamos un formulario para subir archivos, usando el método POST, y el atributo enctype del formulario se establece en multipart/form-data.

Código del archivo index.html:

<html> <head> <title>Formulario de subida de archivos</title> </head> <body> <h3>Subir archivo:</h3>Seleccione un archivo para subir:<br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="Subir archivo" /> </form> </body> </html>

Código del archivo server.js:

Ejecute el código anterior:

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

Acceda a http://127.0.0.1:8081/index.html en el navegador, como se muestra en la figura:

Ahora puede ingresar datos en el formulario y enviarlos, como se demuestra a continuación:

Gestión de cookies

Podemos usar middleware para enviar información de cookies al servidor Node.js. El siguiente código imprime la información de cookies enviada por el cliente:

Código del archivo express_cookie.js:

//Archivo express_cookie.js var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies: " + util.inspect(req.cookies)); }) app.listen(8081)

Ejecute el código anterior:

$ node express_cookie.js

Ahora puede acceder a http://127.0.0.1:8081 y ver la salida de información en la terminal, como se demuestra a continuación:

Recursos relacionados

Sitio web oficial de Express:http://expressjs.com/
API de Express 4.x en chino:Express4.x API Chinese
Express4.x API：http://expressjs.com/zh-cn/4x/api.html

Otras extensiones

Node.js Aplicación

Node.js Express Framework

Introducción a Express

Instalación de Express

Primer ejemplo del framework Express

Código del archivo express_demo.js:

Solicitudes y respuestas

Enrutamiento

Código del archivo express_demo2.js:

Archivos estáticos

Código del archivo express_demo3.js:

Método GET

Código del archivo index.html:

Código del archivo server.js:

Método POST

Código del archivo index.html:

Código del archivo server.js:

Subida de archivos

Código del archivo index.html:

Código del archivo server.js:

Gestión de cookies

Código del archivo express_cookie.js:

Recursos relacionados