-2

Estou começando a trabalhar com Django e estou iniciando um teste para solidificar o que venho aprendendo. A ideia é uma página única, que exiba uma frase assim que o site for aberto. Abaixo da frase, há um botão que eu gostaria de mudar a frase para alguma outra frase vinda de uma variável declarada em models.py e que contém várias frases que foram registradas através do painel de administração do Django.

Este é meu arquivo models.py:

from django.db import models


class Base(models.Model):
    criado = models.DateField('Criado', auto_now_add=True)
    modificado = models.DateField('Atualização', auto_now=True)
    ativo = models.BooleanField('Ativo', default=True)

    class Meta:
        abstract = True


class Frase(Base):
    frase = models.CharField('Frase', max_length=100)
    dica = models.CharField('Dica', max_length=200, default='-')

    class Meta:
        verbose_name = 'Frase'
        verbose_name_plural = 'Frases'

    def __str__(self):
        return self.frase

Este é meu arquivo views.py:

from django.views.generic import TemplateView
from .models import Frase


class IndexView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        context['frases'] = Frase.objects.order_by('?').all()

        return context

Este é meu index.html:

            <div class="container px-4 px-lg-5 h-100">
                <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-8 align-self-end">
                        <h1 class="text-white font-weight-bold" id="frase">{{ frases|first }}</h1>
                        <hr class="divider" />
                    </div>
                    <div class="col-lg-8 align-self-baseline">
                        <a class="btn btn-primary btn-xl" onclick="nova_frase()">Nova frase</a>
                    </div>
                </div>
            </div>
     (...) <!--rest of the html code-->
        
         <script type="text/javascript">
            function nova_frase() {
                document.getElementById('frase').innerText = '{{ frases|random }}';
            }
        </script>

Estou tendo dificuldades para encontrar textos para fazer esta tarefa (clique no botão e altere a frase que está sendo exibida por outra frase proveniente da variável definida em models.py, sem que seja preciso atualizar a página).

Estou usando Python 3.9.5 e Django 3.2.5.

Se alguém puder me ajudar, ficaria muito grato.

1 Resposta 1

-1

Quando você envia o contexto para o front-end do Django, isso acontece apenas uma vez. Para você pegar todas as frases, você poderia fazer um loop no template e colocar cada frase num elemento html (div, p, ou outra coisa que você queira), e esses elementos podem ser criados como display none com uma classe css comum a todos, e serem administrados pelo javascript.

No html:

{% for frase in frases %}
<p class='hide'>{{ frase }}</p>
{% endfor %}

No JS:

let button = document.getElementById('seu-botao')//pega o botão e adiciona um listener de click
button.addEventListener('click',function(){
    let fraseAtual = document.getElementsByClassName('show')[0]//Pega frase atual
    fraseAtual.classList.remove('show') // Limpa a frase atual, para iniciar um novo sorteio
    fraseAtual.classList.add('hide') // Limpa a frase atual, para iniciar um novo sorteio
    let frases = document.getElementsByClassName('hide');//Pega todas as frases invisíveis, como são várias, o retorno é semelhante a um array.
    let sorteio = Math.floor(Math.random() * frases.length);//Sorteia um index do "array"
    let frase_visivel = frases[sorteio].classList.remove('hide')// Pega a frase do index sorteado e remove a classe css invisível
    frase_visivel.classList.add('show')//Adiciona classe visível.
  
})

No css:

.hide{
  display:none;
}
.show{
  display:block;
}

Vamos revisar o que ocorreu em cada linha do listener:

(Vou pular as duas primeiras para explicar depois.)

let frases = document.getElementsByClassName('hide')

Aqui pegamos todas as frases pela classe css comum a todas. O retorno é quase como um array, então cada elemento pode ser retornado chamando o index.

let sorteio = Math.floor(Math.random() * frases.length)

Para sortear um index, usamos o random. Aqui ele retornará um número entre 0 e o tamanho da lista menos 1.

let frase_visivel = frases[sorteio].classList.remove('hide')
frase_visivel.classList.add('show')

Aqui pegamos o index sorteado e resgatamos nossa frase, removendo a classe invisível e adicionando a classe visível.

Agora, voltando ao início, nessas duas linhas, estamos apenas preparando o código para limpar nosso Dom, e permitir que haja um outro sorteio com todas as frases, e evitando que as frases se acumulem na tela.

let fraseAtual=document.getElementsByClassName('show'[0].classList.remove('show')
fraseAtual.classList.add('hide')

Para finalizar deixo aqui 3 sugestões:

  1. Você pode, ao invés de fazer isso acima, usar AJAX, para dar dinâmica à página, você pode ver um pouco mais sobre ajax nessa questão do stackoverflow.

  2. Caso preferir, ao invés de remover e adicionar classes, você pode simplesmente trocar, com o próprio classList, caso não conheça o classList leia essa documentação.

  3. Para trabalhar com aleatóriedade no javascript você pode tentar usar esse pequeno módulo, feito por mim. Se quiser contribuir também, fique à vontade.

4
  • Muito obrigado! Eu já vinha a um tempo sem saber como fazer isto, sem ter que interromper meu curso de Django na metade para poder estudar Javascript e afins. E o fato de não achar respostas que me ajudasse, e nenhuma resposta aqui estava me desanimando bastante. Precisei fazer pequenas alterações no código enviado por você, por estar usando o Bootstrap. Ao invés de criar a classe hide e show, usei d-none e d-block para alterar a exibição das frases. Também não consegui fazer let fraseAtual = document.getElementsByClassName('show')[0].classList.remove('show') fazer funcionar. + Commented 2/08/2021 às 22:39
  • Precisei "quebrar" em duas linhas. Primeiro: let frase_atual = document.getElementsByClassName('d-block')[0] E na linha seguinte: frase_atual.classList.remove('d-block') Deixando tudo em apenas uma linha, eu tinha o seguinte erro: Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLAnchorElement.<anonymous>. Depois de um tempo pensando sobre, e reescrevendo o código, achei a solução da divisão em duas linhas de código. Gostaria de perguntar sobre desempenho, caso haja muitas frases (umas 1000, por exemplo). Essa solução deixaria a página "pesada"? Commented 2/08/2021 às 22:43
  • Cara, eu não sei se isso é exatamente prejudicial, mas mesmo sendo algo nativo do Django, carregar MUITA coisa pode ser complicado. Procure sobre AJAX, como falei na resposta. Isso pode evitar que sua página tenha que carregar todas as frases de um vez. Vou ajustar a resposta. Commented 3/08/2021 às 11:09
  • Entendi, @Rubens . Eu realmente vou procurar sobre AJAX para otimizar isso. Mas por hora, essa solução me permitiu concluir esse pequeno projeto e agora posso continuar o restante do curso. Mas novamente, muito obrigado por ter se disponibilizado a ajudar. Inclusive, vi o módulo que tu criou e achei massa demais! Espero usar em outros projetos. Abraços. Se quiser ver o projeto que construí, ele está no Heroku em: link Commented 3/08/2021 às 12:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .