01. Flask
-
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) -
static, templates 폴더 만든 후 index.html 파일도 만들기
1) static = image, css 파일 등 넣는 폴더
2) templates = html 파일 넣는 폴더 -
app.py에 flask 내장함수인 render_template 이용해 index.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) -
GET요청 API
1) 데이터 조회 요청할 때 사용
2) url 뒤에 ? 붙여 key=value로 데이터 전달
3) 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!'})4) GET 요청 확인 Ajax코드
$.ajax({ type: "GET", url: "/test?title_give=봄날은간다", data: {}, success: function(response){ console.log(response) } }) -
POST요청 API
1) 데이터 생성, 변경, 삭제 요청할 때 사용
2) HTML body에 key:value 형태로 데이터 전달
3) 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!'})4) POST 요청 확인 Ajax코드
$.ajax({ type: "POST", url: "/test", data: { title_give:'봄날은간다' }, success: function(response){ console.log(response) } })
02. 모두의 책리뷰
- POST 요청
제목, 저자, 리뷰 정보 저장하기
# app.py - insert 사용
@app.route('/review', methods=['POST'])
def write_review():
title_receive = request.form['title_give']
anthor_receive = request.form['anthor_give']
review_receive = request.form['review_give']
doc = {
'title': title_receive,
'anthor': anthor_receive,
'review': review_receive
}
db.bookreview2.insert_one(doc)
#DB에 저장
return jsonify({'msg': '리뷰 작성이 완료되었습니다.'})// index.html - 콘솔창으로 확인하며 하기
function makeReview() {
let title = $('#title').val()
let anthor = $('#author').val()
let review = $('#bookReview').val()
//html내 해당 text넣는 곳 id 넣기
$.ajax({
type: "POST",
url: "/review",
data: {
title_give: title,
anthor_give: anthor,
review_give: review
},
success: function (response) {
alert(response["msg"]);
window.location.reload(); // F5와 같은 역할
}
})
}- GET 요청
저장된 리뷰 화면에 보여주기
# app.py - find 사용
@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview2.find({},{'_id':False}))
# DB에 저장된 리뷰 다 찾기
return jsonify({'all_reviews': reviews})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)// index.html - 콘솔창으로 확인하며 하기
$(document).ready(function () { // html문서의 로딩이 다 끝나면
showReview(); // 즉시 함수 실행
});
// script태그 최상단에 쓰기
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews']
for (let i = 0; reviews.length; i++) {
let title = reviews[i]['title']
let anthor = reviews[i]['anthor']
let review = reviews[i]['review']
let temp_html = `<tr>
<td>${title}</td>
<td>${anthor}</td>
<td>${review}</td>
</tr>`
$('#reviews-box').append(temp_html);
}
}
})
}03. 나홀로 메모장
- meta 태그 스크래핑
meta 태그에 있는 제목, 줄거리, url, imgurl 가져옴
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'
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')
ogtitle = soup.select_one('meta[property="og:title"]')['content']
ogimage = soup.select_one('meta[property="og:image"]')['content']
ogdesc = soup.select_one('meta[property="og:description"]')['content']
# copy selector로 가져온 값이 되지 않는다면 메타태그 속성과 값 붙혀넣기
print(ogtitle,ogimage,ogdesc)head > meta:nth-child(13)
- POST 요청 - 메모하기
# app.py - meta_tag 스크래핑까지 포함
@app.route('/memo', methods=['POST'])
def saving():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
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_receive, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
doc = {
'title': title,
'image': image,
'desc': desc,
'url': url_receive,
'comment': comment_receive
}
db.article2.insert_one(doc)
return jsonify({'msg': '저장이 완료되었습니다.'})// index.html
function postArticle() {
let url = $('#post-url').val()
let comment = $('#post-comment').val()
$.ajax({
type: "POST",
url: "/memo",
data: {
url_give:url,
comment_give:comment
},
success: function (response) { // 성공하면
alert(response["msg"]);
window.location.reload();
}
})
}- GET 요청 - 보여주기
# app.py
@app.route('/memo', methods=['GET'])
def listing():
cards = list(db.article2.find({}, {'_id': False}))
return jsonify({'all_cards': cards})// index.html
$(document).ready(function () {
showArticles();
});
function showArticles() {
$.ajax({
type: "GET",
url: "/memo",
data: {},
success: function (response) {
let cards = response['all_cards']
for (let i = 0; i < cards.length; i++) {
let title = cards[i]['title']
let image = cards[i]['image']
let desc = cards[i]['desc']
let url = cards[i]['url']
let comment = cards[i]['comment']
let temp_html = `<div class="card">
<img class="card-img-top" src="${image}" alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}04. Homework에 POST,GET 기능 붙여보기
- 서버 - POST, GET
# app.py
# POST
@app.route('/order', methods=['POST'])
def write_order():
name_receive = request.form['name_give']
count_receive = request.form['count_give']
address_receive = request.form['address_give']
phone_receive = request.form['phone_give']
doc = {
'name': name_receive,
'count': count_receive,
'address': address_receive,
'phone': phone_receive
}
db.homework2.insert_one(doc)
return jsonify({'msg': '주문이 완료되었습니다.'})
# GET
@app.route('/order', methods=['GET'])
def read_order():
orders = list(db.homework2.find({},{'_id':False}))
return jsonify({'all_orders': orders})- 클라이언트 - POST, GET
// index.html
$(document).ready(function () {
showOrders();
});
// POST
function order() {
let name = $('#name').val()
let count = $('#inputGroupSelect01').val()
let address = $('#address').val()
let phone = $('#phone').val()
$.ajax({
type: "POST",
url: "/order",
data: {
name_give: name,
count_give: count,
address_give: address,
phone_give: phone,
},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
// GET
function showOrders() {
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
let orders = response['all_orders']
for (let i = 0; i < orders.length; i++) {
let name = orders[i]['name']
let count = orders[i]['count']
let address = orders[i]['address']
let phone = orders[i]['phone']
let temp_html = `<tr>
<th scope="row">${name}</th>
<td>${count}</td>
<td>${address}</td>
<td>${phone}</td>
</tr>`
$('#OrderPeople').append(temp_html);
}
}
})
}