Bem-vindo ao nosso último vídeo neste blog.
Então, temos que mudar.
Nós vamos fazer.
O primeiro é implementar o desinfetante Express que mencionei, o que nos ajudará com esse problema, em
que, se, ao exibir o HDMI Olafur realmente o tornando um usuário, poderia entrar com algum javascript prejudicial
ao invés de um script hack.
Nós não queremos executar esse código para que usemos o sanitizador para nos ajudar com isso, basicamente, adquire essa contribuição e ele
remove todos os scripts e simplesmente nos dá o par envelhecer.
E então também queremos estilo a página de índice um pouco.
Parece um pouco difícil e a última coisa será fazer uma pequena atualização para uma mesa de Rhodes
reparadora, apenas para torná-la um pouco mais útil para você.
Então, vamos começar com o sanitizador.
Então eu vou instalar um pacote chamado Express dash sanitiser dash dash.
Salve .
ESTÁ BEM.
sim, vamos exigir que os equacionadores de expressos mais expressos exigem o desinfectante expresso Ex. Assim.
Agora que isso é feito no nosso aplicativo,
E então temos que dizer ao nosso aplicativo para usá-lo usar o desinfetante Express e o único requisito é
que isso vá após todo o analisador.
Defina aqui.
ESTÁ BEM.
E é isso.
Agora, para usá-lo, você quer fazê-lo para começar em vez de ser criado quando você cria um novo blog.
Então, é realmente criar uma atualização.
São os dois lugares onde estamos levando dados e salvando no banco de dados.
Ambas as vezes você quer se certificar de desinfetar a entrada e ao invés de criar o que queremos desinfetar é pedido até
o corpo até o log do corpo, que é um tipo de lembrete, lembre-se de solicitar o corpo é o que quer que
venha de um formulário qualquer que seja o dado no pedido corpo que, em nosso caso, vem de uma forma,
o blog é devido a esta linha aqui.
Imagem do blog do título do blog e descubra finalmente o corpo do blog.
E este é o que nos interessa.
Então, temos que fazer o blog dot body.
Então é um longo nome longo aqui, mas solicite corpo até o corpo de temperatura do blog.
E vamos mudá-lo para que seja igual a solicitar que desinfecte e vamos
desinfetar tudo isso.
Então, estamos levando o que é atualmente igual a desinfetá-lo e, em seguida, mudar o pedido inteiro de
um corpo de despejo de corpo para igualar isso.
Então, deixe-me deixar claro para você, vamos fazer um blog constable.
Solicite esse corpo antes e depois.
Bem desse jeito.
E deixe-me adicionar algo para torná-lo um pouco mais fácil de ver.
Ótimo.
ESTÁ BEM.
Então vamos dar uma chance agora.
Inicie o
servidor novamente na página.
Teremos que criar uma nova postagem.
que queremos usar ou entrar e, em seguida, algo ruim que será apenas um alerta novamente.
Vamos fazer uma imagem aleatória apenas chamada Demo e vamos adicionar algum bom HMO
Aqui vamos nós.
Então, se isso funcionar, devemos ver isso antes e ambos e o depois só tem isso.
Vejamos o que aconteceu.
Perfeito.
Você pode ver a primeira vez que o corpo é igual a isso.
Ou nós tivemos nossa tag de script lá a segunda vez.
O corpo só tem o H-1.
Então, é tudo o que temos a fazer para desinfetar algo.
E se mostramos agora, nós fomos para a nossa nova publicação, que eles acreditam ser essa.
Aqui, damos uma olhada.
Estamos exibindo a questão, mas não há nenhuma tag de script.
Então isso funciona muito bem.
A última coisa que eles querem fazer é executar o mesmo código, mas fazê-lo em vez da atualização.
Estamos lá antes de atualizar solicitação no blog.
Bem, fez o mesmo.
Um menor número.
Este seria um bom caso de uso para o que é conhecido como um middleware sobre
o qual ainda não falamos, mas é algo que estamos repetindo duas vezes em duas rotas diferentes.
O que podemos fazer é escrever um middleware que executará este código antes destas duas rotas, mas vamos cobrir
o middleware.
Mais tarde neste curso em direção ao final de EXPRESS Então, estamos deixando como é por enquanto.
E isso funciona bem.
Isso irá sanitizá-lo tanto quando você atualizar alguém criando o próximo.
Vamos focar ou indexar isso. J. Sim.
Então precisa de um pouco de trabalho.
Parece isso agora.
Comecemos por excluir algumas coisas.
E essa foi uma das postagens que eu criei antes de adicionar o sanitizador.
I Para excluir alguns desses que não possuem imagens apenas
para que acabemos com algo mais fácil de usar, onde podemos realmente ver as imagens.
muito do código que já usamos.
OK, então, temos o que queremos fazer é centrá-los para começar e eu vou usar
Então, em vez de
nosso índice, temos um cabeçalho que é bom, mas então vamos colocar tudo dentro de um div
e esta div terá classe igual ao contêiner de texto principal do UI, que é o que nos dá esse recipiente centrado.
E então, dentro, teremos a nossa div.
E isso é basicamente reciclado a partir da
última pequena linha no último pouco que escrevemos para os formulários e para a página de exibição.
Então, a classe é igual a seu enorme cabeçalho e então vamos colocar um conjunto de páginas de índice.
Vamos simplesmente descansar para um blog.
Bem desse jeito.
E então, quando o fizemos bem, adicionei outra div.
Este terá o nosso segmento dentro dele, que dá este segmento
em cima do UI em anexo, que dá apenas essa pequena linha na caixa e, em seguida, dentro de lá vai estar fazendo um loop.
é um div com a classe UI itens divididos e, em
seguida, para cada item que entramos dentro de você, eu dividi itens e obtivemos um divisor automático entre
eles.
E nós estabelecemos uma linha mais antes mesmo de chegar ao loop que
Então, vamos copiar esse código para isso, você é itens divididos.
O que precisamos fazer algumas mudanças.
O primeiro é apenas dívida, mas não vamos apenas imprimir isso dentro.
Nós vamos criar uma classe div igual ao item e,
em seguida, dentro do item, temos a nossa imagem primeiro e a imagem irá em vez de uma div com
classe igual à imagem e vamos colocar isso lá fora e isso ajudará a restringir a tamanho da imagem,
então não conseguimos essas imagens gigantescas mais na tela inteira.
OK, então a imagem colocou a imagem dentro, então precisa de outra classe div igual ao conteúdo.
E é aqui que vou colocar algumas coisas.
O primeiro é o título e, ao invés de
fazer um H-2 com um título na verdade e fazer uma marca de âncora e / ou a marca de âncora terá uma
classe igual a Hetter, mas também terá uma referência igual à página de exibição que e Riskin uma cópia que Você está aqui da mesma forma que você já possui.
Então, leia mais link, então, porque estamos fazendo isso para que possamos terminar com nosso cabeçalho
para cada blog, posso clicar nisso para ir à página do show ou clicar em ler mais.
Vamos ter certeza de que temos um pequeno erro de sintaxe.
Nós estamos perdendo nossa citação de encerramento aqui para Atra flops.
ESTÁ BEM.
Atra é a página de exibição e depois dentro dos colchetes temos um título de blog.
É uma espécie de bagunça.
Então, depois disso, adicionaremos uma div
com classe igual a Metta, que é apenas um lugar para colocar informações sobre esse item em particular que, em nosso caso, será apenas um período com a data que já temos.
Mas também vou formatar esta data, então blog dot criado para a cadeia de data que já vimos na página
de exibição e então fechamos a vida lá, então teremos uma classe div igual à descrição.
E é aí que vamos colocar esse conteúdo.
O corpo real do blog.
E, ao invés de fazer o mesmo sinal, eu o transformarei em
um traço ou não o alterarei, mas nós o mudaremos para um dasht para que possamos ter a idade atual do nosso conteúdo agora sanitizado.
Por fim, eu diviso um clássico para extra e, em vez disso,
colocarei o botão para ler mais e farei uma marca de âncora e eu vou copiar uma tag que já temos e mudá-la um pouco.
Então, não precisamos do clássico para encabeçar mais, mas nós queremos, em vez disso, é um botão grande.
Então eu flutuava basicamente.
Escolha sua cor de fazer Violet novamente.
E podemos fazer isso um pouco.
Definitivamente, é muito para ver.
Então, vamos colocar isso, vamos colocar isso um pouco.
Então, depois da abertura aqui, defina a
marca de âncora, teremos lido mais e adicionaremos um ícone de chevron que será apenas uma pequena flecha depois de ler mais.
OK maratona lá.
Muitas coisas que adicionamos em.
Certifique-se de que tudo
está bem e definitivamente, apenas dê uma olhada no código da solução se você não quiser tirar isso do zero.
Vamos ver como está procurando por você não tem erros de sintaxe.
Isso ou vamos exatamente o que estamos procurando.
Então, estamos truncando os primeiros 100 caracteres naquele ou tantos personagens como existem nesta publicação.
Nesse caso, clique rapidamente em mais informações sobre o link que nos leva à página do show.
Podemos editar, volte.
Nós temos suas imagens aqui.
Depois de linhas
divididas, temos o nosso Hetter, temos esse segmento em torno de tudo e acabamos praticamente.
Então, novamente, não sintamos que definitivamente não sentimos que você tenha que saber todas essas classes.
Eu simplesmente fiz.
Você sabe que os deu a você.
Estilo de fogo rápido.
Porque um ponto não é que você aprenda tudo isso.
Mas se você quiser saber mais e ir para Dashi semântico, por que dotcom.
Há muitos bons tutoriais e recursos.
Ainda não é tão utilizado como bootstrap, mas definitivamente está crescendo.
Tenho notado que muitos dos meus alunos encontrariam isso sozinhos.
Considerando que, no passado, gostaria de apresentá-los depois do bluechis
na maioria das duas aulas mais recentes que eu ensinei aos alunos, muito rapidamente se apaixonaram por
isso sem que eu nunca mostrasse isso para eles e acabaram por usá-lo no bootstrap.
A maioria dos estudantes, mas totalmente para você.
Eu gostei de ambos e o bootstrap é definitivamente mais popular por enquanto.
Ok, então a última coisa que mencionei é que refatoremos nossa tabela apenas um pouco.
E tudo o que eu quero fazer é adicionar uma coluna
final para o método de mangusto que corresponde a cada um desses.
Então, procure por id encontrar por 80 uma atualização encontrada por id add remove e assim por diante.
Eu vou ser uma revisão rápida de como as tabelas funcionam.
Então, aqui está um gráfico que envelhece
o montante que precisamos adicionar em outro e chamaremos esse método de mangustão e vamos abrir a pré-visualização de uma amostra de culinária e movê-la para o fundo aqui.
Há nossa mesa ou novo th.
E, em seguida, para o índice, vamos adicionar uma TV no método de mangusto lá para que o cão deve encontrar cachorro.
Ai está.
Em seguida, temos um novo que na verdade não tem um método monkish.
Então, em vez de deixá-lo em branco, vou colocar um arquivo que ele faz é renderizar um formulário.
Em seguida, criamos e criamos vamos criar um cachorro.
E uma característica muito legal se você fizer essa visualização de vida é como uma edição MIDI, veio
perceber que isso me mostra quando eu estou selecionando aqui o que é muito legal.
Então, você nem precisa abrir o inspetor e ver apenas ao vivo.
E se eles mudam as coisas que atualizam ao vivo também, sem ter que salvar ou atualizar a página.
ESTÁ BEM.
Então, temos um show que faz um cachorro que encontra por identificação, então nós o temos.
O que também faz um cão ser multado por ID.
Nós temos que encontrar o cachorro que estamos
editando e isso é para o formulário e, em seguida, atualiza um cachorro que foi triado por id e atualiza um longo.
E ele também é um cão um pouco longo, achado por id e remove todos os rumos.
Vamos dar uma olhada.
Aqui está a nossa mesa.
Parece que eu excluiu acidentalmente um
dos CDs aqui, o que é suposto para exibir o que a atualização faz para atualizar, é suposto atualizar o cachorrinho do cachorro do cão, então redirecionar em algum lugar.
Tudo bem.
Agora devemos voltar ao normal.
Aqui está a nossa mesa.
Então, o único que não possui nenhum método de mangusto.
Vai ser novo porque o novo não está encontrando nada no banco de dados, não está adicionando nada.
Isso apenas nos torna um formulário.
Ótimo.
Então, espero que isso seja útil para você no futuro pode se referir a esta tabela.
Eu vou me referir a ele certamente cobre uma
grande quantidade de informações importantes que vamos usar muito.
Tudo bem.
Então, terminamos isso agora, conseguimos avançar para algumas coisas mais divertidas, algumas aplicações mais complicadas.
Eu notei que havia um pouco de América coberto muito.
É sempre difícil de fazer.
Interessante porque apenas uma grande quantidade de informações.
Mas, mas é importante que
essa credibilidade seja capaz de criar atualizações de leitura e excluir uma entidade que leva muitos envoltórios.
Tudo bem.
Eu o vejo no próximo ano.