3

Montei uma API Flask conectada a uma banco de dados MySQL, o qual tem suas entradas exibidas em uma página HTML.

player_manager.py:

from flask import Flask
from flask import render_template
from flask import request
from flask import redirect
from flask_sqlalchemy import SQLAlchemy


app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = 'mysql+pymysql://xre:sdhjsdhsj2562@localhost:3306/team'

db = SQLAlchemy(app)

@app.route("/", methods=["GET"])
def get():
    try:
        players = Player.query.all()
    except Exception as e:
            print("Failed")
            print(e)
    return render_template("home.html", players=players)

@app.route("/", methods=["POST"])
def post():
    player = Player(
        nome=request.args.get("nome"), 
        posicao=request.args.get("posicao"),
        numero=request.args.get("numero"),
        gols=request.args.get("gols"),
        partidas=request.args.get("partidas"))
    db.session.add(player)
    db.session.commit()
    return redirect("/")



class Player(db.Model):
    nome = db.Column(db.String(80), unique=True, nullable=False, primary_key=False)
    numero = db.Column(db.Integer, primary_key=True)
    posicao = db.Column(db.String(80), unique=True, nullable=False, primary_key=False)
    gols = db.Column(db.Integer, primary_key=False)
    partidas = db.Column(db.Integer, primary_key=False)

    def __repr__(self):
        return "Nome: {}, Numero: {}, Posicao: {}, Gols: {}, Partidas: {}".format(
            self.nome, 
            self.numero, 
            self.posicao,
            self.gols,
            self.partidas
            )


if __name__ == "__main__":
    app.run(debug=True)

home.html:

<html>
  <body>
    <h1>Jogadores</h1>
    {% for player in players %}
      <p>{{player}}</p>
    {% endfor %}
  </body>
</html>
  </body>
</html>

Gostaria que a página que exibe as entradas do banco fosse atualizada automaticamente conforme novas entradas fossem adicionadas ao banco. Pelo que pesquisei, seria possível conseguir esse resultado através de Server Sent Event, como neste exemplo, ou através de AJAX, como neste outro exemplo. Como eu sou novo em desenvolvimento web, não sei como implementar essas alterações em meu código.

Tentativa de usar Ajax:

player_manager.py:

@app.route("/", methods=["POST"])
def post():
    player = Player(
        nome=request.args.get("nome"), 
        posicao=request.args.get("posicao"),
        numero=request.args.get("numero"),
        gols=request.args.get("gols"),
        partidas=request.args.get("partidas"))
    db.session.add(player)
    db.session.commit()
    return redirect("/")

home.html:

<html>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var new_players = $(this).val();

        $.ajax({
      url: "/",
      type: "get",
      data: {jsdata: new_players},
      success: function(response) {
        $("#players_list").html(response);
      },
      error: function(xhr) {
        //Do Something to handle error
      }
    });
    </script>
    <div id="players_list">
        <h1>Jogadores</h1>
    {% for player in players %}
      <p>{{player}}</p>
    {% endfor %}
    </div>
  </body>
</html>
  </body>
</html>

Contudo, ainda não consigo atualizar o conteúdo sem recarregar o conteúdo.

1 Resposta 1

1

Bem, realmente você precisa utilizar alguma coisa além do próprio Flask para essa tarefa e o Ajax é uma boa solução. Porém, a atualização de dados deve ocorrer dado algum evento. Como você precisa que ocorra uma atualização o tempo inteiro, você pode setar um timeout (você tem um exemplo aqui). Do jeito que você fez a função só é chamada uma única vez, quando a página é carregada.

Porém, eu aconselharia algo mais robusto. Você pode pensar em soluções usando o React e até mesmo mudar a sua base para o Firebase, por exemplo (você pode apenas avaliar pra saber se vale a pena). O Jinja2 do Flask é muito bom e tem muita coisa, mas você vai sempre precisar de algo mais e isso pode ser alcançado mesclando tecnologias. Tipo embutindo scripts JavaScript, usando Vue.js, etc.

Enfim, é isto. Boa sorte no seu projeto!

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 .