Articles

Como definir rotas e métodos de solicitação HTTP no Express

Introdução

Este artigo irá examinar como lidar com rotas e métodos de solicitação HTTP dentro de um projecto Express. As Rotas tratam da navegação do utilizador para vários URLs ao longo da sua aplicação. HTTP, abreviatura para Hyper Text Transfer Protocol, comunica e facilita os dados do seu servidor Express para o navegador da web.

aprenderá como definir rotas e usar os métodos de pedido HTTP GETPOSTPUT, e DELETE para manipular dados.

Prerequisites

Para completar este tutorial, uma compreensão de Node.js é útil mas não necessária. Se quiser saber mais sobre Node.js, verifique o Node.js series.

Configurar o seu projecto

As Express é um Node.js framework, assegure-se de que tem Node.js instalado a partir de Node.js antes de seguir os próximos passos. Execute o seguinte no seu terminal:

Criar um novo directório chamado node-express-routing para o seu projecto:

  • mkdir node-express-routing

Mudar para o novo directório:

  • cd node-express-routing

Initializar um novo projecto de Nó com padrões. Isto incluirá o seu ficheiro package.json para aceder às suas dependências:

  • npm init -y

Criar o seu ficheiro de entrada, index.js. É aqui que irá tratar das suas rotas e métodos de pedido HTTP:

  • touch index.js

Instalar ambos Express e nodemon como dependências. Utilizará nodemon para reiniciar continuamente o seu projecto Express sempre que o index.js mudar de ficheiro.

  • npm install express --save
  • npm install -D nodemon

Abrir o seu package.json ficheiro com o seu editor de texto preferido e actualizar o seu start script para incluir nodemon e o seu index.js ficheiro:

package.json

Isto permitir-lhe-á utilizar o comando npm start no seu terminal para lançar o seu servidor Express e actualizar as alterações.

Agora que configurou o seu projecto e configurou nodemon para actualizar quando detectar alterações no seu ficheiro index.js, está pronto para iniciar o seu servidor Express.

Iniciar o seu servidor Express

O seu servidor Express é onde irá tratar da lógica para integrar as suas rotas e métodos de pedido HTTP. Irá configurar e executar o seu servidor para visualizar o seu projecto no browser.

Para iniciar o seu servidor Express, requeira Express no seu index.js ficheiro e armazene uma instância no app variável. Depois, declare uma variável PORT e especifique o endereço :3000.

index.js

Next, anexar .listen() a app e inserir PORT como primeiro argumento, depois uma função de retorno de chamada. O middleware Express .listen() cria um navegador local a partir do endereço no seu PORT variável para visualizar as suas alterações.

Inclua também express.json() como argumento para app.use(). Isto é para analisar os dados recebidos através dos seus pedidos HTTP. Uma versão anterior dependia da dependência body-parser, mas desde então o Express incluiu um middleware incorporado para analisar os dados.

Executar o seguinte comando no seu terminal para iniciar o projecto:

  • npm start

O seu projecto é carregado em . Navegue até ao seu navegador, e repare no seguinte:

Este é o início de uma instância Express em execução. Vamos trabalhar na definição de métodos HTTP para povoar o seu navegador.

Definindo o seu método HTTP GET Request Method

Para visualizar o seu projecto, pode enviar informações do seu servidor Express através de um GET request, um método HTTP.

In index.js, anexar .get() ao seu app variável, especificar uma rota anónima, e incluir uma chamada de retorno que acede ao request e response argumentos:

index.js
 app.get('/', (request, response) => { response.send('Hello');});

O argumento request contém informação sobre o GET pedido, enquanto response.send() envia os dados para o browser. Os dados dentro de response.send() podem ser uma string, um objecto, ou um array.

Agora que implementou um pedido GET, vejamos as rotas e outros métodos HTTP.

Roteiros de entendimento

index.js

Se navegar para receberá todas as contas no seu array:

Output

Também é capaz de filtrar ID’s de contas usando o /:id endpoint. Express considera o ID no endpoint /:id como um espaço reservado para um parâmetro do utilizador, e corresponde a esse valor.

desde que navegue para , obterá uma conta que corresponde ao parâmetro /:id:

Output
{ "id": 3, "username": "sarahjane", "role": "guest"}

Concepção de métodos de solicitação HTTP POST, PUT, e DELETE HTTP Request Methods

métodosHTTP fornecem funcionalidade adicional aos seus dados usando os métodos POSTPUT, e DELETE pedidos. O método POST pedido cria novos dados no seu servidor, enquanto PUT actualiza a informação existente. O DELETE método de pedido remove os dados especificados.

POST

Para criar novos dados no accounts array, é possível integrar um método de pedido POST.

In index.js, anexar .post() ao seu app variável, e incluir a rota'/accounts' como primeiro argumento:

index.js

P>Puxará qualquer dado recebido do seu POST pedido para a matriz accounts e enviará a resposta como um objecto JSON.

Seu accounts array detém agora um novo utilizador:

PUT

Pode editar e actualizar uma determinada conta através de um pedido PUT.

In index.js, anexar .put() ao seu app variável e incluir a rota '/accounts/:id' como primeiro argumento. Encontrará o ID de conta introduzido, e definirá um condicional para actualizar com novos dados:

index.js

Agora é possível actualizar os dados na matriz accounts. Se um utilizador alterar o seu "role":

{ "role": "guest"}

Nota que "role" actualiza para guest de admin em

Output
{ "id": 1, "username": "paulhal", "role": "guest"}

DELETE

É possível apagar utilizadores e dados usando o método de pedido DELETE.

Within index.js, anexar .delete() ao seu app variável, e incluir '/accounts/:id' como primeiro argumento. Irá filtrar através da matriz accounts e devolver a conta para eliminar.

index.js

Se enviar um DELETE pedido para , isto removerá a conta com o /:id de 1 da matriz accounts.

Conclusion

Especificar rotas e utilizar métodos de pedido HTTP ajudam a gerar desempenho adicional ao criar, actualizar, e apagar utilizadores e dados no seu servidor Express.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *