完全新手！非常迷茫如何通过 Flask 发送 json 数据以显示在 HTML 网页上？

Question

我对后端 Web 开发和前端 Web 开发都很陌生。现在，我有一个 python 脚本，它使用 flask 启动网络服务器。我在这个脚本中有一个方法，它将故事的名称作为输入，returns 文本作为更大的 JSON 集的一部分（参见代码片段）。另外，我有一个 HTML 页面，我试图通过该页面显示来自网络服务器的 returned JSON 数据。我想弄清楚的是...如何使 HTML 页面和 JSON 服务器相互通信？现在我正在使用 Postman 访问 returned JSON 数据。我知道应该在 return 函数中调用 render_template 函数，并以变量 'data' 作为参数...但我不确定之后该怎么做？非常感谢任何帮助。

我查看了很多堆栈溢出帖子，但回复并不完全符合我的要求...或者答案太高级，我无法理解所描述的内容。

@app.route('/story/<title>', methods=["GET"])
def display_story(title):

    db = MySQLdb.connect("mysql-server", "root", "secret", "mydb")
    cursor = db.cursor()
    cursor.execute("SELECT * FROM stories WHERE title = %s", (title,))
    rows = cursor.fetchone()
    if (rows != None):
        data = {"title": rows[0], "text": rows[1], "current_user": rows[2], "state": rows[3]}
        db.close()
        resp = Response(json.dumps(data), status=200, mimetype='application/json')
        return resp

    data = { "Error": "There is no story with that title." }
    resp = Response(json.dumps(data), status=404, mimetype='application/json')
    return resp

Answer 1

好的，我现在就快速解决你的问题。首先，你的SQL查询方法？它不是那么好。例如，您需要使用 SQLAlchemy 来使其变得更好。其次，您不需要传递带有查询数据的 JSON 就可以让您的网页访问它，有一种更简单的方法，JINJA。

我将在下面附上一些极好的资源，帮助您在一周或更短的时间内学到更多。它与我在 Flask 中开始时使用的相同。绝对基础和简单，您的所有问题都会在那里得到解答。那是更详细的一个，如果您不了解我下面的解决方案，请使用它来学习。

所以解决方案：

实施SQLAlchemy。让生活变得简单，让查询变得容易。它是如何工作的，可能需要几天时间才能阅读，所以我会留下一个 link 给你，你可以开始阅读以更好地理解它。您在 SQLAlchemy 中的查询将如下所示。

query = db.session.query(stories).filter(stories.title == xyz).all()

然后可以在render_template中调用变量查询并传递到HTML页面。像这样，

return render_template('webpage.html', title='XYZ', query=query)

我还假设您的 table 看起来与此类似，

class stories(db.Model):
    __tablename__ = 'stories'

    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String)
    text = db.Column(db.String)

了解 Jinja，它是一个模板引擎，可使 Python - HTML 交互变得简单。在您的 HTML 页面中，您可以像这样使用他们在查询中获得的数据，

<html>
<body>
<p>
Title : {{query.title}}
Text : {{query.text}}
</p>
</body>
</html>

并且您的 HTML 页面将显示查询数据，而无需使用 JSON 发送数据以及您当前正在执行的所有操作。

学习资源：

由于你是新手，这个问题说明你在这方面的知识非常有限。我会强烈推荐这个 Youtube 系列。

观看前 4-5 节，了解有关 Flask、Jinja 和 SQL Alchemy 工作原理的基本知识。 Link 这里：Corey M Schafer's Guide to Flask。

一切都解释清楚并显示出来。

在这个视频系列的最后，至少前 4 个视频，您将能够使用 Flask 创建简单的数据库驱动的网页，就像一个基本的博客网站（看看您的代码，这有点像你在做什么。）

完全新手！非常迷茫如何通过 Flask 发送 json 数据以显示在 HTML 网页上？

Total newbie! Very lost on how to send json data through flask to display on an HTML webpage?

html

mysql

json

backend

flask