如何将javascript代码连接到python烧瓶答案

【问题标题】：how to connect javascript code to python flask如何将javascript代码连接到python烧瓶
【发布时间】：2021-07-30 13:22:25
【问题描述】：

我正在做一个前端项目。我的要求是我需要创建一个烧瓶 API。

在前端，一个 java 脚本文件将从那里 信号/消息应该转到 python flask api 并且 flask API 也应该将信号/消息返回给 JavaScript

例如：在前端会有一个按钮，如果我单击该按钮消息应该像“local_filename.txt”那样转到flask api，那么python flask 应该读取该消息并应该回复/响应该“local_filename”中的内容.txt"

我对 Web 开发不是很感兴趣，请帮帮我请在 python 和 JavaScript 中发布任何示例代码

【问题讨论】：

标签： javascript html python-3.x flask web-development-server

【解决方案1】：

您尝试解决该任务将是可取且有用的。该平台不是一项服务，您可以让其他人为您编程，而是当您在尝试中遇到问题时提供帮助。
然而，在下面我的例子中是例外的。

请求的文件在服务器上使用variable rule 标识并通过send_from_directory 发送。
相应的文本文档应位于项目的“文件”文件夹中。在示例中，根据您的规范，需要一个名为“local_filename.txt”的文档。

from flask import Flask, render_template, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/download/<path:filename>')
def download(filename):
    return send_from_directory(
        'files',
        filename,
        as_attachment=True
    )

为了对按钮的点击做出反应，请求所有必要的按钮并为它们注册一个event listener。点一下，请求按钮的data attribute，生成需要的url。这样做时，考虑到这是一个有效的表格。
方法类型 GET 的请求是由异步 Javascript (AJAX) 使用 fetch 命令发出的。发送的数据以Blob 的形式接收。内容被提取并显示。没有考虑 HTML 特定的字符。

名为“index.html”的模板应位于项目的“templates”文件夹中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <button data-source="local_filename.txt">Retrieve</button>
    <output id="result"></output>
    <script type="text/javascript">
      (function(){
        let elems = document.querySelectorAll("button[data-source]")
        elems.forEach(elem => {
          elem.addEventListener('click', event => {
            const url = `/download/${encodeURIComponent(elem.dataset.source)}`;
            fetch(url)
              .then(resp => resp.blob())
              .then(blob => {
                blob.text().then(text => {
                  document.getElementById("result").innerHTML = text;
                });
              })
              .catch(err => console.error("Error", err));
          });
        });
      })();
    </script>
  </body>
</html>

如果此示例满足您的要求，我会很高兴，并会要求您在未来遵守此服务的规则和程序。

在实施您的项目时获得乐趣并取得成功。

【讨论】：