1. 수업목표
1) Flask 프레임워크를 활용해서 API를 만들 수 있다.
2) '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
3) '스파르타피디아' API를 만들고 클라이언트에 연결한다.
2. 배운것들
1) Flask로 서버 만들기
프로젝트 폴더 생성 -> static폴더,templates폴더, app.py 생성 - > flask 패키지 설치(flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음), (pymongo, dnspython 패키지도 설치 : DB이용) -> 시작코드
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)를 입력하고 실행한다.
- @app.route('/')를 수정해서 url을 나눌 수 있다.
- localhost:5000에 접속해서 확인.
2) html파일 불러오기
templates 안에 index.html 만든다 -> flask 내장함수 render_template 이용
from flask import Flask,** render_template**
app = Flask(__name__)
**@app.route('/')
def home():
return render_template('index.html')**
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)통해 불러온다.
3) API 만들기
요청 방식에는 get과 post 방식이 있다.
-get : 데이터 조회(read)
-post : 데이터 생성(create), 변경(update), 삭제(delete)
<post 방법> (주문하기)
클라(ajax)-> 서버(flask) : 데이터를 보냄
서버(flask)->클라(ajax) : 메세지를 보냄(주문완료!))
(1) 클라이언트와 서버 연결
(Post 요청 api 코드)(서버코드)
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form[‘sample_give’]
print(sample_receive)
return jsonify({'msg': ‘연결완료’})(Post 요청 확인 ajax코드)(클라이언트 코드)
$.ajax({
type: "POST",
url: "/test",
data: { sample_give:’데이터전송’ },
success: function(response){
console.log(response)
}
})(2) 서버 만들기
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
doc = {
'name':name_receive,
'address':address_receive,
'size':size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문 완료!'})3)클라이언트 만들기
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: { name_give: name, address_give: address, size_give: size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}(4) 완성 확인하기
DB에 잘 들어갔나 확인
<get 방식> (저장된 주문을 보여주는 것)
(클라(ajax)-> 서버(flask) : 없음
서버(flask)->클라(ajax) : 전체 주문 보여주기)
(1) 클라이언트와 서버 확인
(get 요청 api 코드)(서버 코드)
@app.route('/test', methods=['GET'])
def test_get():
sample_receive = request.args.get(’sample_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})(Get 요청 확인 ajax코드)(클라이언트 코드)
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})(2) 서버만들기
@app.route("/mars", methods=["GET"])
def web_mars_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})(3) 클라이언트 만들기 (응답 받아서 for 문으로)
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}4) meta tag
meta tag는 head부분에 들어가는데 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유시 표시 될 이미지 등의 body 외의 사이트 속성을 설명해주는 태그이다.
5) meta tag 스크래핑 하기
(1) 크롤링 기본 코드 입력
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'
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')(2) 원하는 사이트에 접속해서 검사를 통해 head 부분을 확인한다.
(3) bs4의 select_one을 이용하여 meta tag를 가져온다.
og_image = soup.select_one('meta[property]="og:image"')
print(og_image)(4) 가져온 meta tag의 content를 가져온다.
image = og_image['content']
print(image)(5) content를 DB에 저장한다.
doc = {'image' : image}
db.samples.insert_one(doc)
return jsonify({'msg':'post 연결 완료!'})3. 느낀점, 보완점
이제까지 배워오면서 웹페이지들이 어떻게 만들어지는지 대충 큰 틀을 알 수 있었다. 어떻게 데이터를 요청하고, 데이터를 받아오며, 또 그 데이터를 저장하고, 페이지에 그려주고 이러한 과정을 알 수 있었다. 반복 연습을 통해 물 흐르듯이 만들 수 있도록 해야겠다. 아직까지는 강의에서 보고 시키는 것들만 해서 딱히 막히는 곳은 없는 것 같다. 5주차까지 강의를 다 듣고 파이썬과 자바스크립트 기본 문법 강좌를 들어봐야겠다.
