python - 如何使用flask将JSON数据显示到前端界面？

Question

我有一个 Flask Restful api，它从 JSON 文件中获取问题和可能的答案，并按原样显示在我的浏览器中。从 JSON 文件中选择下一个问题取决于上一个问题的所选选项。我的应用程序工作正常，但我现在使用 URL 提供输入，我想要一个前端页面来显示问题及其使用单选按钮的所有选项，并且输入必须通过选择单选按钮然后按按钮(提交/下一个等等)。

这是我的 flask 代码:

from flask import Flask, jsonify
import json
import sys


# global variables
num = 0
last_choice = 'empty'
questionnaire_key = ''
user_choice = []
data = {}

app = Flask(__name__)

with open('static/data.json') as f:
    data = json.load(f)

print(data, file=sys.stdout)

@app.route('/<int:index>/Start')
def StartQuestionnaire(index):
    global num, last_choice, questionnaire_key, user_choice
    num = 0
    last_choice = 'empty'
    user_choice.clear()
    questionnaire_key = 'questionnaire_' + str(index)


    user_choice.append(data[questionnaire_key][0]['question'])
    print(user_choice, file=sys.stdout)
    return jsonify(data[questionnaire_key][0])

# last selected option will be passed as keyword argument
@app.route('/<int:index>/<string:option>')
def GetQuestion(index, option):
    global num, last_choice, questionnaire_key
    num = num + 1
    response = {}

    user_choice.append(option)

    if last_choice != 'empty':
        response = data[questionnaire_key][num][last_choice][option]
    else:
        if option != 'Yes' and option != 'No':
            last_choice = option

        response = data[questionnaire_key][num][option]

    if option == 'No' or num == len(data[questionnaire_key]) - 1:
        for elem in user_choice:
            print(elem, file=sys.stdout)

    return jsonify(response)

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

这是我的 JSON:

{
"questionnaire_0" :
[
    {
        "question": "Are you Hungry?",
        "options": ["Yes", "No"]
    },
    {
        "Yes": {
            "question": "What would you like to eat?",
            "options": ["Hamburger", "Pizza", "Pop Corn", "Chicken"]
        },
        "No": {
            "message": "OK, call me when you are hungry."
        }
    },
    {
        "Hamburger": {
            "message": "Nice, I will order a hamburger for you."
        },
        "Pizza": {
            "question": "Would you like pizza with mushroom?",
            "options": ["Yes", "No"]
        },
        "Pop Corn": {
            "question": "Would you like pop corn with cheese?",
            "options": ["Yes", "No"]
        },
        "Chicken": {
            "question": "Would you like chicken with cheese?",
            "options": ["Yes", "No"]
        }
    },
    {
        "Pizza": {
            "Yes": {
                "message": "Ok, i will order the best pizza in town for you."
            },
            "No": {
                "message": "No? Well... stay hungry then."
            }
        },
        "Pop Corn": {
            "Yes": {
                "message": "Ok, i will order the best pop corn in town for you."
            },
            "No": {
                "message": "No? Well... stay hungry then."
            }
        },
        "Chicken": {
            "Yes": {
                "message": "Ok, i will order the best chicken in town for you."
            },
            "No": {
                "message": "No? Well... stay hungry then."
            }
        }
    }
],
"questionnaire_1":
[
    {
        "question": "Are you bored?",
        "options": ["Yes", "No"]
    },
    {
        "Yes": {
        "question": "What would you like me to play?",
        "options": ["Song", "Movie", "Music", "Ted Talk"]
        },
        "No": {
            "message": "OK, call me when you are bored."
        }
    },
    {
        "Song": {
            "message": "Nice, I will play your favorite song."
        },
        "Movie": {
            "question": "Would you like to watch action movie?",
            "options": ["Yes", "No"]
        },
        "Music": {
            "question": "Would you like relaxing music?",
            "options": ["Yes", "No"]
        },
        "Ted Talk": {
            "question": "Would you like me to play simon sinek talk?",
            "options": ["Yes", "No"]
        }
    },
    {
        "Movie": {
            "Yes": {
                "message": "Ok, i am playing Avengers."
            },
            "No": {
                "message": "No? Well... stay bored then."
            }
        },
        "Music": {
            "Yes": {
                "message": "Ok, i will play the most relaxing music."
            },
            "No": {
                "message": "No? Well... stay bored then."
            }
        },
        "Ted Talk": {
            "Yes": {
                "message": "Ok, get ready to feel inspired."
            },
            "No": {
                "message": "No? Well... stay bored then."
            }
        }
    }
]

}

如何连接前端，以便用户可以使用漂亮的 View 回答问题，而不需要更改网址。

<小时/>

PS:正如我提到的，除了第一级问题之外的任何问题都依赖于之前的答案，因此一次应该显示一个问题。首页应显示用于选择调查问卷的单选按钮列表。

Answer 1

这是一个非常广泛的问题 - 你本质上是在问我如何制作网站的字体。

有很多选择。您可以使用 React 之类的框架构建客户端应用程序。它将使用 javascript 调用您的 API，然后向用户显示信息。

或者，您可以在服务器上渲染页面并将其返回给用户而不是原始 json。在您的情况下使用 Flask templates 。上一个链接包含由 Flask 创建者编写的“Flask Mega 教程”。关于在一个 SO 答案中构建网站的前端，确实有太多的话题要讨论 - 该教程将为您提供使用 python 构建网站的良好开端。