當休息請求來到燒瓶時，如何更改元素的顏色（在 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