おみくじの問題 つまった
コードの作成の流れ
①おみくじをひくボタンとformメソッドの作成
バックエンド
②fortuneの辞書の作成
③メソッドがあれば辞書にランダムな数字を入れる
④ランダムな数字が５以上だったらバッドfile、それ以外ならグッドファイルをファイル変数に入れる
⑤ファイルを開いてバッドfileもしくはグッドファイルを読み込む（ここは全然わからなかった）
⑥読み込んだメッセージをまたランダムチョイスし変数に入れる
⑦メッセージをキーにして読み込んだメッセージ変数から改行を削除する
バックエンド
@app.route("/")
def index():
fortune = {}
if request.args.get("fortune", ""):
fortune["no"] = random.randint(1,6)
if fortune["no"] >= 5:
fortune_file = BAD_FILE
else:
fortune_file = GOOD_FILE
with open(fortune_file, "r", encoding="utf-8") as f:
messages = f.readlines()
msg = random.choice(messages)
fortune["message"] = msg.strip()
※ここでprint(fortune)と書くとターミナルに表示された。わからないときはprintで表示させる
return render_template('index.html', fortune=fortune)
※辞書として作成したのは
fortuneの辞書
{no:1 , message: message}
という２つの要素を持った辞書ということになる
辞書の使い方としては普通の使い方をしているだけ
フロント
①ボタンの作成とメソッドの送信
<form method="get" action="/">
<input type="submit" name="fortune" value="引く">
</form>
②バックからうけた辞書の値で条件分岐をして画像を表示させる
<div>
<div class="result">
{% if fortune.no %}:
<img src="/static/images/fortune_{{ fortune["no"] }}.png" alt="おみくじ{{ fortune["no"]}}">
{% else %}
<img src="/static/images/question.png" alt="はてな">
{% endif %}
<div class="message">{{ fortune.message }}</div>
</div>
</div>