파이썬패키지 - Flask 활용 (GET타입 & POST타입)

웹개발 종합반

파이썬패키지 - Flask 활용 (GET타입 & POST타입)

S_sunny 2022. 8. 12. 18:22

1. flask 폴더 기본 세팅

프로젝트 폴더 안에,

ㄴstatic 폴더 생성

ㄴtemplates 폴더 생성

ㄴapp.py 파이썬 파일 생성

2. 패키지 설치

Flask (서버생성)

pymongo (데이터베이스 접근)

dnspython (데이터베이스 접근)

requests (크롤링)

bs4 (크롤링)

-----------조각기능 구현 (기능_prac.py)-------------

예시 : meta태그 크롤링

1) 사용기능 명시

import requests
from bs4 import BeautifulSoup

2) 크롤링 기본 코드 + meta tag 가져오고 print 해보기 (작동 가능 확인)

url = '크롤링할_URL'
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

image = soup.select_one('meta[property="og:image"]')['content']
title = soup.select_one('meta[property="og:title"]')['content']
description = soup.select_one('meta[property="og:description"]')['content']

print(image,title,description)

-------------------------------------------------------------------

3. index.html 파일 templates 폴더안에 생성.

4. 뼈대 띄우기 - 서버와 HTML파일 연결

1) 위쪽에 사용 기능 명시

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

2) render_template 함수 명령

@app.route('/')
def home(): 
	return render_template('index.html') 
    
if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)

5. 서버 연결하기

1) HTML파일에 Jquery 임포트

ajax를 사용하기 위해 <head> 사이에 입력

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2) 파이썬 파일에 기능명시 추가 (request, jasonify)

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

6. POST용 API 구축 (서버코드)

받을 데이터 확인, 줄 데이터 확인, 취할 행동 확인

1) 받은 데이터 이름변수 설정

@app.route('/test', methods=['POST'])
def test_post():
   서버에서_정한_이름변수 = request.form['준다한거']
   title_receive = request.form['title_give']
   #데이터 받고나서 할일 명령
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

2) 조각기능 붙여넣기 (기능명시추가 , 크롤링 코드)

3) 수집한 데이터 DB에 데이터 저장하기 (mongoDB)

기능명시 추가

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta

db에 연결하고 데이터 추가

doc = {
	'DB에저장할_이름':서버에서_정한_이름변수,
 	'title':title_recive,
    }
db.컬렉션명.insert_one(doc)

7. POST용 API 구축 (클라이언트코드)

html에서 뭘 누르면(id) 요청하는 함수랑 연결된건지 확인, 그 함수 안에서 보낼 데이터 구축

1) 입력되는 값(id값), jQuery 먹여서 가져오고 변수 설정

function posting() {
	let 클라에서_정한_이름변수 = $('#아이디값').val()
    }

2) ajax 콜

준다한거 (sth_give) 이름 변수가 서버코드와 동일해야함. 연결필요

$.ajax({
    type: "POST",
    url: "/test",
    data: { 
    	준다한거:클라에서_정한_이름_변수,
        title_give:'봄날은간다' 
        },
    success: function(response){
       *// 받은 응답으로 뭘 할건지 명령
    }
  })

3) 보낼거 보내고 응답받으면 새로고침 해주기

success : function (response) {
	alert(response['msg'])
    window.location.reload()

=> MongoDB에 클라이언트에서 입력한 데이터들이 정리되어서 저장된다.

8. GET용 API 구축 (서버코드)

클라에서 요청이 오면 데이터 보내주기

1) DB에서 모든 데이터값 찾아오고,

2)카데고리 안에 데이터들을 넣어서 보내주기

->그냥 보내주지 않고 왜 카데고리 안에 넣어서 주나? rows 돌리기 위해서?

@app.route('/test', methods=['GET'])
def test_post():
   order_list = list(db.컬렉션명.find({},{'_id': False}))
   return jsonify({'카데고리명':order_list})

9. GET용 API 구축 (클라이언트코드)

1) ajax 콜. data는 보낼것이 없어 공백

$.ajax({
    type: "GET",
    url: "/test",
    data: {},
    success: function(response){
       *//받은 응답으로 뭘 할건지 명령}

2) 카데고리 안에 데이터들이 있으니 rows i번 돌리기 - 콜솔창에 불러와보고 작동 확인

success: function (response) {
	let rows = response['카데고리명']
    for (let i = 0; i < rows.length; i++) {
    	let 클라에서_보여줄변수_이름 = rows[i]['데이터속_변수이름']
        
        console.log(클라에서_보여줄변수_이름)

3) 작동 잘 되면 뼈대 안에 받은 데이터 붙여넣기

콘솔 명령 지우고,

let temp_html = `넣을 뼈대 위치${클라에서_보여줄변수_이름}`
$('#붙일구역').append(temp_html)