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: Roteador

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: Add a New Blog
Get Started Building Your Blog With Parse.js: Edit

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

Final product image
What You'll Be Creating

Na sessão anterior, construimos a função "Adicionar nova blog" e os usuários podem publicar coisas no sistema. Uma extensão natural seria permitir os usuários alterarem e apagarem blogs existentes. Hoje, construiremos essas funções, criando uma listagem de publicações na página administrativa e adicionando um roteador (se não sabe o que é um roteador, essa sessão é para você).

1. Criando e Renderizando BlogsAdminView

Passo 1: Modelo HTML

Como sempre, começamos adicionando um modelo HTML a admin.html. Você já deve estar acostumado—muito parecido ao #blogs-tpl no index.html. A únic diferença é que criamos uma tabela, dessa vez:

Passo 2: Criar a Classe BlogsAdminView

De forma similar, criemos BlogsAdminView em admin.js. Se não estiver familiarizado, recomendamos ver as publicações anteriores.

Passo 3: Renderizar BlogsAdminView

Para ver a lista, precisamos renderizá-la. Por hora, adicionemo-na à função render() em WelcomeView:

Verifiquemos a página admin e veremos a lista abaixo do botão Adicionar um Novo Blog.

BlogsAdminView

2. Roteador

Se estiver acompanhando, esperamos que esteja confortável escrevendo e lendo de uma base de dados. Também já deve achar fácil criar e renderizar visões para apresentados dados. Contudo, pode achar que tenha muitas View.render() aqui e acolá, e elas tem deixado o código difícil de ler e manter. Também esteja achando ruim ver admin.html na URL.

Pensando na função de edição que criaremos, podemos contruí-la usando eventos e passando a publicação que queremos editar como objeto e rerenderizando-a. Mas não seria legal se pudéssemos ter algo como http://AnExampleDomain.net/edit/id? A ideia de um roteador ajudará nisso. É uma forma de mapear funções e URLs.

Passo 1: Adicionar a Estrutura do Roteador

Para ajudar a mostrar o conceito, que criemos direto um novo roteador em admin.js:

Como podemos ver é fácil mapear padrões de URL em funções em um roteador e iniciá-lo. Agora, se um usuário visitar /admin, ela ativará a função admin().

Notemos que podemos até receber parâmetros na URL, adicionando dois pontos antes do nome da váriável, como edit/:url, no código acima.

Agora, reorganizemos nosso código atual com o roteador.

Passo 2: Página /login

A página masi fácil é a /login. Apenas movamos o código de renderização para a função login():

Passo 3: Página /admin

Agora, escrevamos a função para a página /admin. Antes, quando usuários visitavam /admin.html, enviávamo-nos para a tela de login por padrão. E se tivesse credenciais corretas, enviariamo-nos à tela de boas vindas. A função de renderização para WelcomeView estava na callback de sucesso. Não é a melhor maneira de organizar o código nem conveniente para o usuário.

Então, apenas chequemos na página /admin. Se estiverem com as credencias, mostramos a página de boas vindas, se não, redirecionamos para /login.

Como podemos ver no código, usamos a função blogRouter.navigate() para redirecioná-los para a página /login. Similarmente, mudemos a função de renderização na visão de /login para blogRouter.navigate() também:

Lembremo-nos de remover as funções de renderização antigas do código anterior.

Passo 4: Testar e Usar Navegação Padrão como Solução Temporária

Testemos as duas funções. Testando e... nada! Isso porque precisamos direcionar para /admin no inicio. Admin.html por si só não casa qualquer padrão de URL configurado no roteador.

Adicionemos uma navegação padrão na função start() para quando o roteador iniciar, automaticamente leve o usuário para a página /admin:

Agora, se testarmos, tudo deve correr bem:

Router

Notemos que ainda não podemos visitar /admin e /login. E se usarmos um subdiretório para o projeto, também percebamos que somos redirecionados de http://localhost/directory/admin.html para http://localhost/admin, o que é estranho. Cobriremos e resolveremos esse problemas em outros artigos. Hoje, o objetivo é entender como um roteador funcionar quando iniciar e preparar o código.

Passo 5: Página /add

Continuando, é hora de mover a renderização da página "Adicionar um Novo Blog" de WelcomeView para o roteador.

Agora, podemos reescrever o evento na WelcomeView para apenas ativar a navegação:

Agora, verifiquemos tudo para ver se funciona.

add Page

Conclusão

Nesse artigo, criamos outra visão de listagem de publicações no painel admnistrativo e aprendemos do conceito importante de roteamento. Esperamos que já pareça natural criar e renderizar visões com Parse.js E começamos a ver como um roteador pode ajudar-nos a organizar e reusar nosso código.

Não vimos muitos detalhes do mecanismo do roteador, como entender porque temos {trigger: true}. Como dito antes, o propósito desse tutorial é mostrar-nos como fazer as coisas funcionar. Mas se tiver interesse em aprender mais, veja a documentação. Também combriremos mais sobre roteamento nas próximas partes da série.

No próximo artigo, criaremos a página /edit e colocaremos o roteador em uso de verdade. Esperamos que esteja ansioso! Logo colocaremos tudo junto, então fique ligado!

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.