Ou.
Bem vindo de volta.
Então, nesta lição, estamos focados em melhorar a usabilidade do nosso acampamento.
Agora, é um desastre até dar feedback ou mensagens de erro ou mensagens de sucesso para
nossos usuários.
E por desastre, eu apenas quero dizer que não existe.
Temos um registro de conselho que, obviamente, nossos usuários não podem ver.
Nós o vemos como desenvolvedores em nosso consul aqui, onde os servidores estão em execução, mas ninguém mais vê isso.
Então, vamos nos concentrar em adicionar algumas mensagens e eu vou mostrar o que isso parece em apenas
um momento.
Antes de fazer isso, temos três objetivos principais, vou falar sobre eles agora.
Então eu quero demo-lo.
Primeiro mostra-lhe o que esperar como ele vai ver como ele se comporta, então vamos instalar e
configurar um pacote chamado conectar flash.
Então, o que estamos fazendo é adicionar no Flash ou o flasher um flash de seus diferentes pronomes e as pessoas chamam
isso.
Em outros quadros, o flash hash.
As pessoas chamam de mensagens instantâneas, mas, basicamente, a idéia é que vamos mostrar uma mensagem para
um usuário, como logado com êxito ou desconectado com sucesso.
Ou talvez algo como você não tenha permissão para fazer isso.
Ou faça o login antes de adicionar um acampamento algo assim.
Queremos mostrá-lo a um usuário apenas uma vez e não queremos que ele seja um acessório permanente na página.
piscar neles uma vez e depois vai para a próxima página ou se o usuário atualiza
e, em seguida, a última coisa é adicionar nas nossas mensagens flash ao cabeçalho e adicionar algumas classes de bootstrap que irão estilo.
Queremos apenas
Então, há maneiras construídas de fazer coisas com o bootstrap.
Esta é uma característica tão comum de ter mensagens que são exibidas em seu usuário em todos os tipos de sites
que o bootstrap possui algum estilo construído para o que aproveitará.
Então vou começar mostrando o que será.
Então eu tenho corrida em campo.
Deixe-me bem. Vou mostrar-lhe se eu terminar de sair agora, então eu estou logado como freezer se eu sair, eu recebo uma
mensagem que diz que o loungy pode mudar esse texto da mensagem.
Obviamente, se eu tentar adicionar um novo acampamento agora quando não estiver logado, agora devo receber uma mensagem que diga que
você deve fazer o login para fazer isso.
E note que é lido aqui.
Então, essa é uma classe de bootstrap.
Este alerta que recebemos se eu estivesse fresco, a página desaparece.
Então, agora, se eu tentar e me inscrever, devo dizer que me inscrevo como resti que já existe.
Então não deveria ser capaz de fazer isso no passado.
A página apenas atualizaria.
Mas o que acabaremos é uma mensagem que diz que um usuário com um determinado nome de usuário já está registrado.
ESTÁ BEM.
Então, deixe-me inscrever-me como alguém novo.
Vamos tentar brigar.
Agora me movi aparentemente de vegetais para eletrodomésticos e recebi um sucesso de mensagem com
sucesso.
Prazer em conhecê-lo Bunder.
E se eu atualizar a página, ela vai embora.
Então, existem outros lugares em que temos essas mensagens, mas vou mostrar-lhe.
Por exemplo, se eu tentar e editar este acampamento que eu não possuo.
Tater tots possui isso.
Estou conectado neste liquidificador.
Eu não tenho um link para ir para Editar aqui, porque isso está escondido.
Mas, tecnicamente, eu ainda poderia ir para cortar nisso, onde agora recebo uma mensagem que diz que você não tem permissão
para fazer isso.
Isso me redireciona aqui.
Da mesma forma, com comentários, se eu houvesse um comentário aqui e fosse criado por outra pessoa.
Se eu manualmente fui para esse link e adicionei barra, então eu também veria uma mensagem, mas isso
é muito trabalho porque precisamos encontrar o ID.
E de qualquer forma, eu não quero entrar nisso agora, mas será o mesmo código que adicionamos, que dirá que
você não tem permissão para fazer isso.
E, finalmente, se eu sair e volto e tentei adicionar novos comentários, recebo a mesma mensagem.
Você deve fazer o login para fazer isso.
Assim como se eu tentasse criar um acampamento quando não o assinei.
ESTÁ BEM.
Então, esse é o objetivo final e, na verdade, é muito fácil para nós fazer isso funcionar.
Usando este pacote, poderíamos fazer isso sem um pacote, é claro, o que poderíamos fazer de alguma forma.
Quando abrimos a versão correta.
Então eu fiz uma nova versão para este v 11 em que eu estarei trabalhando dentro de.
Então vamos ver v. 11 e deixe-me limpar tudo e abrir sim.
ESTÁ BEM.
Então vamos trabalhar aqui.
Novamente, isso é V 11, caso você esteja seguindo.
A primeira coisa que eu vou fazer é mostrar o pacote que vamos usar.
Então, é chamado de flash Kinect.
Havia outros pacotes que faziam isso.
Se você der uma olhada no repo da casa, a documentação é um pouco ultrapassada.
Estamos usando o Express para o qual surgiu no início de 2015.
Os documentos falam sobre Express para apontar X e três pontos X para o próximo.
mesmas, embora, se você voltar para Connect flash, você verá que alguns dos primeiros links externos são expressos 4.
Então, estas instruções não são exatamente as 00 configurado com o flash K'NEX que já fiz exame
de um olhar ou você poderia sempre usar algo assim que esta tinha expressado para depois e você pode ver nós começamos o
mesmo link e há tutoriais aqui embaixo, há uma sobreposição de pilha sobre isso se Você quer dar
uma olhada.
Então eu fiz isso antes.
Algo que você tem que fazer muito quando você sabe que o código está sendo atualizado quando novas coisas estão saindo.
Especialmente com algo como Express 4. 0 onde as coisas mudam muito significativamente.
Muitas coisas que costumavam fazer parte da Express foram removidas de expressar como pacotes separados.
Alguns dos nomes e sintaxe mudaram.
Então eu sempre digo que é algo que você faz muito quando você está tentando
fazer algo que você ainda não fez no Express add no Express para suas pesquisas, muitas vezes você encontrará excelentes tutoriais para
isso.
Há dois anos que ainda são 90 por cento o mesmo, mas que 10 por cento é realmente importante que
você entenda como é diferente de você conhece há dois anos contra Express atual.
Tudo bem.
Então a primeira coisa que queremos fazer é instalar este pacote.
Então, ele se chama conectar flash.
Então, queremos que o NPM instale o dash dash, salve o plug-in do dash flash.
ESTÁ BEM.
Agora que isso é feito aqui, vamos apenas adicionar no Flash.
Vamos chamá-lo de flash em vez de conectar os equais de flash exigem ligar o flash dash.
Certifique-se de que temos uma vírgula lá, então o que precisamos fazer é dizer ao expresso dizer ao aplicativo que use o Flash.
Então nós levamos o conteúdo do K'NEX flash que o pacote e
salvo na variável do flash e precisamos executar esse aplicativo variável, use o flash assim.
Então, tecnicamente, isso é tudo o que precisamos fazer.
Agora, temos o Connect Flash instalado e, se voltarmos e vejamos os documentos, há alguma outra configuração
que eles fazem aqui com o analisador de cookies na sessão, mas nós realmente já temos esse
configurado onde já estamos fazendo o nosso.
Onde você precisa de sessão expressa e estamos configurando um segredo.
E então não precisamos nos preocupar com isso porque já configuramos nosso aplicativo para usar
a sessão Express.
OK então, o que faremos é em cada página que vamos mostrar o conteúdo do flash.
Vamos levar a mensagem que está lá.
Pode ser bom ou pode estar ruim, pode estar vazio e vamos mostrar isso no topo da página
e isso acontecerá no nosso arquivo de cabeçalho.
E. J. Sim,
teremos algum código que apenas exiba o erro ou a mensagem de sucesso e, em seguida, tudo o que faremos é quando
encontramos um erro ou um lugar em que queremos uma mensagem para que uma instância seja em vez de fazer acampamentos e Em
vez de nossos acampamentos, temos isso, iniciamos o Middleware onde você não pode adicionar um novo acampamento a menos que você esteja logado.
estar logado para fazer isso ou Faça login.
Se nós, se formos a esse middleware, e veremos que está logado, talvez possamos ter uma mensagem que diga que você precisa
Então esse código iria aqui.
Então, antes de redirecionar para barra acessar, vamos adicionar algo ao flash.
Então, isso parece exatamente isso, peça um ponto flash.
E então podemos dar uma chave.
Então, em um momento, vou te mostrar.
Vamos usar o sucesso e o
erro e vamos usar isso para determinar se a mensagem do alerta deve ser verde ou vermelha.
Então, essa parte não importa agora, mas essa parte importa onde vamos passar uma mensagem.
Então, podemos fazer algo como Faça o login primeiro.
Novamente, isso está dentro do log in Middleware.
Então, está verificando se a solicitação é autenticada se os usuários fizerem o login.
Então, continue com o que você estava fazendo antes.
Mas se esse não for o caso antes de redirecionar para reduzir o log in.
Sim, lembre-se se redirecionamos para barra acessar.
Sem essa linha, também continua.
Eu vou ter que abrir a rota, mas vai direto para o código e barra de logon que está aqui.
Então, ele faz o login antes de fazer isso, embora nós vamos executar este código flash.
E o que isso fará é basicamente pegar Por favor, faça o login primeiro e ele irá
adicioná-lo ao flash e ele não será exibido até a próxima coisa que vemos.
Então, neste caso, isso realmente não representa qualquer coisa que nos redireciona
para acessar o barraco e a maneira como funciona o Flash é realmente agradável, pois não é apenas que ele se deslize imediatamente imediatamente.
Isso funciona ou aparece na próxima página.
Então você realmente faz isso antes de redirecionar.
Então, neste caso, faça o login primeiro e, em seguida,
redirecionamos para reduzir o log e, em seguida, no log e no formulário, esperamos ver uma mensagem.
No entanto, agora não estamos mostrando isso.
Então, novamente, apenas para reiterar, apenas adicionar
esta linha não mostrará nada para nós, tudo o que isso faz é que nos dá a capacidade de nos dar uma maneira de acessar isso na próxima solicitação.
Então, não estamos piscando imediatamente, não estamos vendo nada, não estamos mostrando nada ao usuário.
Tudo isso faz é dizer no flash e, ao invés de sucesso, acho mais sensato chamar esse erro
no flash, por favor, faça o login primeiro para a próxima solicitação e então redirecionamos para acessar o barraque.
Então, nós temos que lidar com isso no logon, que é aqui mesmo, barra acessar.
Então eu poderia fazer algo como passar na mensagem.
E, claro, tudo que eu posso simplesmente mostrar que
você começa, então, se nós apenas tivermos mensagem, seja um erro, você acabou de enxergar, assim como
isso, poderíamos apenas exibir isso em nosso modelo, de modo que o log da barra é dentro do log de fusíveis.
Sim, apenas no topo, eu poderia ter um H-1 que exibisse mensagem assim.
Nada muito novo.
Então, vou mostrar o que isso parece agora.
Inicie o redirecionamento do servidor para redirecionar para barra acessar e recebo esta mensagem sempre que o erro for.
Você arruinou.
Como você pode ver o
que é esperançoso o que você esperava neste momento, porque eu codificá-lo duro em cada vez que entramos no login de barra, vemos que você estragou.
OK, então, usar o flash o que podemos
fazer é dizer que a mensagem é igual à solicitação de flash e podemos simplesmente fazer o erro no flash.
Então é um pouco confuso.
não deve haver um erro no flash.
Mas basicamente a idéia é agora se eu apenas atualizar a página reiniciar o servidor e atualizar
Então, na verdade, não vemos nada.
Mas então, se fizermos esse código
executar wups, este código aqui e a maneira como fazemos é tentar acessar algo em que devemos estar logados onde este middleware é
chamado, então o que acontecerá é que estamos adicionando isso ao flash em baixo O
erro de chave com o valor, por favor, faça o login primeiro e depois vamos acessar.
Então, dentro
do log de barra, estamos enviando sob a chave do pedido de mensagem o erro de flash que é um monte de coisas que precisam ser conectadas e é um pouco confuso novamente.
Mas deixe-me mostrar-lhe agora.
Então eu recomeço.
Na verdade, não precisava fazer isso desta vez, mas não vemos nada.
Agora, deixe-me ir aos acampamentos e tente adicionar um novo acampamento, embora eu não esteja logado.
E agora recebo essa mensagem que diz: Por favor, faça o login primeiro, que não
estava lá antes e se eu atualizar a página, ele vai embora.
Então, essa é uma versão muito simples do que podemos fazer usando o Flash.
isso com todas as diferentes mensagens e o estilo.
Então, antes de avançarmos no próximo vídeo para implementar
Vamos resumir como isso funciona de novo.
Então, sempre que quisermos exibir uma mensagem se
é uma mensagem de sucesso ou uma mensagem de erro, seja o que for, vamos usar essa linha aqui.
Solicite flash.
E então passamos uma chave e um valor e fazemos isso antes de redirecionar.
É realmente importante se eu coloquei essa linha depois de redirecionar.
Não vai funcionar.
Então, antes de redirecionar e, então, você ainda
tem que lidar com isso no modelo para lidar com isso e a rota tudo o que lhe dá é a capacidade de adicionar alguns dados antes de redirecionar.
Isso faz com que a próxima rota.
E esses dados não persistirão em cada solicitação para essa rota.
Então, é uma coisa única.
É por isso que se chama Flash.
ESTÁ BEM.
fazer isso.
Então, no próximo vídeo, eu vou mostrar-lhe como realmente implementar isso de verdade, onde não precisamos
Passar a mensagem para cada
modelo, onde podemos pensar em estilo, bem com o bootstrap, onde podemos ter mensagens vermelhas e verdes,
podemos ter cores diferentes, se quisermos colocar vermelho e verde, são os padrões.
ESTÁ BEM.
Então, esse é o próximo vídeo.
Veja o