2017-04-03 68 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) 

这是一个示例代码中插入一些到数据库中,你可以做一个更新,如果你已经知道你定义什么颜色。您也可以使用相同的方法来查询网页加载的数据库,以获取数据库中当前的颜色集。