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.