Latest web development tutorials

Node.js marco expreso

Perfil expreso

Express es un framework de aplicaciones web Node.js simple y flexible que ofrece una gama de características de gran alcance para ayudarle a crear una variedad de aplicaciones Web y herramientas HTTP ricos.

Uso Express puede configurar rápidamente una página web completamente funcional.

las características principales del marco Express:

  • Middleware se puede configurar para responder a las peticiones HTTP.

  • Define la tabla de enrutamiento para llevar a cabo diferentes acciones petición HTTP.

  • Puede pasar parámetros a la plantilla para hacer dinámicamente páginas HTML.


La instalación rápida

La instalación rápida y guardarlo en basarse en la lista:

$ npm install express --save

El comando anterior se expresa bastidor está montado directorionode_modules el directorio actual, el directorio se creará automáticamente expresar directorio node_modules.Varias necesidades importantes y módulo Express se instala con el marco:

  • cuerpo-parser - Node.js middleware, JSON, Crudo, texto y datos codificados en URL para su procesamiento.

  • galleta-parser - Esta es una herramienta para el análisis de la galleta.Por req.cookies puede llegar a pasar por encima de la cookie, y convertirlos en objetos.

  • multer - Node.js middleware para el procesamiento enctype = "multipart / form-data " ( conjunto de formularios de codificación MIME) los datos del formulario.

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

La primera instancia marco exprés

A continuación, utilizamos el marco Express hasta la salida de "Hello World".

El siguiente ejemplo nos introdujo módulo expreso, y el cliente solicitante, la respuesta a la cadena "Hola Mundo".

Crear archivo express_demo.js, el código es el siguiente:

//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("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

El acceso http://127.0.0.1:8081 en el navegador, los resultados que se muestran a continuación:


Solicitud y respuesta

expresa aplicación utilizaparámetros de la función de devolución de llamada:objetosdepetición yrespuestapara manejar las peticiones de datos y las respuestas.

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

introduciruna solicitud concreta y objeto de respuesta:

Object Request - Solicitud de objeto representa una petición HTTP contiene el parámetro de cadena de petición de consulta, el contenido, atributos de encabezado HTTP.Atributos comunes son:

  1. req.app: Cuando devolución de llamada a un archivo externo, con acceso expresar ejemplos req.app
  2. req.baseUrl: se instalan actualmente enrutamiento URL
  3. req.body / req.cookies: obtener "cuerpo de la petición" / Cookies
  4. req.fresh / req.stale: determinar si la solicitud está todavía "fresco"
  5. req.hostname / req.ip: obtener el nombre de host y la dirección IP
  6. req.originalUrl: Obtener la URL solicitud original
  7. req.params: Obtener parámetros de la ruta
  8. req.path: Obtener la ruta de solicitud
  9. req.protocol: Obtener el tipo de protocolo
  10. req.query: Obtener los parámetros de cadena de consulta URL
  11. req.route: Obtener la ruta coincidente actual
  12. req.subdomains: Obtener un subdominio
  13. req.accpets (): Comprobar la cabecera de petición Aceptar tipo de solicitud
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
  15. req.get (): Obtiene el encabezado de solicitud HTTP especificado
  16. req.is (): si la solicitud de cabecera Content-Type tipo MIME

objetos de respuesta - objeto de respuesta representa una respuesta HTTP, HTTP, es decir, cuando se recibe una solicitud enviada a los datos de respuesta cliente. Atributos comunes son:

  1. res.app: lo mismo que req.app
  2. res.append (): Especifica encabezado HTTP adicional
  3. res.set () primero antes de res.append () se restablecerá la configuración de
  4. res.cookie (nombre, valor [, opción]): conjunto de cookies
  5. Opition: dominio / expira / HTTPOnly / MaxAge / ruta / seguro / firmado
  6. res.clearCookie (): Borrar Cookies
  7. res.download (): especifica la vía de transmisión del archivo
  8. res.get (): Devuelve la cabecera HTTP
  9. res.json (): transferencia de respuesta JSON
  10. res.jsonp (): transferir respuesta JSONP
  11. res.location (): establece las cabeceras de respuesta HTTP Location solamente, no está ajustado o cerca código de estado de respuesta
  12. res.redirect (): establece las cabeceras de respuesta HTTP ubicación y el estado de conjunto de códigos 302
  13. res.send (): HTTP transferencia de respuesta
  14. res.sendFile (ruta [, opciones] [,] Lit): Especifica la vía de transmisión del fichero - se ajusta automáticamente la extensión de tipo de contenido basado en archivos
  15. res.set (): establece la cabecera HTTP, puede establecer múltiples cabeza objeto entrante
  16. res.status (): establece el código de estado HTTP
  17. res.type (): establece el tipo MIME Content-Type

enrutamiento

Ya conocemos las peticiones HTTP de aplicaciones básicas e itinerarios fijados por quién (especificar una secuencia de comandos) para responder a las peticiones de los clientes.

En la solicitud HTTP, podemos extraer la URL y enrutamiento de solicitud de parámetros GET / POST.

A continuación extendemos Hello World, añadir algunas características para manejar más tipos de peticiones HTTP.

Crear archivo express_demo2.js, el código es el siguiente:

var express = require('express');
var app = express();

//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   res.send('Hello GET');
})


//  POST 请求
app.post('/', function (req, res) {
   console.log("主页 POST 请求");
   res.send('Hello POST');
})

//  /del_user 页面响应
app.get('/del_user', function (req, res) {
   console.log("/del_user 响应 DELETE 请求");
   res.send('删除页面');
})

//  /list_user 页面 GET 请求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 请求");
   res.send('用户列表页面');
})

// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 请求");
   res.send('正则匹配');
})


var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

A continuación, se puede tratar de acceder http://127.0.0.1:8081 dirección diferente, para ver el efecto.

http://127.0.0.1:8081/list_user acceso en el navegador, los resultados tal como se muestra a continuación:

http://127.0.0.1:8081/abcd acceso en el navegador, los resultados tal como se muestra a continuación:

El acceso http://127.0.0.1:8081/abcdefg en el navegador, los resultados que se muestran a continuación:


Los archivos estáticos

Express proporciona una función deexpress.static middleware para configurar los archivos estáticos, como imágenes, CSS, JavaScript y así sucesivamente.

Puede usar el middlewareexpress.static para establecer una ruta de archivo estático.Por ejemplo, si usted representa, CSS, JavaScript archivos en el directorio público, se puede escribir:

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

Podemos ir a / imágenes públicas directorio delega algunas imágenes, de la siguiente manera:

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

Vamos a modificaciones en la segunda "palabra de saludo" añadir archivos estáticos funcionalidad de procesamiento de la aplicación.

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

var express = require('express');
var app = express();

app.use(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("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

Ejecutar el código anterior:


método GET

El ejemplo siguiente muestra los dos parámetros en el formulario presentado por el método GET, podemos utilizar el enrutadorprocess_get server.js dentro del archivo para procesar la entrada:

código de archivo index.htm es el siguiente:

<html>
<body>
<form action="http://127.0.0.1:8081/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 de archivo server.js es el siguiente:

var express = require('express');
var app = express();

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

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

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

   // 输出 JSON 格式
   response = {
       first_name:req.query.first_name,
       last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

el acceso del navegador http://127.0.0.1:8081/index.htm, como se muestra:

Ahora puede introducir datos en los formularios, y presentar la siguiente presentación:


método POST

El siguiente ejemplo muestra dos parámetros mediante el método POST para enviar el formulario, podemos utilizar el routerprocess_post server.js dentro del archivo para procesar la entrada:

código de archivo index.htm modificado de la siguiente manera:

<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 modificado de la siguiente manera:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

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

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {

   // 输出 JSON 格式
   response = {
       first_name:req.body.first_name,
       last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

el acceso del navegador http://127.0.0.1:8081/index.htm, como se muestra:

Ahora puede introducir datos en los formularios, y presentar la siguiente presentación:


Cargar archivo

A continuación creamos un formulario para cargar un archivo usando el método POST, el atributo forma enctype establecido en multipart / form-data.

código de archivo index.htm modificado de la siguiente manera:

<html>
<head>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传:</h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上传文件" />
</form>
</body>
</html>

código del archivo server.js modificado de la siguiente manera:

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息

   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

Ejecutar el código anterior:

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

el acceso del navegador http://127.0.0.1:8081/index.htm, como se muestra:

Ahora puede introducir datos en los formularios, y presentar la siguiente presentación:


Gestión de la galleta

Podemos utilizar el middleware envía información de la cookie al servidor Node.js, el siguiente código genera la información de la cookie es enviado por el cliente:

// express_cookie.js 文件
var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
  console.log("Cookies: ", req.cookies)
})

app.listen(8081)

Ejecutar el código anterior:

$ node express_cookie.js 

Ahora se puede acceder y ver la información http://127.0.0.1:8081 terminal de salida, la siguiente presentación:


Información relacionada