我创建了自己的例子，感谢@elyase

Question

好的，我设法创建了一个显示散景图像的烧瓶页面 - 现在我必须以某种方式将其放入模板中

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

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

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

我创建了自己的例子，感谢@elyase

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

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

Answer 1

基本上你需要创建一个用作静态图像的视图，然后从该路径获取图像网址。

我没有包含您的库，因此我将使用matplotlib和numpy来模拟您尝试尝试的内容。这不是一个完整的解决方案（它使用2个视图和1个简单模板以最简单的工作方式），但您应该能够理解所有可以让您完成页面的ESSENTIAL技术。我有一些评论和指导，我认为代码本身几乎是自我解释。

好的，这是视图 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请求，然后设置Flask的/ plot / view以呈现内存中的图像并反馈为静态图像。

主要注意事项：

url_for然后会像/plot/?width=xxx&height=xxx一样动态生成src。

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

准备就绪之后，使用Python StringIO模块将其保存在内存中，并使用Flask的send_file作为静态内容。

您应该阅读并了解有关Flask和HTML的更多信息，如果不了解这些内容如何协同工作，就无法构建真正令人惊叹的内容。

我希望这可以帮助你理解基本技术，祝你好运！

Answer 2

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

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

在Flask中嵌入一个html页面

我创建了自己的例子，感谢@elyase

2 个答案:

主要注意事项：