항해 개발일지(23.03.23)-4
[Flask - 서버만들기]
1. 원하는 폴더로 이동 한다.
2. app.py를 만든다.
3.터미널을 켠다.
4. 가상환경을 잡는다.
python -m venv venv
3.8.6 64bit를 클릭 한 다음
venv 클릑!
app.py의 터미널을 껐다가 다시 새 터미널을 켜주면
(venv)로 잡히게된다.
<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)
기본적인 flask의 사용법을 익혀보았다.
이렇게 파일을 만들고 (오타없이 만드는 것이 중요!!)
<!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>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>index.html 파일에 코드를 입력한 후
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)app.py에 코드를 적어주는데
이부분을 적어주어야 index.html에 쓴 코드가 app.py에 적용이 된다.
[API만들기]
* GET 요청 : 통상적으로 데이터 조회(Read)를 요청할 때, 사용
ex) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
* POST 요청 : 통상적으로 데이터 생성(Create),변경(Update),삭제(Delete) 요청 할 때 사용
ex) 회원가입, 회원탈퇴, 비밀번호 수정 → 데이터 전달 : 바로 보이지 않는 HTML
<화성에 땅 사놓기 웹 만들기> ------POST연습(주문 저장하기)
1. 데이터 명세
: 어떤 데이터를 보내야하는지 목록 정하기!
● URL=/mars, 요청방식 = POST
● 클라(fetch) → 서버(flask) : name, address, size
● 서버(flask) → 클라(fetch) : 메시지를 보냄(주문완료!)
2. 클라이언트와 서버 연결 확인하기
: 서버 코드 인 app.py와 클라이언트 코드 인 index.html 만들기
3. 서버부터 만들기
: 받을 곳을 만드는것
- dbmongo와 연결시켜라
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.nc1oqq4.mongodb.net/?retryWrites=true&w=majority')
db = client.dbspartaflask 코드 밑에 pymongo 코드 넣어주기
4. 클라이언트 만들기
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("address_give", address);
formData.append("size_give", size);
fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload()
});
}<화성에 땅 사놓기 웹 만들기> ------GET연습(주문 보여주기)
데이터베이스까지 완성했으니 이제 이름, 주소, 평수를 기입하면 저장하여 화면에 띄우기를 할 것이다.
이번에도 순서는 위와 동일.
1.데이터 명세
● URL=/mars, 요청방식 = GET
● 클라(fetch) → 서버(flask) : 없음
● 서버(flask) → 클라(fetch) : 전체 주문을 보내주기
2. 클라이언트와 서버 연결 확인하기
[서버 코드 - app.py]
@app.route("/mars", methods=["GET"])
def mars_get():
return jsonify({'msg': 'GET 연결 완료!'})[클라이언트 코드 - index.html]
$(document).ready(function() {
show_order()
})
function show_order() {
fetch('/mars').then((res) => res.json()).then((data) => {
console.log(data);
alert(data["msg"]);
});
}3. 서버부터 만들기
result에 주문정보를 담아서 내려주기
@app.route("/mars", methods=["GET"])
def mars_get():
mars_data = list(db.mars.find({},{'_id':False}))
return jsonify({'result':mars_data})4. 클라이언트 만들기
- 주문정보는 리스트 형식이기때문에 forEach문으로 반복하여 데이터 내보내기
- 뽑아낸 데이터는 temp_html에 담아주기
- 담아준 temp_html을 넣을 자리를 찾아 jQuery로 aapend
function show_order() {
$("#order-box").empty();
fetch('/mars').then((res) => res.json()).then((data) => {
let rows = data['result']
rows.forEach((a) => {
let name = a["name"];
let address = a["address"];
let size = a["size"];
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`;
$("#order-box").append(temp_html);
});
});
}
오늘도 어찌저찌 따라 가기는 했다.
오늘 숙제는 답안을 보지 않고 혼자 뚝딱 하긴 했는데, 아직까지는 100%이해된 상태가 아니라서 어리둥절하게 완성한 숙제..ㅋㅋㅋㅋㅋ
계속 반복하며 들으면서 따라하면 이해가 되는 것일지,,