当休息请求来到烧瓶时，如何更改元素的颜色（在 html 页面中）？

Question

我有一个包含一些元素的html 文件和一个 python 文件，它使用如下所示的烧瓶处理请求：

@app.route('/changeColor', methods=['POST'])
def change_color():
    colors = ['red', 'black', 'purple', 'yellow', 'white', 'pink', 'grey', 'green']
    i = random.randint(0, 2)
    rand_col = colors[i]
    return rand_col

任何人向这个 URL 发送请求，它都会返回一个随机颜色，但我想要的是当有人向这个 URL 发送请求时，它会动态地改变我 HTML 页面中元素的背景颜色（我的意思是我不希望我的页面重新加载或……任何建议都会对我有所帮助。

Answer 1

所以，好吧。 你好，首先。

不仅仅是python问题。 现在是系统架构问题。

更好的方法是为此任务使用套接字连接。 我们将 javascript 对象WebSocket添加到 html 页面，这将创建到后端的连接并等待来自它的消息：

const socket = new WebSocket('ws://localhost:8080');

当然，我们将在后端部分添加套接字侦听器。 它可以是任何使用 WebSockets 的库： this one或者this one 。 通常，我使用第二个。

在我们系统的后端和前端部分创建套接字侦听器后 - 这将按以下方式工作：

用户使用 javascript 打开 html 页面。
Javascript 打开与后端的套接字连接。
后端接受连接。

现在所有打开的页面都将等待来自后端的一些消息。 我们应该在后端升级监听器 :) 这个监听器（通过无限循环 24/7 工作 - 最好的方法 - 看看asyncio ）将检查数据库/文件/进程/东西（这是另一个问题）以了解新的成功请求您的 API，并将向所有打开的套接字发送消息。 在前端部分 - javascript 将从套接字连接获取消息并将新颜色呈现给 DOM 元素。

这个系统中有很多东西应该深思熟虑，但我认为这是一种做你想做的事。 可以肯定的是，这是一种了解如何做到这一点以及更多的方法。

Answer 2

我将准确地回答这个问题，但请注意，设置页面颜色可以完全在前端完成，并且可能不需要向服务器发出请求来获取实际颜色。

这个答案现在完美地解释了单独在 Javascript 中执行此操作，并避免每次有人更改颜色时向服务器发出该请求。

如果您确实想向服务器发出此请求（例如，出于学习目的），您可以这样做。 让我们稍微修改您的烧瓶路线以说明以下几点：

@app.route('/changeColor', methods=['GET'])
def change_color():
    colors = ['red', 'black', 'purple', 'yellow', 'white', 'pink', 'grey', 'green']
    i = random.randint(0, len(colors)-1)
    rand_col = colors[i]
    return {'color': rand_col}, 200

我们有：

将请求方法更改为 GET。
更改了随机化线，以考虑colors列表的长度。 现在将更多项目添加到列表中将自动将它们全部包含在随机选择中。
返回一个带有键'color'和rand_col值的rand_col 。 这个字典会被flask自动转成JSON。 我们还添加了200响应代码。

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

这里我们添加了一个单独的路由来渲染前端模板，用户点击这个页面，并且change_color路由专门处理返回颜色。

现在为模板。 出于安全原因，我实际上为此使用了 jquery，它包含在 cloudflare 的 CDN 和 SNI 标签中。

我们在 HTML 中创建一个按钮，使用类changecolor然后在单击按钮时使用 Jquery 选择器调用 AJAX 函数。

这是templates/index.html的内容：

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
  <p>I am the page text.</p>
  <button class="changecolor" type="button">Change my Colour</button>
<script type='text/javascript'>
$(function() {
  // This catches the button click
  $('.changecolor').click(function() {

    // This does the ajax call to the server (GET Request)
      $.ajax({
        type: 'GET',
        // Dynamically set the URL for the python `change_color`
        // function.
        url: '{{ url_for("change_color") }}',
        success: function(data) {
          // Actually set the page color, if the request is suecessful
          document.body.style.backgroundColor = data['color']; 
      }
    });
  });
});
</script>
</body>
</html>

请注意，我们使用 Jinja2 的模板功能而不是将 URL 提供为/changeColor ，这次是url_for函数为 Python 代码中的change_color函数动态设置相应的 URL。 （更多信息）

现在在您的前端，您应该能够单击按钮并更改页面颜色：

当休息请求来到烧瓶时，如何更改元素的颜色（在 html 页面中）？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-11-29 15:57:05

解决方案2
0 2019-11-29 16:00:35

当休息请求来到烧瓶时，如何更改元素的颜色（在 html 页面中）？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-11-29 15:57:05

解决方案2 0 2019-11-29 16:00:35

解决方案1
0 已采纳 2019-11-29 15:57:05

解决方案2
0 2019-11-29 16:00:35