詰まった問題

 

コードの流れ

①フロントでさいころを振るボタンを作成し、GETメソッドでバックエンドに渡す

②フロントからGETメソッドを受け取ったら、ランダム変数を使ってランダムを作り変数に入れてフロントに渡す

③バックからうけとったらif文でもし変数が存在したら画像を返し、なければ画像を返さないと条件分岐を作成する

 

注意点

・randomを使うときは必ずimportを忘れずに

・if文を使うときはカッコが{}波カッコなので<>を使わないように注意

 

バックエンド

import random  ※記述し忘れた(モジュールを使うときは必要)
from flask import Flask, render_template, request

app = Flask(__name__)


@app.route("/")
def index():
    dice = 0
    if request.args.get("dice", ""):
        dice = random.randint(1, 6)
        
    return render_template("index.html", dice=dice)

 

 

 

フロントエンド(該当箇所)
<form method="get" action="/">
    <input type="submit" name="dice" value="振る">
</form>

<div>
    <div class="dice">
    {% if dice %}        
    <img src="/static/images/dice_{{ dice }}.png" alt="さいころ{{ dice }}">
    {% else %}
    <img src="/static/images/question.png" alt="はてな">
    {% endif %}
    </div>
</div>