Bem-vindo novamente nesta lição Eu vou mostrar-lhe como podemos escrever.
Hm l.
Em um arquivo separado e podemos enviar esse arquivo de volta na resposta ao invés do que
fizemos até agora, usando o envio do redstart.
Há aqui três objetivos principais.
O primeiro é usar o redstart render para render-lo para enviar de volta um arquivo de cada arquivo e isso fará mais sentido uma vez
que falamos sobre o que cada um de nós é.
E esse é o próximo objetivo.
Explique o que é Ejaz e por que usamos isso.
E, finalmente, passar variáveis ​​para Ejay como modelos.
Então, para começar aqui, vou precisar de um novo aplicativo Express e eu vou passar por criar
o aplicativo expresso básico a partir do zero, que não continuarei fazendo em todos os vídeos, mas ainda é bastante cedo
no curso .
E eu só quero ter certeza de que você acostume-se a vê-lo e fazê-lo porque
é algo que você fará sem parar.
vou fazer um novo diretório dentro disso e nós vamos chamar essa demo do Ejay us.
Então eu tenho um diretório chamado More express de onde eu vou trabalhar para esta unidade e
E então, em vez do demo Ejaz, vamos executar o NPM nele e vou acelerar isso.
Então esse nome está bem.
A versão está boa descrição está vazia.
Eu sempre gosto de mudar isso para o aplicativo.
Sim.
Apenas uma preferência pessoal.
Entre com mais algumas vezes.
Você não precisa preencher qualquer um desses e lá vamos nós.
E agora, se nós nos permitimos, temos um pacote que Jason crie nosso ato de
J us e também executaremos o NPM install express dash dash save.
Aqui vamos nós.
Agora vamos abrir o arquivo de jazz e começar a adicionar algum código lá.
E ao invés de apenas fazer ls e depois clicar em J. S. e clicando em abrir encontrei recentemente outra maneira
de fazer isso.
9 adicionou recentemente o que é se você digitar o espaço C9 e depois o nome de um arquivo ou o caminho para um arquivo.
Esse Cloud
Então, o aplicativo base C9.
J Sim, isso o abrirá no editor.
É muito mais rápido do que ter que digitar ls e depois clicar no arquivo e depois clicar em Abrir.
Então, possamos obter o código expresso básico aqui até agora, os expressos expressos exigem express e, em seguida, o aplicativo var é igual
a expressar executá-lo como uma função.
Uma coisa que você ocasionalmente verá é aquela em que alguém disse que o aplicativo Savar é igual a exigir expressar e,
em seguida, apenas executá-lo como uma função imediatamente.
A maioria das pessoas irá fazê-lo assim em duas etapas separadas e, mais comumente, você verá Xpress e
app que podem ser qualquer coisa.
Agora vamos fazer a ação.
Ouça indo no fundo, que iniciará o servidor, por isso precisaria da porta que processa
essa porta EMV e depois processa esse IP D-NV e são variáveis ​​de ambiente que a nuvem 9 configurou
que estamos acessando a porta e Endereço de IP.
E então eu adiciono meu retorno de chamada que será executado uma vez que o servidor tenha sido configurado uma vez que ele esteja ouvindo e
nós vamos apenas ver o que acontece com o log.
O servidor está escutando assim e economizará.
Agora vamos adicionar na nossa primeira rota e faremos a rota rota.
Eu sempre gosto de começar e isso sempre é uma frase confusa para alguns dos meus alunos
porque esta palavra que eu pronuncio a rota alguns deles se pronunciará como raiz.
Eu tento deixá-lo muito claro quando digo raízes.
Só falo sobre R O T como neste.
A rota da raiz.
seguida, terão esses dois objetos pedidos em resposta e vamos seguir em frente e apenas chamar o rez envie e vamos fazer uma coisa simples.
OK, então vamos adicionar isso em apt get root ou slash e, em seguida, nossa função de retorno de
chamada será executada sempre que um pedido para obter solicitações é feito para cortar e, em
Bem-vindo à página inicial.
Assim como isso, todos deveriam ser revisados ​​neste momento.
Vamos começar o servidor até o nó j.
Parece que tudo é bom.
Vamos agora para a página raiz aqui e atualizar.
Bem-vindo à página inicial.
Obviamente, esse tipo de conteúdo uma única linha de texto é bastante chato.
O que podemos fazer para consertar um pouco é que podemos voltar aqui e fazer isso com um pouco de H-2A Mel.
Se quisermos gostar disso e depois podemos adicionar abaixo e H-2 que diz blá blá.
Bem desse jeito.
Aqui vamos nós.
E se salvar isso e reiniciar o servidor.
E então voltamos aqui e atualizamos.
HVM sendo renderizados para nós, mas isso ainda é incrivelmente doloroso para realmente digitar uma página inteira.
Obtemos álbuns
É tecnicamente possível, mas seria tão difícil.
Não é uma boa idéia.
Então, felizmente, há uma maneira mais fácil de escrever todos os nossos códigos em um arquivo separado o
tempo todo que queremos todos os C Ss e sim, todos os javascript de frente que queremos enviar de volta ao usuário
para que possamos usar um método chamado de renderização e esse método de renderização vive no objeto de resposta, seja lá o que
chamamos.
Em nosso caso revs, então o resto não seja processado.
E então nós damos um nome de um arquivo como página inicial ou ponto de origem envelheceu ele ou Dogstar envelheceu
para fora ou algo assim.
E é claro que precisamos ter esse arquivo criado e precisa ter algum conteúdo nele.
Mas mesmo antes de fazer isso, há um pequeno problema que vou me livrar desta linha
e o problema é quando usamos Express, não escrevemos arquivos simples.
Existem maneiras de fazer isso.
Isso requer um pouco mais de configuração, mas a maioria de nossos aplicativos da web não serão apenas arquivos estáticos padrão da Tim
que são enviados de volta.
O que estamos procurando são arquivos html dinâmicos que são chamados de modelos e na segunda
metade deste vídeo, vamos apresentá-los.
Mas por agora vou aqui e mudo isso para E. J. s e tudo o que vou dizer sobre E. J. é que isso representa
javascript embutido e que você vai aprender muito mais sobre isso em cerca de cinco
minutos quando o pedido for feito para cortar nosso código renderizará um arquivo chamado Dogstar.
Sim.
E vamos mudar para casa apenas porque isso faz mais sentido com a rota rota.
precisamos criar esse arquivo e na verdade não o criamos no mesmo diretório que realmente nós.
E então
O que precisamos fazer é criar um novo diretório chamado de visualizações e esse não é um nome arbitrário que é
um diretório que expressar vai procurar.
Então, sempre que renderizamos um arquivo, seja chamado de primeiro olhar no diretório de visualizações e
tente encontrar este arquivo exato dentro de um fusível.
Então, agora vamos criar isso.
Então, eu vou fazer uma tela de toque, abrindo a casa, que Ejay nós apenas assim.
E então, a próxima coisa que eu quero fazer é adicionar algum conteúdo.
Então, vamos abrir esse arquivo com o novo comando do C9 que o C-9 exibe na barra lateral.
E. J. Sim e vamos adicionar algumas coisas aqui.
Esta é a página inicial.
Vamos consertar isso.
E também vamos adicionar uma imagem e eu tenho uma imagem que eu gostaria de usar aqui.
Isso é chamado de "Palm Ski".
É um Pomeranian e uma mistura ronca.
Alegadamente, este é um Parsky crescido, que é bastante louco se isso for verdade.
Parece um cachorrinho miniaturizado ou apenas um filhote de cachorro ronco permanente.
De qualquer forma, vamos copiar este URL e voltar.
E é claro que você pode fazer qualquer imagem que você gostaria.
Você não tem que ir achar isso ou não é você, você é o próprio Ellaby e vai economizar.
E agora vamos fechar isso e devemos estar bem para ir.
Exceto por perder uma coisa e eu realmente vou deixar expressar, diga-nos o que estamos perdendo.
Receberemos uma mensagem de erro.
Então vou limpar isso apenas para fazer mais espaço para você.
E agora vou começar o servidor.
E quando vamos para a rota rota, ele chamará o método de renderização que procurará por casa.
Sim.
Dentro de um diretório chamado de visualizações.
E então, uma vez que descobrirá que ele irá levar o conteúdo
e enviá-lo de volta na resposta para que nós voltem ao nosso aplicativo e atualizemos e nós recebemos uma mensagem de erro aqui diz que não pode encontrar Montreuil.
E. J. Sim.
e o arquivo Ejaz.
E o que isso significa é que expressar está procurando por um pacote chamado Ejay nós que ele precisa usar para renderizar
Então, precisamos instalar o NPM para nós, e isso tudo terá sentido por que estamos usando o Ejaz em apenas alguns minutos.
Mas, por enquanto, confie em mim, o NPM instala o Ejay e nós faremos saltos do dash dash.
E uma vez que termina, podemos fazer o nó.
J. S. novamente e atualize a página agora e nós conseguimos que esta seja a página
inicial e nossos cachorros adoráveis ​​duraram o Tomsky completo.
Então, agora temos um arquivo de h t m l que escrevemos que agora estamos enviando de
volta ao usuário e que está sendo processado no navegador.
E isso é ótimo, mas isso ainda é extremamente limitado para aplicativos da web.
Isso só enviará a mesma
página exatamente a cada vez e na maioria dos aplicativos da web que não é o que queremos.
Talvez a página inicial seja a mesma ou a página de logon é a mesma.
Mas então, uma
vez que o usuário iniciou sessão, por exemplo, geralmente há uma mensagem que diz boas-vindas chamadas atrasadas ou bem-vindas.
Adorável parsky filhote de cachorro slash adulto.
Deixe-me mostrar o que quero dizer com um exemplo rápido.
Então vou voltar e adicionar uma nova rota e nossa rota vai ser algo como Slash.
Apaixone-se e depois uma coisa como Rustie e então também podemos nos apaixonar por um esqui de palma.
Acho que é assim que está escrito.
E queremos um arquivo HMO que nos mostre uma mensagem que contenha a variável da rota desse
parâmetro de caminho.
Então, diria algo como se você se apaixonasse por roubado, então, para fazer isso, você precisa definir ou obter uma queda do amor
da coisa Slash.
É o que chamaremos.
E então precisamos do nosso pedido e resposta dentro do retorno de chamada.
E, assim como
o último exercício, irá capturar algo que será algo da VAR igual a
solicitação de assunto Harams e, então, podemos começar com esse simples envio de pontos vermelhos, como fizemos com o exercício de fala de animais.
O porco diz oink.
A vaca diz que moo pode fazer o mesmo aqui.
Então, vamos apenas dizer que você se apaixonou por uma coisa mais.
Tudo bem.
Então, esta é uma revisão e se eu reiniciar o servidor agora e eu volto e agora vou acalmar-me
apaixonado
por Slash ske, você se apaixonou por Tomsky, o que não é exatamente gramaticalmente correto, mas, novamente, a palavra pomps também não é.
Então eu vou voltar e agora o que queremos fazer é descobrir como podemos enviar um H para ele, eu vou arquivar de volta que diz
que você se apaixonou por
mais e, então, algo que podemos começar criando o arquivo e nós Vou chamar esse
arquivo dentro do diretório de visualizações e chamá-lo do que quiser, é claro, mas vou apenas com amor E. J. A fim de mantê-lo curto e então vamos preencher isso.
Então, precisamos a barra de exibição do C-9.
Adoro isso.
Sim, temos isso aberto e vamos começar apenas adicionando você se apaixonou e então precisamos preencher
o espaço em branco.
Mas nós não sabemos o que colocar aqui ainda, então vamos deixá-lo assim e vamos colocar uma nota aqui que
diz P. S. Este é o amor que o Ejay nos registra apenas para que você saiba que está vindo do arquivo Ejaz.
Não é o redstart enviar que temos agora.
Na verdade, para se livrar disso.
Então, o que queremos fazer é que o arquivo assim lido não seja renderizado.
E o nome do arquivo é o amor que E. J. Sim, ele procurará automaticamente no diretório de visualizações que está certo.
Lá vamos nós temos dois arquivos, vamos começar o nó do servidor.
Sim irá reiniciar e atualizar.
ESTÁ BEM.
Então nosso arquivo está aqui.
Você se apaixonou e precisamos preencher o espaço em branco aqui.
com dados que retornam
de um banco de dados ou dados que um usuário forneceu onde não é um arquivo de matar estática.
E eu sei que este é um exemplo muito simples, que é o ponto em que eu não quero confundir com algo de louco ainda, mas esse tipo de lógica é realmente importante, onde podemos preencher um modelo
Isso é exatamente o mesmo toda vez.
Nós basicamente queremos adicionar variáveis ​​no HTL e é isso que cada Sim nos permite fazer.
Então E. J. S significa JavaScript embutido.
Ele nos permite incorporar variáveis ​​de código javascript se as instruções forem feitas dentro de H Timo.
Então, é como podemos fazer algo como.
Você se apaixonou
e, em seguida, aqui, isso não funcionará ainda, mas podemos colocar nossa variável chamada coisa, vamos apenas fazê-lo em todas as variáveis, variável.
Mas isso não funcionará porque
ele apenas tratará como HMO regular e ele apenas nos mostrará a variável de coisa da palavra.
Nós precisamos fazer algo para dizer a cada um
de nós que este é o código javascript que não lhe ensina, vou tratar isso como javascript.
Por sorte, só nos dá uma maneira de fazer isso.
É um pouco estranho quando você vê pela primeira vez.
Se parece com isso.
no suporte de abertura e tudo o que se passa entre esses dois suportes aqui será tratado como Javascript.
Então, temos nossos colchetes e, em seguida, sinais de porcentagem e, em seguida, sinal de igual
Então, eu vou mostrar-lhe o que
quero dizer, podemos usar apenas algo como cinco mais cinco que, no regular H M L, e eu vou fazer isso para lhe mostrar cinco mais cinco.
Sem estes parênteses Ejay Sim apenas imprimirão cinco
mais cinco, mas se o fizermos aqui, nós realmente receberemos 10 impressos.
Então, irei salvar este modelo sair ou iniciar o servidor
novamente nó após J us e atualizar a página e nós ficamos apaixonados por cinco mais cinco dez.
E entendi totalmente.
Se eu parar cinco dez é uma captura completa, tudo bem.
Então vamos voltar.
Então, não queremos que cinco mais cinco sejam impressos lá.
Mas nós realmente queremos é a variável coisa.
Nós chamaremos isso de coisa VAR ou simplesmente vamos fazer algo bem.
E isso precisa vir do nosso código aqui.
Então, o que precisamos fazer é passar essa coisa de valor para o nosso amor que E. J. como modelo e queremos imprimi-lo e, enquanto estivermos
aqui, também se livrar dos cinco mais cinco.
Então nós conseguimos que você se apaixonou e então precisamos definir a coisa longe e
você pode pensar que podemos fazer essa coisa de var.
Var é igual ao pedido da coisa slot.
E você pode estar esperando que o expresso envie automaticamente todas essas variáveis ​​de alguma forma para esse modelo.
E só sabe sobre a coisa var.
Infelizmente não é assim que funciona.
E eu vou mostrar-lhe que reiniciar o servidor Eu recebo uma mensagem de erro e ele me diz
que nada var não está definido.
Então, agora preciso voltar e definir a barra de coisas.
E a maneira como eu faço isso é realmente passar para o meu amado E. J. s template e eu faço isso na linha de renderização de pontos quando você o passa como
um objeto.
E nesse objeto eu posso colocar várias peças de dados que eu quero ter no meu modelo.
Então, ao invés de as coisas apenas chamar isso de coisa para
tornar isso mais claro e depois, eu vou passar dados e eu vou dizer no modelo que a coisa deve ser igual à coisa.
O que isso vai fazer é tirar o valor da coisa e mantê-la aqui.
Então, parece que uma coisa longe é igual a Rusty.
E então, aqui, a coisa var será substituída.
Tudo isso seria substituído por oxidado.
OK, então vamos deixar isso com isso.
Volte aqui e por que não começamos por codificá-lo como resti exatamente assim e
reiniciarei o servidor e atualizarei a página e eu fico apaixonado por Rusty.
Então, ao invés de fazer uma seqüência de caracteres,
o próximo passo é apenas voltar para o que tivemos, o que é a coisa variável de variável
e eu vou passar por isso sob a barra de coisa do nome e então nós renderizamos isso aqui.
E. J. marcou essa coisa de aparência vacilante.
Reinicie o servidor novamente volte.
Agora estou começando a se apaixonar por Parsky.
E se eu vou para você, você se apaixonou por Tater Tots, que também se reflete aqui.
Este é um conceito muito poderoso que usaremos.
Como eu disse e praticamente todos os aplicativos a
partir daqui, tendo essas páginas dinâmicas terem enxergado todas as respostas que podem mudar de acordo com o que
o usuário pediu em dados específicos na solicitação.
A outra coisa que vou mostrar é que este é apenas um Javascript regular.
Então, aqui, posso fazer coisas como maiúsculas e isso será executado primeiro e depois retornará algo que será
impresso como enferrujado.
Então, é apenas um javascript regular e conversaremos mais sobre o que deveria acontecer aqui e o que não deveria.
Porque existem algumas regras que você não quer desordenar seu envelhecido ele todo o seu modelo Ejaz
com toneladas e toneladas javascript.
Você quer mantê-lo no mínimo, mas por agora vou fazer isso e salvar.
E esta será a última coisa que fazemos.
Reinicie a atualização do servidor.
E agora recebo uma versão em maiúsculas.
Tudo bem, então, vamos recapitular tudo sobre o qual falamos.
Há uma série de perguntas nesta lição.
A primeira coisa é que podemos enviar o conteúdo de um arquivo usando o redstart render
como fizemos aqui e aqui e esses modelos precisam existir no diretório de visualizações, expressamente, parece lá.
A próxima coisa que falamos sobre o
Ejaz que representa javascript embutido e é o que nos permite ter modelos dinâmicos HDMI que mudarão dependendo de alguns dados que fornecemos.
Vimos que precisávamos fazer cada Sim e depois nosso arquivo fosse chamado de DOD Ejay Sim.
E então, também precisávamos executar a instalação do NPM para nós, e então a última coisa é que
podemos usar os brackets do Ejay nós que são muito estranhos primeiro para digitar.
Você provavelmente não está acostumado a usar esta parte do teclado, mas há colchetes onde o sinal de
porcentagem e um igual e, no outro lado, é apenas um sinal de porcentagem e tudo o que está
dentro é tratado como código JavaScript primeiro e depois
Qualquer que seja o código retornado é impresso no HMO e para passar dados.
Podemos passar um objeto na chamada de renderização de pontos vermelhos onde temos pares de valores-chave.
É apenas um objeto javascript regular.
E no modelo, temos acesso às variáveis ​​que definimos são as propriedades do objeto.
Neste caso, a coisa é igual a qualquer que seja o valor da coisa que muda sempre.
E aqui podemos usar a coisa.
OK, então eu sei que há muito nesse vídeo muito para digerir.
Teremos muita prática com estes conceitos em particular.
E. J. Sim e aquilo E. J. tem colchetes e depois passando dados para um modelo é
algo que faremos em todos os vídeos a partir daqui