No exercício da lição anterior,
construímos um servidor HTTP simples que poderia servir conteúdo estático,
isso foi construído completamente usando Node.js.
Agora que aprendemos sobre o Express,
a estrutura minimalista que suporta o desenvolvimento do servidor em cima do Node.js,
vamos agora examinar como podemos usar o Express para construir o mesmo servidor neste exercício.
Para começar, vá para a pasta Node.js que temos usado para armazenar
todo o código para este curso e, em seguida, crie uma nova pasta lá chamada node-express
e, em seguida, mova para esta pasta.
Agora, vamos criar
uma pasta pública aqui dentro da pasta express nó.
Em seguida, vamos para essa pasta pública HTTP nó e, em seguida, copiar esses dois arquivos,
o index.HTML e aboutus.html para a pasta pública node-express.
Vamos servir esses dois arquivos usando
o servidor Express que vamos construir neste exercício.
Agora, vamos para os terminais.
Mover para a pasta node-express no terminal e, em seguida, no prompt, digite npm init,
para inicializar um aplicativo de nó.
Então, para o nome do pacote vamos apenas usar node-express,
e para a descrição vamos dizer Node Express Exemplos,
e ponto de entrada é index.js,
e todo o resto do mesmo como antes,
e vamos criar o arquivo package.json.
Agora, deixe-me abrir
o projeto usando o editor Visual Studio Code no meu caso e,
em seguida, no arquivo package.json vamos entrar e adicionar o novo script chamado start,
que é índice de nó e salvar as alterações.
Agora, que inicializamos o módulo do nó,
vamos em frente e instalar o framework Express dentro
do projeto para fazer uso dele para construir nosso servidor express.
Então, no prompt,
digite npm install express.
Então é assim que você instalaria
um módulo de nó de terceiros se você estiver fazendo este curso
pela primeira vez e não tiver feito os cursos anteriores
, então isso é algo que é importante notar.
É assim que você instalará um módulo de nó adicionando o menos salvar, nós
também estamos salvando as informações de que
este módulo de nó de terceiros é uma dependência
para o nosso projeto e essas informações serão salvas no arquivo package.json.
Se você fez os cursos anteriores da especialização,
então você já sabe sobre essa informação.
Então, vamos em frente e instalar o módulo Express.
Como você pode notar,
estamos usando o Express versão 4.16.3 neste curso.
Então, vamos agora voltar ao nosso código.
Olhando para o arquivo package.json,
você vê que dentro do arquivo package.json instalando o Express já vemos
outra propriedade incluída no arquivo package.json chamada dependências.
Estas dependências rastreiam todos
os pacotes dos quais este projeto atual será dependente.
Aqui você vê o Express sendo instalado
lá e a versão correspondente do Express sendo instalada aqui,
então isso declara que este projeto em particular é
dependente da versão Express pelo menos 4.16.3.
Além disso, você também vê essa pasta chamada de módulos de nó criados aqui.
Então é aqui que todos os módulos de nós de terceiros que
são instalados pelo seu aplicativo serão armazenados.
Agora, quando fazemos um commit do Git,
não queremos confirmar esta pasta de módulos do nó.
Então, para ignorar isso,
vamos criar um arquivo
chamado.gitignore e dentro do arquivo.gitignore,
vamos digitar módulos node_.
Então, isso é deixar o Git saber que não queremos
submeter a pasta de módulos nó para o repositório Git.
Então, com isso vamos salvar as alterações.
Então, agora, quando você cria um repositório Git,
a pasta de módulos de nó será ignorada.
Não é necessário porque você sempre pode recriar a pasta de módulos de nó sempre
que clonar este projeto do seu repositório Git simplesmente digitando npm install.
Isto irá olhar para o arquivo package.json,
e olhar para todas as dependências,
e as dependências de desenvolvimento que estão no
arquivo package.json e são automaticamente instalados todos esses pacotes para você.
Agora, que concluímos isso,
vamos criar nosso primeiro projeto Express,
então para fazer isso vamos criar um arquivo chamado index.js e no index.js
vamos declarar um const express exigem express.
Agora, você notará que express é um módulo de nó de terceiros e foi
instalado em nossa pasta de módulos de nó no diretório correto.
Então, quando declaramos isso aqui dizendo que este módulo Express é necessário,
em seguida, ele será automaticamente incluído a partir da pasta módulos nó em nossa aplicação.
Agora, instale também HTTP
o módulo núcleo aqui.
Agora, que temos instalado isso,
vamos criar o nome do curso como
host local e número da porta como 3000.
Então você vê que estamos usando exatamente a mesma maneira de fazer
este exercício como fizemos para o exercício HTTP anteriormente.
Agora, neste ponto,
vamos declarar este const chamado aplicativo como expresso.
Então, desta forma, estamos dizendo que nossa aplicação vai usar o módulo de nó Express.
Então, uma vez que fazemos isso, o
Express fornece um monte de métodos que podemos usar para construir nosso servidor web.
Então, depois disso, vamos dizer app.use () e dentro aqui,
vamos declarar uma função que será chamada para configurar nosso servidor.
Então, esta função leva três parâmetros req,
que é a requisição; res,
que é a resposta, e em seguida.
Agora, como vimos Express usa middleware adicional.
Então, o próximo é usado quando você precisa
invocar middleware adicional para cuidar do trabalho em seu nome.
Veremos o uso do próximo em alguns dos exercícios posteriores,
mas a função aqui terá três parâmetros req, res, e em seguida.
Em seguida, é um parâmetro opcional que
não pode ser incluído se você não estiver indo para usá-lo dentro do seu código.
Então, aqui dentro vamos dizer,
log do console e, em seguida,
vamos registrar esses cabeçalhos,
e vamos responder com o código de status definido como 200.
Defina o tipo de conteúdo do cabeçalho
como texto HTML.
Então, você percebe que grande parte desse código parece muito semelhante
à maneira como configuramos nosso aplicativo de nó.
Então, vamos dizer res.end e
aqui corpo HTML h1.
Vamos apenas dizer que este é um servidor Express e fechar
os tanques lá, e pronto. A
partir de sua compreensão do nó HTTP,
você já entende o que esses três estão fazendo
e a mesma coisa também é feita no servidor Express.
Agora que temos configurado o servidor usando o App,
vamos configurar o servidor,
e então este é o lugar onde vamos usar o HTTP CreateServer,
e assim CreateServer agora vai tomar aplicativo como é parâmetro de função lá,
e depois disso, vamos simplesmente dizer server.listen port,
hostname e a
função de seta aqui dentro da qual eu vou imprimir,
console, log back servidor coat rodando em HTTP: //hostname:port,
é isso. Então você verá que esta parte é muito semelhante
ao que você fez para o exercício HTTP,
exceto que o CreateServer agora leva este aplicativo,
que declaramos anteriormente Express.
Então, Express está adicionando em funcionalidade adicional que será
usado pelo servidor HTTP que criamos usando nota.
Uma vez que terminamos com isso,
vamos salvar as alterações,
e então vamos em frente e iniciar o servidor,
e dar uma olhada no que o servidor servirá.
Indo para o terminal, adicione o terminal,
digite NPM start e você verá que seu servidor está funcionando.
Agora, quando acessamos isso a partir do navegador ou do carteiro,
você vai ver o que ele serve para cima.
Então, aqui tenho o Carteiro e dinheiro.
Deixe-me enviar a solicitação GET para localhost 3.000 exatamente como antes
e você verá que isso está servindo o código HTML que incluímos lá,
e então este é um servidor Express.
Clicando na visualização,
isso mostrará como será em um navegador,
e isso mostra a versão bruta do código que foi enviado de volta do lado do servidor,
e você pode ver que o código de status é 200, ok?
E o outro vetor de informações de cabeçalho foi enviado do site do servidor.
Observe em particular que diz x alimentado por Express no cabeçalho.
Com isso, completamos a primeira parte deste exercício onde vimos
como podemos fazer uso do Express para configurar um servidor web simples.
Deixe-me parar o servidor e inicializar o repositório Git,
então no prompt vou digitar “git init” e
então “git status” e você verá que os arquivos que foram desrastreados,
então eu vou dizer “get and saved” e esses arquivos são agora adicionados ao repositório Git,
e então quando você diz git status,
você verá os arquivos que foram adicionados.
Observe em particular que a pasta de módulos de nó
não foi adicionada ao repositório Git porque no
arquivo.gitignore explicitamente afirmamos que
a pasta de módulos de nó não deve ser incluída no repositório Git.
Então, agora, vamos verificar em nossa troca de commit dizendo git
commit menos m Express exemplo,
e nós confirmamos isso para o nosso repositório Git.
Na segunda parte deste exercício,
vamos olhar para o uso de middleware Express chamado Morgan.
Morgan é usado para registrar informações para a tela,
então ele vai registrar informações sobre solicitações recebidas para a tela para que
possamos ver algumas informações sendo impressas em nosso console aqui.
Além disso, vamos ver como podemos configurar o nosso servidor Express para servir arquivos HTML estáticos.
Para começar, no prompt digite npm
instalar Morgan menos, menos salvar.
Agora, Morgan vai ser uma dependência que vamos usar em nosso aplicativo.
Então, é por isso que é menos,
menos salvar e isso obteria Instalar,
e você pode ver que eu estou usando Morgan versão 1.9.0 neste curso.
Agora que instalamos Morgan,
vamos ver como podemos fazer uso dele dentro do nosso aplicativo.
Então, indo para a nossa Aplicação,
a maneira de fazer uso de Morgan é declarar aqui
const Morgan exigir Morgan,
e então vamos dizer,
“App use Morgan com o desenvolvimento”.
Então, esta é a versão de desenvolvimento.
Então, ele irá imprimir informações adicionais para a tela, conforme necessário.
Agora, vamos para a nossa candidatura.
Dentro do nosso aplicativo, eu não vou registrar todos os cabeçalhos.
Em vez disso, deixe-me remover isso porque Morgan
registrará informações suficientes para que possamos olhar,
e eu vou configurar meu servidor para servir os arquivos HTML da pasta pública.
Então, para fazer isso,
vou declarar uso e expressar estática.
Isso diz ao Express para servir os arquivos estáticos de dirname de sublinhado duplo.
Então, isto diz a raiz
deste projeto e eles irão encontrar esses arquivos
em double_dirname, plus/ public.
Então, lembre-se de que criamos a pasta pública na pasta Express nó.
Então, isso está informando Express que você vai olhar para
esta pasta particular na pasta raiz deste projeto e dentro da pasta pública.
Então, esta será a pasta a partir da qual
arquivos HTML estáticos serão servidos pelo meu servidor Express.
Depois de fazer essas alterações,
vamos salvar as alterações
e, em seguida, reiniciar nosso servidor
e, em seguida, ver como ele funciona.
Indo para esse prompt,
vamos digitar npm start,
para iniciar nosso servidor,
e uma vez que o servidor está funcionando,
vamos examinar o que ele servirá quando enviarmos várias solicitações para este servidor.
Usando o Postman, vamos primeiro enviar uma solicitação get para o host local:3,000
e você notará que ele está servindo o arquivo index.html.
Nós configuramos nosso servidor para servir arquivos estáticos da pasta pública,
e se nós apenas dizer localhost:3000 por padrão,
ele servirá o arquivo index.html.
Então, é assim que seu servidor Web típico funciona.
Então, isso é o que acabamos configurando nosso servidor expresso para fazer.
Agora, vamos digitar localhost: 3000 about.html e enviar a solicitação,
e diz que isso é sobre nossa estratégia HTML,
e também o arquivo HTML sobre nós foi salvo aqui.
Então, na visualização,
você pode ver o arquivo resultante que foi servido do nosso site do servidor.
Vamos tentar acessar um arquivo inexistente
e você verá que quando você tentar acessar um arquivo inexistente,
então ele será padrão para a segunda configuração que fizemos em nosso código,
que diz que este é um servidor Express.
Nós não especificamos para o nosso servidor Express como lidar com
situações em que ele encontra um arquivo que não existe.
Então, é por isso que ele está usando o padrão que tem configurado logo abaixo da estática Express,
que é servir o valor padrão, e claro,
este não é o comportamento mais ideal,
mas isso é o que temos no servidor Express neste momento.
Mais tarde, modificaremos o servidor Express para lidar com
erros com mais detalhes, em exercícios posteriores.
Este também é um bom momento para você fazer um commit Git das mudanças.
Então, vamos verificar o status do Git depois de parar o servidor,
e vamos adicionar os arquivos modificados,
e então fazer Git commit
menos m Express,
servir arquivos estáticos.
É isso. Com isso,
completamos este exercício.
Neste exercício, vimos como podemos configurar
um servidor web simples para servir conteúdo em nosso nome.