Flask 그리고 서버와 HTML, DB연동 (웹 개발 종합반 4주차)

황원준·2023년 1월 7일

hanghae99

목록 보기
4/24

Flask를 통해 Python 문법을 통해 서버를 구축해보고, HTML과 DB연동 까지 해보았다.

1. Flask

- 1) Flask란?

Flask는 프레임워크 개념의 프로그램으로서 최소한의 구성요소와 요구사항을 제공하는 "micro" 프레임워크이다.

여기서, 프레임워크는 나만의 정의로 밀키트라고 보면 될 거 같다. 밀키트 처럼 주어진 재료가 다 있고 설명서대로 재료를 넣어서 맛있는 요리를 만드는것 같이 서버를 구동시키는 편한 코드들을 모음. 서버를 구동하려면 필요한 복잡한 일들을 처리해 주는 역할이다.

설치방법로는 파일 - 설정 - Python인터프리터 - "+" 에서 "flask" 를 검색 이후 패키지 설치 하면 간단하게 설치 가능하다.

- 2) Flask를 구동방법

먼저 프로젝트에 app.py라는 스크립트 파일을 만들어 다음과 같은 코드를 실행한다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'Hello World!!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True) // localhost:5000에 접속해보자

이 코드로 Flask로 서버 구축을 하게 된다.

- 3) Flask에서 HTML 파일 주기

프로젝트를 만들기 전 프로젝트 폴더에 필수로 3개를 만들어야 한다.

static 폴더 : 이미지, css파일을 저장
templates 폴더 : html파일을 저장
app.py 파일

templates 폴더에 index.html파일을 만들고 Flask에서 html 파일을 불러올려면

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

@app.route('/')
def home():
   return render_template('index.html')

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

바로 render_template라는 함수를 사용해야 한다.

- 4) Flask에서 API 만들기

API란? 프로그램들이 서로 상호작용 하는 것을 도와주는 매개체다.
나만의 정의로 점원이다. API는 손님(프로그램)이 주문할 수 있게 메뉴(코드)를 정리하고, 주문(명령)을 받으면 요리사(서버)와 상호작용하여 요청된 메뉴(코드에 대한 값)를 전달합니다.

  • GET 요청 API 코드
@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

'title_give'라는 data라는 이름으로 /test 에서 받아서 변수 'title_receive'로 입력해서 받아왔다.

  • GET 요청 확인 ajax코드
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

데이터가 잘 나오면 console창에 response를 띄운다.

  • POST 요청 API 코드
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
  • POST 요청 확인 ajax 코드
$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

완벽하진 않지만, 배우는 입장이기에 차분히 따라가면서 추가해 나가야 겠다.

profile
좋은 개발자가 되기 위해 노력 하는 개린이

0개의 댓글