OK, voltaremos para os próximos vídeos.
Vamos nos concentrar na criação do aplicativo de blog que mostrei no último vídeo.
E vai levar alguns vídeos.
Nós iremos uma rota por vez por causa da importância dessas rotas repousantes neste
primeiro vídeo.
Estaremos focados no índice e depois iremos em ordem.
Concentre-se em novos e crie e depois mostre editar e atualizar.
introduzir UI semântica, que é outro framework lá fora, semelhante ao bootstrap para CSSA e Javascript.
E, finalmente, um vídeo sobre destruir e, juntamente com a criação do aplicativo e a adição nas sete
rotas que mais precisamos, vamos
Então, novamente nos últimos eu mencionei Por que realmente eu simplesmente gosto de como parece.
Esse é um dos motivos, mas o mais importante, eu só quero expor você a outro quadro para
que você veja como são coisas semelhantes.
Você pode ser que você esteja pensando que é uma má idéia me mostrar uma outra estrutura para bombardeá-lo com
toda essa informação, mas a boa notícia é que as coisas são tão semelhantes.
começa a ver o quanto eles têm em comum e que é realmente mais que eles têm em comum do que eles diferentes.
Uma vez que você vê duas ou três, você
Então, semanticamente, por que, mas vamos começar criando nosso aplicativo.
Então eu estou dentro de um diretório chamado roteiro repousante.
Se você quiser seguir, há uma solução já existente.
Então, se você quiser fazer referência, sinta-se à vontade para fazer isso e se você não quer passar pela criação
do aplicativo se você não quiser cobrir o índice novo e criar porque já viu isso antes de poder
avançar .
Mas eu recomendo que você passe por todas as rotas comigo código ao longo.
É realmente importante que consigamos isso.
É realmente o pão e a manteiga de nossos aplicativos expressos.
ESTÁ BEM.
Então, vamos criar a nossa aplicação, vou chamar a aplicação de blog.
Na verdade, vamos chamar isso de aplicativo de blog reparador e, em seguida, CD e, em seguida, o nosso NPM favorito
e, na verdade, sim é o nosso ponto de entrada.
Ótimo.
Isso está ok.
ESTÁ BEM.
Agora, vamos instalar algumas coisas que precisamos para que o NPM seja instalado e o primeiro, claro, é expresso
e, em seguida, também adicionará mangustão.
E enquanto estivermos aqui, vamos fazer análise de corpo.
Então, esses três guias do painel saltam, lembre-se de que o analisador do corpo é como obtemos dados do formulário, o formulário envia dados para o corpo
do pedido e, em seguida, analisamos o corpo do pedido usando a pessoa do corpo.
Então, isso seria no próximo vídeo.
Por enquanto, estamos apenas fazendo o índice.
Então, temos essa configuração, vamos criar ou, na verdade, sim.
Agora abriremos aparelhos e fazemos o nosso topo padrão do arquivo
onde exigimos o expresso expresso exigido e, então, iremos fazer o aplicativo igual a Express e também adicionaremos no analisador de Vadi apenas
enquanto estivermos aqui porque precisamos do analisador Dasch do corpo.
E, finalmente, vamos fazer
mangustão e eu gosto de limpar isso.
Eu também gostaria de encomendá-los por comprimento.
Então, acabamos com partes do corpo ou primeiro se seguimos a minha convenção.
Mas não é tão importante, mas apenas diga que não, eu gosto de fazer isso.
As partes do corpo são as primeiras e, em seguida, a seguir temos mangustão e, em seguida, expressamos e depois em.
E isso é apenas para alinhá-los por comprimento e então podemos sangrar coisas se realmente quisermos, mas não
é o objetivo deste vídeo, então não vou gastar muito tempo fazendo isso.
OK, então nós fizemos isso agora.
Certifique-se de cada ponto e vírgula.
Em seguida, precisamos configurar mangustão.
Assim como o nosso modelo de blog.
Isso vai ser chamado de blog terá um título que terá uma imagem você Arel e então teremos que
chamaremos de corpo, que será o texto do blog o conteúdo dessa publicação.
Então imagem de título e corpo e eles são todas as cordas e também adicionar algo novo que você não
viu qual é uma data assim criada será uma data.
Então, chegou a isso.
E antes que possamos fazer isso, precisamos configurar o mangustão. Por isso, precisamos de nossa
conexão de mangustão e vamos nos conectar ao Mongo divi Cole e ao
barracão da barra barraquinha local, o nome do nosso aplicativo e nosso aplicativo será chamado de blog repousante.
E, novamente, isso não importa.
Estamos a criá-lo pela primeira vez.
Portanto, enquanto não mudarmos no futuro, ele sempre se conectará a uma caminhada relaxante pela primeira vez.
Ele irá criá-lo.
ESTÁ BEM.
E só assim não precisamos fazer isso mais tarde.
Mas configure nosso mecanismo de exibição de conjunto de dados para ser sim, o que também precisamos instalar.
fazer um aplicativo usar expressar o diretório estático e público para que possamos servir nossa folha de estilo personalizada.
E enquanto aguardamos isso, vamos
Quando chegarmos a isso apenas uma boa prática para fazer no início de qualquer aplicativo expresso e também adicionamos
um aplicativo, não use o analisador de corpo, o nosso analisador de corpo.
Você está todo codificado verdadeiro atendimento prolongado e tipo verdadeiro de um bocado, mas essas três linhas você pode simplesmente copiar
de aplicativos pré-existentes também.
Então, temos isso configurado, então, no fundo, apenas para garantir que o nosso aplicativo expresso esteja funcionando.
Vamos fazer a aula de exclusão onde temos o processo papai no processo portuário env dot IP e adicione no retorno de chamada
O servidor de log adulto do Conselho está em execução.
Tudo bem.
Vamos testá-lo.
Não há problemas.
Ótimo.
Então, vamos trabalhar no mangusto.
Então, temos um mangusto conectado.
Agora precisamos criar nosso esquema e nosso modelo.
Então, vamos começar com o esquema.
Vamos fazer um esquema de log variável igual a nova mangustão que esquema assim e ter o título que é
uma string uma imagem que é uma string um corpo que também é uma string.
E então estamos criando a nossa chamada de gotejamento de dados.
E o que podemos fazer é apenas dizer que isso não é conveniente porque teremos que especificar
manualmente a data.
Nós não queremos usar ou realmente digitar a data.
Nós só queríamos tomar a data atual quando este usuário criou a publicação ou criou o blog.
Basta pegar essa data para que possamos definir um valor padrão para algo novo.
Especificamos o tipo como data, mas também especificamos o ponto da data padrão.
Agora e isso funcionará bem para nós.
E isso diz que criado deve ser uma data e que há um valor padrão de dados agora.
Então, também podemos fazer o mesmo por imagem se quisermos ter uma imagem padrão.
Podemos fazer string de tipo e, em seguida, padrões se o usuário não inseriu uma imagem.
Poderíamos ter uma string como imagem de espaço reservado e peg ou algo assim, mas não vamos fazer isso, mas
podemos facilmente fazer isso se quiséssemos.
ESTÁ BEM.
E uma última nota aqui você verá isso sangrando, por vezes, assim.
É apenas um objeto, porque é curto.
Não vou fazer isso.
Isso ocupa muito espaço ou sim sim.
Vai ser confuso como está.
Então eu deixo isso assim.
OK título imagem corpo criado e, em seguida, o próximo passo.
Livrar-se disto por agora é compilá-lo nesse modelo.
Até agora, o blog é igual a mangostão com o modelo do log log log.
Aqui vamos nós.
Salve isso e vou adicionar um comentário aqui que apenas diz a configuração do modelo slash mangastão.
Aqui, vou adicionar mais um comentário aqui.
É chamado de configuração do aplicativo e, em seguida, adicionaremos um comentário aqui nas rotas.
Vamos chamá-lo de descanso para o Rex.
Então, é aqui que iremos agora e adicione nossa rota de índice ou mostra a rota nova crie as sete repetições.
E sim, este arquivo ficará um pouco confuso.
Novamente, eu sou um registro quebrado, mas vamos dividir isso em coisas separadas muito cedo.
Vou mostrar-lhe como podemos ter arquivos de um modelo de arquivos de vários modelos, como podemos ter
arquivos da rota e podemos ter arquivos para configuração e para middleware.
Muitas coisas diferentes, mas para mantê-lo simples.
No começo eu não quero confundi-lo ou acho difícil observar se alguém muda arquivos constantemente.
É difícil acompanhar.
Então, vamos fazê-lo em um único arquivo.
Mas lembre-se que isso não é necessariamente a melhor prática.
Se este fosse um aplicativo realmente grande e especialmente se tivéssemos muitos desenvolvedores trabalhando nisso.
Então, agora começamos os wraps de luta.
Então lembre-se de que estamos começando com índice de nomes de índice.
Esse caminho deve ser barras de blogs como um pedido de get e deve listar todos os blogs.
Então, vamos fazer isso agora antes de fazer isso, vamos nos certificar de que as coisas funcionam.
Se eu executar meu aplicativo sem problemas ainda.
E vamos fazer uma única criação de um blog, então temos algo a ser observado.
Então, seremos muito simples.
Este blog de revisão cria e, em seguida, queremos ter o título, basta chamá-lo de imagem de blog de teste e vou tirar uma
imagem deste site e splash dot com é um ótimo recurso.
Eu vou mostrar em um futuro vídeo que tem um monte de imagens gratuitas e gratuitas que você pode fazer o
que quiser.
E assim vai levar este de um cão e copiá-lo lá que pode ser realmente qualquer
um que você sabe, queremos ter algo a testar e então teremos nosso corpo e nosso corpo será apenas oi.
Esta é uma postagem no blog e nós criamos em branco.
Toda violação.
Então vamos tentar isso.
Nós não faremos qualquer coisa até a devolução de chamada, vamos apenas assumir que isso funciona e, em seguida, vamos testar
nos nossos contras Mongo. Então não vamos executar o arquivo.
Nada acontece ou parece que nada aconteceu.
Mas se você for para o Mangu e
nós usamos o registro total do restante, então chamamos isso apenas para verificar novamente e, então, nós fazemos os logs do D-B dot, descobrimos que temos nosso primeiro blog lá, o que é ótimo.
Então, essas duas coisas para nós.
suposto listar todos os blogs.
Isso prova que nosso modelo foi configurado corretamente, mas, uma vez que o índice está indo, queremos garantir que tenhamos algo a ver porque é
Se não temos blogs para ver que é
um pouco insatisfatório e não poderemos saber se isso funciona.
Então eu saio daqui.
Agora vamos nos concentrar em nossa rota.
Eu quero me livrar disso. Eu não
quero criar um novo blog todas as vezes que eu executo este aplicativo, especialmente o mesmo, uma e outra, embora esse cachorro seja realmente adorável.
O que queremos fazer é criar nossa rota de índice.
Mais uma vez, corte os blogs
à medida que você solicita que apenas parece ter logs de barramentos adicionados em nossa chamada de resposta de solicitação padrão e então vamos fazer um reinício de renderização e
o modelo que irá renderizar será chamado de ponto de índice Ejay nós e nós não fazemos Preciso que Ejay Sim ou apenas indexe.
E isso é novamente por causa desta linha aqui, não precisamos que o Ejay nós,
mas nós precisamos de um modelo chamado índice sendo um diretório chamado de visualizações.
Então, vamos fazer isso agora.
Faça visualizações de diretório toca as telas no índice de barras.
E fiz um pequeno erro que é indexado.
E. J. Sim.
Então,
para alguma prática mais ou remova esse arquivo, eu o removerei ou, pelo menos, uso o índice do Flash e, em seguida, recriá-lo.
Toque no ponto de índice de barras de uso.
E. J. Sim.
E então, abri-lo e vamos começar esta simples página de índice H-1 e salvar.
Então, vejamos que obtemos essa página de índice.
Agora, não está cumprindo a funcionalidade da página de índice.
Agora, se nós vamos para uma prévia que você pode obter de algumas maneiras que eu apenas vou
para Web Dev Bootcamp dot com dash aprender com código ponto C9 que você me ensina ou você pode ir para pré-visualizar aplicação de execução de visualização.
Ele irá abri-lo aqui, mas você pode clicar neste botão para vê-lo
em seu navegador ou você pode mantê-lo aqui se você preferir.
ESTÁ BEM.
Então, temos
um erro aqui e é porque não temos uma rota de rota, então precisamos de logs de barra e nós conseguimos nossa rota de página de índice.
da Reddit ou do Facebook.
É convencional para a página da rota a página inicial ir ao índice de algo que você pensa
Por exemplo, no reddit, você vai para a
página inicial e você vê um índice de todas as postagens do Reddit no Facebook, você vê um índice de todas as postagens e fotos e qualquer outra coisa.
Então, vamos fazer isso agora depois
de receber uma resposta da solicitação da função slash e nós faremos um redstart lido direto para cortar blogs.
Agora, para reiniciar, atualizamos.
Nada deve mudar.
Mas se eu for cortar eu acabei também em blogs cortados.
ESTÁ BEM.
Agora eu adicionaria a funcionalidade do índice.
Então, precisamos recuperar todos os blogs do banco de dados.
Então, esse será um blog para encontrar tudo e depois teremos nossa ligação de volta com um erro.
E, em seguida, os nossos dados que eu vou chamar de blogs
e então vamos fazer um erro F e isso é apenas para chegar a esse registro.
Mais uma vez, adicionaremos nosso índice de renderização do redstart, exceto que não queremos simplesmente mantê-lo assim.
Queremos renderizar índice com dados.
Então, nossos dados serão chamados
de blogs, bem como de blogs.
Então, estamos passando os dados que retornam do banco de dados do nosso Dopp, encontre o que for de volta.
Nós estamos enviando isso através do nome de blogs.
Sim, é um pouco confuso, mas isso é
realmente bastante convencional para ver onde eles têm exatamente o mesmo nome.
OK, então vamos ao modelo e adicione algum código.
Vamos dar uma olhada nos blogs para começar assim.
Certifique-se de que está chegando lá.
Recarregue a página.
E estamos recebendo nossa lista.
É um blog no momento, mas estamos vendo isso aqui.
Ótimo.
Então, agora vamos mostrar isso um pouco melhor.
Não faremos nada de louco, mas o
que faremos é encaminhar todos os blogs para blogs para cada registro de função e então precisamos disso aqui.
E, em seguida, aqui em baixo, precisamos de outras etiquetas, o suporte de fechamento a cada passo e, em seguida, precisamos de parênteses também.
E para cada um, vamos fazer um div dentro dessa div.
Vamos fazer um H 2.
E esse seria o título LUGG esse título.
Lembre-se de que precisamos do sinal de igual, mas não de cada um ou dos suportes.
Então, exibirá uma imagem e a fonte é igual aos suportes Ejaz.
A imagem do Lagat e eu esqueci de mencionar isso.
nós automaticamente porque dissemos isso como o valor padrão para que possamos exibir isso logo abaixo da imagem.
Se você der uma olhada na criação, pode ver que temos esta linda data da data aqui que foi criada para
Basta fazer uma extensão por agora que tenha criado o
Lagat e, claro, precisamos de nossa postagem no blog, que será um parágrafo que é o
corpo.
Tudo bem.
Um monte de conteúdo lá.
Atualize a página e você pode ver nossa primeira postagem de I está aqui.
Você só terá que confiar que isso está funcionando por enquanto.
Sim está nos mostrando um.
Tecnicamente, não sabemos se está
nos mostrando todos eles ainda porque só temos um do banco de dados no próximo vídeo.
Vamos trabalhar no novo e criar