2017-04-03 111 views
1

我開始創建一個簡單的燒瓶動力網頁。 網頁任務是一個簡單的按鈕,當它按下時改變它的顏色狀態,將更新mysql上的狀態 。燒瓶和JavaScript到MySQL

但我有點新瓶框架,不知道如何注入正確的代碼 實現與JavaScript結合的情況。希望有人可以幫助或演示如何做到這一點,或一些指示步驟來顯示。

這裏是我的示例代碼:模板文件夾下

from flask import Flask, render_template 

app = Flask(__name__) 

@app.route("/") 
def sample(): 
    return render_template('button.html') 

if __name__ == "__main__": 
    app.run(port=8001,debug=True) 

我的樣本button.html:

<!DOCTYPE html> 
<html> 
<head> 

<script> 
    var count = 1; 
    function setColor(btn) { 
     var property = document.getElementById(btn); 
     if (count == 0) { 
      property.style.backgroundColor = "#000000" 
      count = 1;   
     } 
     else { 
      property.style.backgroundColor = "#7FFF00" 
      count = 0; 
     } 
    } 
</script> 
</head> 

<body> 

<input type="button" id="button" value = "button" style= "color:white;background-color: #000000;" onclick="setColor('button')";/> 

</body> 
</html> 

回答

1

有幾種不同的方式來處理它。一個簡單的方法是創建一個這樣的javascript函數:

<script> 
    $(function(){ 
     $("#flaskRoute").onclick("#divID"); 
    }); 
</script> 

您的HTML非常簡單。注意id =「divID」的位置。

<input type="button" id="divID" value = "button" style= 
"color:white;background-color: #000000;" onclick="setColor('button')";/> 

在JavaScript之前我們使用了#flaskRoute。這將調用Flask路由。我不知道你在mysql中使用了什麼表格和字段,所以我只是做了一些東西。

from flask import Flask, request, render_template 
import pymysql 

db = pymysql.connect("localhost", "username", "password", "DB") 

app = Flask(__name__) 
api = Api(app) 

@app.route('/flaskRoute') 
def put(self, color): 
     cursor = db.cursor() 
     sql = "INSERT tablename SET color = %s WHERE fieldname = %s" 
     cursor.execute(sql, (color, fieldname)) 
     db.commit() 
     return render_template('button.html') 

if __name__ == '__main__': 
app.run(debug=True) 

這是一個示例代碼中插入一些到數據庫中,你可以做一個更新,如果你已經知道你定義什麼顏色。您也可以使用相同的方法來查詢網頁加載的數據庫,以獲取數據庫中當前的顏色集。