Flask开发石头剪刀布游戏：HTML模板渲染异常与404问题求助

问题描述 #

自学Python3和HTML，用Flask搭建石头剪刀布游戏，包含1个Python脚本和2个HTML文件（首页、结果页）。本地macOS+PyCharm运行时，游戏无法正常显示结果：要么出现未渲染的原始HTML模板代码，要么触发404错误。

用户提供的原始代码如下：

Flask核心代码 #

from flask import Flask, render_template, request, redirect, url_for
import random

from flask import Flask, render_template, request, redirect, url_for
import random

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        player_choice = request.form['choice']
        return redirect(url_for('play', player_choice=player_choice))
    return render_template('Rock_Paper_Scissors.html')

@app.route('/play/<player_choice>', methods=['GET'])
def play(player_choice):
    computer_choice = generate_computer_choice()
    result = determine_result(player_choice, computer_choice)
    return redirect(url_for('result', player_choice=player_choice, computer_choice=computer_choice, result=result))

@app.route('/result/<player_choice>/<computer_choice>/<result>', methods=['GET'])
def result(player_choice, computer_choice, result):
    return render_template('Result.html', player_choice=player_choice, computer_choice=computer_choice, result=result)

首页表单代码 #

<form class="class1" action="{{ url_for('play') }}" method="post">
    <label for="choice">Choose:</label>
    <select name="choice" id="choice">
        <option value="rock">Rock</option>
        <option value="paper">Paper</option>
        <option value="scissors">Scissors</option>
    </select>
    <input type="submit" value="Play">
</form>

结果页模板代码 #

<body>
<h1 class="custom-heading">Result</h1>
<p>You chose:</p>
<p>The computer chose: {{ computer_choice }}</p>
<p>{{ result }}</p>

问题根源与修复方案 #

1. 缺失核心函数+重复导入 #

• 原始代码缺少generate_computer_choice()和determine_result()两个核心逻辑函数，运行时会直接报错
• 存在重复导入Flask模块的冗余代码

2. 路由与表单提交方法不匹配 #

• play路由仅支持GET方法，但表单用POST提交，导致404错误
• 多次跳转路由（home→play→result）增加出错概率，且将游戏结果暴露在URL中不严谨

3. HTML模板结构不完整 #

• 结果页未闭合<body>标签，可能导致渲染异常

4. 项目结构不符合Flask规范 #

• 需确保HTML模板放在默认的templates文件夹下

修复后完整代码 #

优化后的Flask核心代码 #

from flask import Flask, render_template, request
import random

app = Flask(__name__)

# 生成电脑选择的函数
def generate_computer_choice():
    choices = ['rock', 'paper', 'scissors']
    return random.choice(choices)

# 判断胜负的函数
def determine_result(player_choice, computer_choice):
    if player_choice == computer_choice:
        return "平局！"
    elif (player_choice == 'rock' and computer_choice == 'scissors') or \
         (player_choice == 'paper' and computer_choice == 'rock') or \
         (player_choice == 'scissors' and computer_choice == 'paper'):
        return "你赢了！"
    else:
        return "电脑赢了！"

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        player_choice = request.form['choice']
        computer_choice = generate_computer_choice()
        result = determine_result(player_choice, computer_choice)
        # 直接渲染结果页，减少跳转
        return render_template('Result.html', 
                               player_choice=player_choice, 
                               computer_choice=computer_choice, 
                               result=result)
    return render_template('Rock_Paper_Scissors.html')

修正后的首页表单代码 #

<form class="class1" action="{{ url_for('home') }}" method="post">
    <label for="choice">选择：</label>
    <select name="choice" id="choice">
        <option value="rock">石头</option>
        <option value="paper">布</option>
        <option value="scissors">剪刀</option>
    </select>
    <input type="submit" value="开始游戏">
</form>

补全结构的结果页代码 #

<body>
<h1 class="custom-heading">游戏结果</h1>
<p>你的选择：{{ player_choice }}</p>
<p>电脑的选择：{{ computer_choice }}</p>
<p>{{ result }}</p>
</body>

规范项目结构 #

确保项目文件层级如下：

your_project/
├── app.py
└── templates/
    ├── Rock_Paper_Scissors.html
    └── Result.html

验证步骤 #

1. 在PyCharm中运行app.py
2. 访问http://127.0.0.1:5000
3. 选择选项提交后，即可正常显示游戏结果

内容的提问来源于stack exchange，提问作者New_To_All_This