반응형
AWS의 인스턴스 가상서버에서 ubuntu계정에 모든 환경 설정을 완료해놓았다.
https://ssongblog.tistory.com/155?category=902879
[Flask] Flask 사용을 위한 환경설정
Flask란? Flask는 웹 어플리케이션 개발을 위한 파이썬 프레임워크이다. Flask는 Django보다 가볍고 micro한 웹 서비스를 지향해서 초보자가 접근하기 쉽고, 확장성도 좋다. Flask 사용을 위한 환경설정 1.
ssongblog.tistory.com
Jupyter Notebook에 접속하여 Flask 실습을 해보고자 한다.
- Flask를 설치한다.
!pip install flask
conda install -c anaconda flask # 콘다 환경에서 설치 시- 프로젝트를 생성한다.
!rm -rf hello
!mkdir -p hello/static
!mkdir -p hello/templates
!touch hello/hello.py
!touch hello/templates/profile.html
!tree hello[실행 결과]
- hello.py
- was의 app객체를 생성하는 파일
- route 설정 : request를 받기위한 코드 작성
- static
- 자바스크립트, css, image 파일등 정적인 코드 파일을 저장
- templates
- html 코드를 저장
*tree명령어를 사용하려면 터미널에서 tree를 설치해줘야한다.
sudo apt-get install tree
- hello.py 작성
hello/hello.py에 overwriting한다.
%%writefile hello/hello.py
from flask import *
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello Flask"
# returns an HTML webpage
@app.route("/user/<username>")
def user(username):
return render_template('profile.html', name=username)
# retruns a piece of data in JSON format
@app.route("/people")
def people():
people = {"alice": 25, "jin":35}
return jsonify(people)
# run was
app.run(debug=True)
- profile.html 작성
hello/templates/profile.html에 overwriting한다.
%%writefile hello/templates/profile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask Basic</title>
</head>
<body>
Hello {{name}}
<button id="getData">Get Data</button>
<div class="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#getData").click(function() {
$.getJSON("/people", function(data) {
console.log(data);
var tag = "<p>alice : " + data.alice + "</p>";
tag += "<p>jin : " + data.jin + "</p>";
$(".result").html(tag);
})
})
})
</script>
</body>
</html>
- hello.py코드를 실행시킨다.
!python hello/hello.py
http://127.0.0.1:5000 창을 열어보면 hello.py파일이 실행된 것을 알 수 있다.
또한, 페이지를 성공적으로 열면 200메시지가 뜨면서 연결이 되었음을 확인할 수 있었다.
반응형
'Skills > Flask' 카테고리의 다른 글
| [Flask] ngrok과 nginx 설치하기 (0) | 2021.11.21 |
|---|---|
| [Flask] Flask 사용을 위한 환경설정 (0) | 2021.11.21 |
