在 Flask 中嵌入一个 html 页面

Question

好的，我已经成功地创建了一个显示散景图像的烧瓶页面——现在我必须以某种方式将其放入模板中

https://gist.github.com/cloudformdesign/a0c5f2e8558ea3b60f0a

我想要的是创建一个带有几个文本框的网页，用户可以在其中键入他们想要绘制图表的数据，并将在文本框下方绘制图表。用户可以 select 他们想要绘制的新数据，图表将更新。

我在html中的编码非常糟糕，所以我在创建模板方面非常糟糕。我该怎么做？

感谢@elyase

，我创建了自己的示例

https://github.com/bokeh/bokeh/tree/master/examples/embed/simple

这是在 html 页面中嵌入散景页面的一个非常简单的示例。 @elyase 给出的示例很有帮助，但实际上并没有与 python3 一起使用（我无法导入或安装 pyaudio）。对于我想问的问题，它也过于复杂。上面的要点给出了一个非常简单的答案，只有两个文件，都在同一个目录中。非常感谢！

Answer 1

基本上您需要创建一个视图作为静态图像，然后从该路径获取图像 url。

我没有你的库，所以我将使用 matplotlib and numpy 来模拟你正在尝试的东西。这不是适合您的完整解决方案（它是使用 2 个视图和 1 个简单模板的最简单的工作方式），但您应该能够理解让您完成页面的所有基本技术。我有一些评论和指南，我认为代码本身几乎是不言自明的。

好的，这是视图main.py:

from flask import Flask, render_template, request, send_file
import matplotlib.pyplot as plt
import numpy as np
from StringIO import StringIO

app = Flask(__name__)

@app.route('/plot/')
def plot():
    try:
        # try to get the query string like ?width=xxx&height=xxx
        height = int(request.args.get('height'))
        width = int(request.args.get('width'))
    except ValueError:
        # if height, width not available, set a default value
        height, width = 100, 100
    # I randomly generate the plot which just based on H x W
    # you should be able to generate yours from your library
    to_draw = np.random.randint(0, 255, (height, width))
    img = plt.imshow(to_draw)
    # you can convert the graph to arrays and save to memory
    imgIO = StringIO()
    img.write_png(imgIO, noscale=True) # save to memory
    imgIO.seek(0)
    # and send that image as file as static file of url
    # like... /plot/?width=100&height=100
    return send_file(imgIO, mimetype='image/png')

# this is the main page with the form and user input
@app.route('/', methods=['GET', 'POST'])
def index():
    # set the default values
    height, width = 100, 100
    # handle whenever user make a form POST (click the Plot button)
    if request.method == 'POST':
        try:
            # use this to get the values of user input from the form
            height = int(request.form['height'])
            width = int(request.form['width'])
        except ValueError:
            pass
    # and pass the context back to the template
    # if no form is POST, default values will be sent to template        
    return render_template('index.html', height=height, width=width)


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

以及 templates/index 处的模板。html:

<html>
  <head>
    <title>Micro Plot!</title>
  </head>
  <body>
  <h1>Interactive Plot</h1>
  <form action="/" name="plot" method="POST">
      <p><input type="text" name='height' value="{{ height }}" /></p>
      <p><input type="text" name='width' value="{{ width }}" /></p>
      <p><input type="submit" value="Plot Now!"></p>
  </form>
  <img src="{{ url_for('plot', height=height, width=width) }}" />
  </body>
</html>

诀窍是设置图像 src 以发送 GET 请求到 url，然后 Flask 的 /plot/ 视图渲染内存中图像并作为静态反馈。

要点：

然后 url_for 将动态生成 src，如 /plot/?width=xxx&height=xxx。

要从视图中的 url 获取 querystring，请使用 request.args.get('KeyName')。

一旦您的情节准备就绪，请使用 Python StringIO module and use Flask's send_file 将其保存在内存中以作为静态内容。

您应该阅读并了解更多关于 Flask and HTML 的信息，如果不充分了解这些东西如何协同工作，您就无法构建出真正令人惊叹的东西。

我希望这可以帮助您了解底层技术，祝您好运！

Answer 2

我最终在 elyase 的帮助下创建了自己的答案，代码被拉入 bokeh 项目的示例文件夹中。在这里查看：

https://github.com/bokeh/bokeh/tree/master/examples/embed/simple

在 Flask 中嵌入一个 html 页面

Embedding an html page inside Flask

html

python

flask

python-3.x

感谢@elyase

要点：