[HTML] - search.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
        <script type=text/javascript src="{{url_for('static', filename='jQuery.js') }}"></script>
        <script>
        function test(){
                var text_data = $('#item_id').val();
                $.ajax({
                        type : 'POST',                                  <!--GET / POST-->
                        url : 'http://ip주소:5000/item_request',
                        data : {
                                item_id:text_data                       <!--key : "value"-->
                        },
                        dataType : 'JSON',
                        success : function(result){
                                alert("result = "+ result);
                                $('#a').html(result);
                        },
                        error : function(xtr,status,error){
                                alert(xtr +":"+status+":"+error);
                        }
                });
        }
        </script>
        <body>
                <p>검색하고자 하는 아이템을 입력하세요.</p>
                <input type = "text" name="item_id" id="item_id"/>
                <input type = "button" value = "데이터 요청" onclick="test()"/>
                <h1 id ="a"></h1>
        </body>
</html>
 
 

[Flask(python)] -controller.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
from flask import Flask, request, Response, jsonify, render_template
 
app = Flask(__name__)
app.debug = True
 
import json
import mysql.connector
 
db = mysql.connector.connect(host="DB가 설치된 IP주소", user="DB사용자",passwd="DB비번", db='DB명', port=DB포트번호)
curs = db.cursor()
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/search')
def item_search():
    return render_template('search.html')
    
@app.route('/item_request', methods =['POST'])
def item_query():
    value1 = request.form['item_id']
    item_sql = "select * from student where id ='"+value1+"'"
    curs.execute(item_sql)
    row_headers=[x[0for x in curs.description]
    rows=curs.fetchall()            
    json_data=[]                                        #list
    for result in rows:
        json_data.append(dict(zip(row_headers,result)))
    
    json_return=json.dumps(json_data[0])   #string #json
 
    return jsonify(json_return)
 
    curs.close()
 
if __name__=='__main__':
    app.run(host='0.0.0.0',port=5000)
 
db.close()
 
 

[index.html]

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <body>
            <p>정보</p>
            <br><a href ="http://ip:5000/search">item search</a>
        </body>
</html>
 
 

[실행 화면]

 

Centos7 환경에서 Python으로 MySQL하고 연동 하고자 한다면 

https://mygameprogamming.tistory.com/41?category=710446

 

Python-MySQL 연결하기

Python-MySQL 연결하기 위해선 당연하게도 Python과 MySQL이 있어야 한다. MySQL version : 5.6.44 Flask version : 1.0.2 Python version 3.6.7 1. Python을 설치하기 위해서는 pip가 선행 설치 되어있어야 한다...

mygameprogamming.tistory.com

Python에서 json 문법을 따른 string은 json문법의 'key'를 통해 'value'에 접근 할 수 있습니다.

 

fetchall() return값의 data type은 list이고,

fetchone() return 값의 data type은 tuple이다.

 

키 값을 통해 접근하려면 data type을 string으로 바꿔 주어야 한다.

 

json.loads()를 사용하는데 괄호 안에는 string 이 들어가야한다.

 

list와 tuple은 들어 갈 수 없으므로 row[0]으로 하면 row라는 행의 0번째 데이터를 뜻하고 data type은 string으로 변한다.

그러므로 다음과 같이 JSON의 키 값으로 통해 접근 할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
from flask import Flask, request, Response, jsonify, render_template
 
app = Flask(__name__)
 
import mysql.connector
import json
 
# MySQL connect
db = mysql.connector.connect(
        host="접속하려는 MySQL이 설치된 IP주소"
        user="MySQL 사용자",
        passwd="MySQL 사용자 비밀번호"
        db='접속하려는 DB명', port=3309
        )
 
# MySQL curs
curs = db.cursor()
 
# Flask framework = route
def index():
        return render_template('index.html')
 
@app.route('/request', methods =['post'])
def check_flask():
        # SQL
        value = request.form['SensorID']
        sql = "select esnData from ESensorTable where esnSensorId = '"+value+"'"
        curs.execute(sql)
        #DATA Fetch
        row = curs.fetchone()
        #convert json to python
        data = json.loads(row[0])
        CO2 = data['CO2']
        CO = data['CO']
        O2 = data['O2']
        H2S = data['H2S']
        VOC = data['VOC']
        Temp = data['Temperature']
        Hum = data['Humidity']
        print(data)
 
        return VOC
 
        db.commit()
 
        curs.close()
 
if __name__=='__main__':
        app.run(host='0.0.0.0',port=5000)
 
db.close()
cs

 

+ Recent posts