flask html 按钮调用 python 函数

Question

我正在使用 Flask 制作网络服务。我想在前端播放 flask 静态文件夹中的 midi 文件。下面是 app.py 代码的一部分。我要运行的函数是pythonpygame库的一个函数，这个函数播放midi文件。我已经实现了background_process_test()中的功能。我参考这个post写了这段代码。 Flask - Calling python function on button OnClick event

 @app.route('/uploader', methods=['GET', 'POST'])
 def wav_transform():
    if request.method == 'POST':
        f = request.files['file']
        if(request.form['length']):
            random_length = request.form['length']
            random_length = int(random_length)
        else:
            random_length = 100
        f.save(f'static/original_song.wav')

        ...

        midi = controller.MakeMidi(random_song, bpm, "static/random.midi")
        midi.makemidi()

        return render_template('json.html')

@app.route('/background_process_test')
def background_process_test():
    pygame.mixer.init()
    freq, size, chan = pygame.mixer.get_init()
    BUFFER = 3072
    filename = "static/random.midi"
    pygame.mixer.init(freq, size, chan, BUFFER)

    pygame.init()
    pygame.mixer.init()
    clock = pygame.time.Clock()
    pygame.mixer.music.load(filename)
    pygame.mixer.music.play()
    print("play song")
    while pygame.mixer.music.get_busy():
        clock.tick(1000)

    return "nothing"

下面是 json.html 代码。

<!DOCTYPE html>
<html>
    <head>
        <title> play and download </title>
        <meta charset="UTF-8">
        <style>
            li label{
                width:121px;
                float:center;
                font-size:20px;
                font-weight:bold;
                line-height:25px;
            }
            body{
                backgound-size: cover;
                font-family: 'Open Sans', sans-serif;
                background: #a27fb2 fixed center;
                text-align:center
            }
            h1, h2, h3, h4, h5, h6{
                font-family: 'Montserrat', sans-serif;
                margin-top:30px;
                background: #fff;
                font-size:40px;
                color:#a27fb2
            }
            fieldset{
            margin: 40px 15px;
            }
            li{
                list-style-type:none;
                color: #fff;
            }
            button{
                width:200px;
                background-color:#fff;
                border:none;
                color:#a27fb2;
                padding:10px 0;
                text-align:center;
                text-decoration:none;
                display:inline-block;
                font-size:20px;
                font-weight:bold;
                margin:4px;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend> </legend>
            <h3>play and download</h3>
            <li>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                      <script type=text/javascript>
              $(function(){
                $('a#test').bind('click', function() {
                  $.getJSON('/bacground_process_test',
                  function(data){
                    // do nothing
                  });
                  return false;
                });
              });
            </script>
                    </li>
                    <li>
            <div class='container'>
              <form>
                <a herf=# id=test><button class='btn btn-default'>Test<button></a>
              </form>
            </div>
            </li>
        </fieldset>
    </body>
</html>

综上所述，我想让background_process_test()函数在前端点击按钮时运行，从而播放midi文件。当我运行这段代码在我的本地服务器上时，midi 文件没有播放 127.0.0.1--[13 / Nov / 2019 21:50:56] "GET / bacground_process_test HTTP / 1.1" 404-.

事实上，我的目的是播放midi文件，我正在尝试这样做，因为在Python中很难将midi文件转换为wav文件。或者让我知道是否有任何其他方法可以在 html.

中播放 Flask 静态文件夹中的 midi 文件

Answer 1

您拼写错误 background。注意你写了 bacground_process_test:

$(function() {
    $('a#test').bind('click', function() {
        $.getJSON('/bacground_process_test', // << HERE
            function(data) {
                // do nothing
            });
        return false;
    });
});

在 json.html 文件中。

flask html 按钮调用 python 函数

flask html button to call python function

html

python

flask

web-midi