Django Framework

VueJS e Django Framework #2: Como usar os dois juntos

12 de junho de 2017
VueJS e Django Framework: Como usar - parte #2

Nesta segunda parte da série VueJS e Django Framework: Como usar os dois juntos, nós faremos com que a nossa aplicação se torne um pouco mais interessante. Vamos incluir um Model e cadastrar algum conteúdo de exemplo. É um passo importante, pois o VueJS fará uso deste conteúdo, na parte final desta série. Para entender melhor os fundamentos da aplicação de exemplo que estamos criando nesta série, eu sugiro que leia a parte #1.

Criando um Model de exemplo

Vamos aproveitar que estamos em clima de E3 e criar um model chamado “Games”. Este model terá basicamente dois campos: Título e Plataformas. No título nós cadastraremos o nome do Game e no campo Plataforma, as plataformas suportadas pelo game em questão. Então, o arquivo homepage/models.py, vai ficar assim:

from __future__ import unicode_literals

from django.db import models

class Games(models.Model):
    titulo = models.CharField(max_length=255)
    plataformas = models.CharField(max_length=255)

Ok, o model foi criado. Mas agora nós precisamos fazer com que uma tabela seja criada no banco de dados, de forma que a gente possa cadastrar conteúdo nela, utilizando o nosso model. Neste artigo eu estou presumindo que você está utilizando o sqLite, cuja configuração já vem prontinha quando você inicia um novo projeto no Django. Para criar uma tabela no banco, a partir deste model, nós precisaremos seguir por duas etapas:

1 – Gerar um migration

Isto vai permitir que um arquivo seja criado dentro da pasta homepage/migrations. Quando eu rotei este comando, o Django criou este arquivo homepage/migrations/0001_initial.py, neste caso, indicando o primeiro migration criado na nossa aplicação. O comando que vai permitir gerar este migration é o:

python manage.py makemigrations

este comando varre o nosso projeto e gera os migrations baseado nos models criados em nossas aplicações dentro do projeto.

2 – rodar o comando migrate  para gerar a tabela no banco, com base no migration criado 0001_initial.py.

python manage.py migrate

Agora, a tabela está criada e nós precisaremos popular a estrutura com algum conteúdo fictício. Para isto, vamos utilizar o utilitário Shell, embutido no Django. Vamos iniciar o prompt assim:

python manage.py shell

Cadastrando o conteúdo de exemplo via model Games

Agora, precisamos importar o nosso Model, de modo que possamos cadastrar o conteúdo fictício:

>> from homepage.models import Games

# Cadastrando o conteúdo
>> game = Games(titulo="Uncharted 4", plataformas="Playstation 4")
>> game.save()

# Mais um
>> game = Games(titulo="Forza Horizon 3", plataformas="Windows 10")
>> game.save()

Agora já podemos fazer com que o Django exiba este conteúdo ao acessarmos o endereço http://127.0.0.1:8000. Para isto, precisaremos modificar um pouco o conteúdo da view index(), em homepage/views.py. O código desta view fica assim:

from django.shortcuts import render

from .models import Games

def index(request):
    games = Games.objects.all()
    return render(request, "homepage/index.html", { 'games': games })

Nós importamos o model, e rodamos o Games.objects.all(), para buscar o conteúdo no banco. Depois, passamos o valor da variável dentro de um context, para que seja renderizado na página e acessível por meio da variável games em homepage/index.html. O conteúdo deste arquivo, por sua vez, fica assim:

{% extends "layout.html" %}
{% block content %}

<table class="table">
  <thead>
    <th>Titulo</th>
    <th>Plataformas</th>
  </thead>
  <tbody>
    {% for game in games %}
      <tr>
        <td>{{ game.titulo }}</td>
        <td>{{ game.plataformas }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% endblock %}

Agora acesso o endereço http://127.0.0.1:800 e você verá uma tela assim:

 

Django e VueJS

Na parte #3 desta série nós veremos como integrar o VueJS ao nosso projeto e exibir o mesmo conteúdo que aparece na imagem acima, só que desta vez ele será renderizado a partir de um componente Single file do Vue.

 

Like
1

Veja também