如何访问 python Flask 中的特定 html？

Question

我正在尝试使用烧瓶制作角色扮演游戏角色-sheet。在这个项目中，我有两个按钮（ level+ 和 level- ），按下时可以增加或减少角色的等级。

所以我有我的 html 文件：

<div class="level">
  <button type="button" name="level-">-</button>
  <p>{{ level }}</p>
  <button type="button" name="level+">+</button>
</div>

和我的烧瓶文件：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['POST', 'GET'])
def index():
    level = 0
    
    return render_template('index.html', level=level)

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

如何访问按钮，以便我可以增加或减少 python 文件中的级别变量？

Answer 1

如果您希望它具有 server-side 操作，您可能需要创建它的 HTML 形式以使浏览器向您的网站发送 POST 请求 API。如果您希望它具有 client-side 操作，您将需要创建一个 Javascript 脚本，以便浏览器在用户按下按钮时执行代码。

Answer 2

我建议用 javascript 代替，因为它比向后端发送请求并将新级别传递给模板要少 resource-intensive。

<div class="level">
    <button type="button" name="level-" onclick="changeLevel(-1)">-</button>
    <p id="level_number">{{ level }}</p>
    <button type="button" name="level+" onclick="changeLevel(1)">+</button>
</div>
    
<script>
    function changeLevel(change) {
      var x = document.getElementById("level_number");
        if (parseInt(x.innerHTML) + change >=0){
            x.innerHTML =  parseInt(x.innerHTML) + change;
        }
    }
</script>

如果您需要后端的级别，那么您可以使用AJAX或在表单中使用隐藏输入并使用[读取后端的值=19=]["level_number"]

<form class="level">
    <button type="submit" name="level-" onclick="changeLevel(-1)">-</button>
    <p id="level_number">2</p>
    <input type="hidden" name="level_number" id="hidden_level_number" value="{{ level }}"/>
    <button type="submit" name="level+" onclick="changeLevel(1)">+</button>
</form>
        
<script>
    function changeLevel(change) {
        var x = document.getElementById("level_number");
        var y = document.getElementById("hidden_level_number");
        if (parseInt(x.innerHTML) + change >=0){
            x.innerHTML =  parseInt(x.innerHTML) + change;
            y.value=x.innerHTML;
        }
    }
</script>

如何访问 python Flask 中的特定 html？

How to access a specific html in python Flask?

html

python

flask

web