30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Web Development
Code

Aprenda a Criar um Blog Usando Parse.js: Apagar, Sair e Visão de Blog Único

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Refactor
Get Started Building Your Blog With Parse.js: Comments

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

No artigo anterior, refatoramos o sistema de blog inteiro. Agora que tudo está ajeitado, estamos prontos para começar novas aventuras. Nesse artigo, trabalharemos mais o roteador e adicionaremos três novas funções ao sistema de blog: apagar, sair e visão de blog único.

1. Apagar

Na parte 6, cobrimos a função editar. É provável que também queiramos apagar alguma publicação. Há dois lugares para essa função: em BlogsAdminView ou enviá-lo para uma URL e lidar via Router.

Mostraremos via Roteador. É mais usado e deixar o código melhor estruturado.

Passo 1: Adicionar Padrão de URL

Como sempre, adicionemos um padrão de URL, primeiro:

Passo 2: Link para Apagar

Então, atualizemos o link na página admin:

Passo: Função del()

Agora, adicionemos a função del para o roteador lidar com ela. É bem simples: achemos a publicação usando o id passado e o apaguemos.

Tente desafiar-se e crie a função sem ver nosso código. Você já deve ter uma ideia do funcionamento do Parse.js.

Notemos o uso de .then() ao invés de passar um objeto, como fizemos anteriormente:

É uma forma fácil de adicionar callbacks no Parse.js, deixando o código mais limpo e legível. Em Parse.com temos a documentação completa sobre promises.

Testemos o sistema e chequemos a base de dados para ver se funciona.

Delete Alert

Parabéns, funciona!

Passo 4: Redirecionar de Volta para a Página Admin

Se estivermos atento à URL, veremos que após clicar na caixa de alerta, ela ainda é /del/ e a publicação apagada ainda está lá. Queremos enviar os usuários de volta à página inicil após a remoção e a página deve recarregar e refletir a mudança feita.

Podemos fazer isso usando um redirecionamento:

Notemos que, agora, invocamos navigate direto do roteador, podendo salvar o roteador como self e chamar self.navigate().

Passo 5: Verificar Login

Por fim, precisamos garantir que somos os únicos permitidos a apagar publicações. Vejamos a função login. Ela deve ser o mesmo que a função edit.

2. Logout

Como apagar, sair também deve ser lidada no roteador. E também começamos com um padrão de URL:

A função de sair em si é bem simples no Parse.js. Basta chamar Parse.User.logOut() E redirecionar para a página /login:

E por fim, adicionaremos um botão a #admin-tpl:

Logout Button

Como vemos, estilos não são o foco do tutorial. Mas somos livres para adicionar espaçamentos se quisermos.

3. Visão de Publicação

Agora continuemos com novas funcionalidades.

Até agora, mostramos a publicação toda na página inicial. Embora haja quem prefira isso, a maioria dos sistemas suportam a ideia de um sumário e se o visitante clica rno artigo, eles verão o conteúdo todo numa página separada, com uma possível área de comentários.

Mostraremos como criar a visualização de publicação hoje e na próxima focaremos na criação dos comentários.

Passo 1: Adicionar Coluna de Sumário

Primeiro, criemos uma coluna para o sumário na tabela Blog:

Add Summary Column

Passo 2: Incluir Sumário em WriteBlogView

Agora, adicionemo-na a Blog.update() . Podemos mudar a função para receber um objeto de dados que contém título, sumário e conteúdo, para não precisar memorizar a ordem das variáveis.

Agora um <textarea> para o sumário em #write-tpl:

E mudemos WriteBlogView.submit() equivalentemente:

Agora, como adicionamos uma nova variável ao modelo, precisamos dá-la um valor padrão "vazio" em WriteBlogView.render() :

E se usamos o plugin wysihtml5 para o conteúdo, perceberá que miramos todos elementos os <textarea>:

Adicionemos uma classe ao textarea do conteúdo e miremos apenas ele para o plugin wysihtml5.

Em #write-tpl:

Na função WriteBlogView.render() :

Agora funciona!

Summary In WriteBlogView

Passo 3: Mostrar Sumária na Página Inicial

Brinque com a nova página e adicione algumas publicações com sumário e mostre o sumário ao invés do conteúdo em #blogs-tpl:

Passo 4: Adicionar Página SingleBlogView

Paremos por 1 minuto e pense como criaríamos a página /blog/:id para mostrar o conteúdo de cada publicação e tentemos sozinhos. Somos capazes de fazê-los sozinhos já!

Mas, para esse tutorial, teremos um pequeno guia:

Adicionemos um novo modelo HTML:

Criemos uma nova classe BlogView que recebe um objeto blog e o renderiza em #blog-tpl:

Adicionemos um novo padrão URL em BlogRouter:

E em BlogRouter.blog() busquemos o blog pelo id, renderizemos uma blogView e coloquemos em $container.

Por fim, atualizemos o link em #blogs-tpl:

Testemos:

blogView

Pontos extras se fizeram tudo sozinhos!

Conclusão

Nesse artigo, construimos muito: uma função de apagar, uma de sair e outro tipo de página. Se tem acompanhado essa série, é provável que já tenha um bom entendimento do que é uma base de dados, modelo, visão e roteador funcionando juntos. Esperamos que já esteja curtindo criar um projeto com Parse.js. Deixe seu comentário para sabermos se é útil ou não.

Nessa página de publicação criada hoje, criaremo uma área para comentário no próximo artigo. Será bem legal. Fique de olho!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.