つ⋅⌄⋅)づ⌁⌁도움⌁⌁⋆
2020.07.28_라즈베리파이-Flask 본문
@app. route("/")
: app은 flask의 __name__이다. (내 파일명 -> 모듈명) __name__은 인자 1개짜리 생성자 (flask 객체)
URL
route = / ==> 하위 구조
https://www.codingfactory.net/10221
HTML / 문법
문법 Contents 위 모든 걸 요소(element)라고 합니다. 을 시작 태그, 을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어
Lorem
는 p 요소라 �
www.codingfactory.net
< Flask 라우팅 >
: URL을 처리하는 방법 = URI 디스패치라고 한다
디스패치는 사용자가 입력한 URI를 보고 분석하여 올바른 길로 안내해주는 역할을 한다
--> 뷰 데코레이션을 통해서 뷰 함수를 생성하여 올바른 길로 안내해주는 역할
< Flask LED 제어 >
1 from flask import Flask, request
2 import RPi.GPIO as GPIO
3 import time
4
5 app = Flask(__name__)
6 GPIO.setmode(GPIO.BCM)
7 GPIO.setup(21, GPIO.OUT, initial=GPIO.LOW)
8
9 @app.route("/")
10 def helloworld():
11 return "Hi"
12
13 @app.route("/led")
14 def led():
15 state = request.values.get("state", "error")
16 if state == "on":
17 GPIO.output(21, 0)
18 elif state == "off":
19 GPIO.output(21, 1)
20 elif state == "error":
21 return "쿼리스트링 strate가 전달되지 않았습니다."
22 else:
23 return "잘못된 쿼리스트링이 전달되었습니다."
24 return "LED "+state
25
26 @app.route("/gpio/cleanup")
27 def gpio_cleanup():
28 GPIO.cleanup()
29 return "GPIO CLEANUP"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HOME NETWORK</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
<body>
<div class="container">
<div class="header">
<h2>HOME IoT</h2>
</div>
<div class="main">
<div>
<button onclick="led_on()">LED ON</button>
</div>
<div>
<button onclick="led_off()">LED OFF</button>
</div>
</div>
<div id="result">
</div>
</div>
<script>
function led_on(){
fetch("/led/on")
.then(response=> response.text())
.then(data=> {
console.log(data);
let result = document.querySelector("#result");
if (data=="ok") {
result.innerHTML = "<h1>LED is running</h1>";
}else{
result.innerHTML = "<h1>error</h1>";
}
});
}
function led_off(){
fetch("/led/off")
.then(response => response.text())
.then(data=> {
console.log(data);
let result = document.querySelector("#result");
if (data=="ok") {
result.innerHTML = "<h1>LED is stopping</h1>";
}else{
result.innerHTML = "<h1>error</h1>";
}
});
}
</script>
</body>
</html>
