Everyday Dev System

웹개발 종합반 4일차 -1 본문

내배캠 초기 학습/웹개발 종합반

웹개발 종합반 4일차 -1

chaeyoung- 2023. 5. 12. 14:27

20230512 1:40 pm - 2:30 pm

Flask 프레임워크

 

Flask 프레임워크 

1. 기초

2. 활용하기

 

 

프레임워크란?  서버라는 어떤 큰 프로젝트를 만들기 위한 큰 라이브러리

 

Flask 기초
1. 가상환경 생성
python -m venv venv
프로젝트 별로 라이브러리를 담아두는 통 -> 가상 환경

2. 터미널 새로 키고 (venv)로 잡혀 있는거 확인하고
플라스크 설치 -> pip install flask

3. flask 시작 코드(하단코드) 실행 후 엑세스 허용

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)


4. 브라우저에서 "localhost:5000" 으로 이동
- 내 컴퓨터에서 내가 만든 웹 서비스에 접속한 것임.

 

 

5. 하단 페이지 생성하기

아래 코드 작성 후 저장 -> "http://localhost:5000/mypage"로 이동

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return 'This is mypage!'


if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

 

 

5. 버튼 생성하기

@app.route('/mypage')
def mypage():
#    return 'This is mypage!'
     return '<button>버튼입니다</button>'

 

Flask 활용

 

1. 프론트엔드와 백엔드 연결하기

- index.html이라는 파일을 Flask라고 하는 파이썬 백엔드 서버가 돌면서 해당 파일을 가져다가 주는 원리

1) templates 폴더 생성 후 index.html 생성. 

 

 

 

 

 

 

2) 아래 코드 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>

    <script>
        function hey(){
            alert('안녕!')
        }
    </script>
</head>
<body>
    <button onclick="hey()">나는 버튼!</button>
</body>
</html>

3) app.py에 index.html을 넣기 위해서 Flask의 render_template 기능을 활용해야 함.

app.py 코드 아래와 같이 수정.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
#    return 'This is mypage!'
#    return '<button>버튼입니다</button>'
     return render_template('index.html')


if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

결과 : 

 

 

'내배캠 초기 학습 > 웹개발 종합반' 카테고리의 다른 글

웹개발 종합반 5일차  (1) 2023.05.13
웹개발 종합반 4일차 -2  (1) 2023.05.12
웹개발 종합반 3일차 -2  (0) 2023.05.10
웹개발 종합반 3일차 -1  (1) 2023.05.10
웹개발 종합반 2일차 - 2  (2) 2023.05.09
'내배캠 초기 학습/웹개발 종합반' Related Articles more