짧은 정리
flask
파일 꼭 이름 같게 만들기
서버 구축
API 만들기
get,post 방식
서버에 요청할때 Ajax 로 콜 !!
1.클라이언트와 서버 확인하기
2.서버부터 만들기
3.클라이언트 만들기
4.완성 확인하기
프로젝트 설계
1.만들 API 설계하기
나홀로 메모장
!데이터 저장
!!이미지,제목,링크,요약,코멘트 저장
막힘
input박스 자체에 ID를 주어야 그 박스안에 입력한 것들을 가져올수 있음
POST형식으로 받아오는데에서 막히는 부분이 있었다.
느낌
서버단에서의 api 요청에대한 처리 와 프론트 단에서의 처리 에 대한 개념이 헷갈린다. 차차 프로젝트를 많이 해보면서 숙달 시키면서 자연스럽게 이해가 되게끔 해야 할것 같다.
숙제
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbhomework
## HTML 화면 보여주기
@app.route('/')
def homework():
return render_template('index.html')
# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
name_receive = request.form['name_give']
count_receive = request.form['count_give']
address_receive = request.form['address_give']
call_receive = request.form['call_give']
doc = {
'name': name_receive,
'count': count_receive,
'address': address_receive,
'call': call_receive
}
db.shopping.insert_one(doc)
return jsonify({'msg': '저장 완료'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
shoppings = list(db.shopping.find({}, {'_id': False}))
return jsonify({'all_shopping': shoppings})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Jua', sans-serif;
}
.image {
width: 600px;
height: 400px;
margin: 30px auto;
background-image: url("https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_1055754%2F10557549622.20170916043402.jpg&type=sc960_832");
background-size: cover;
background-position: center;
}
.ment {
width: 600px;
height: 400px;
margin: auto;
}
.price {
font-size: 20px;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.blue {
color: blue;
}
</style>
<script>
$(document).ready(function () {
showReview();
});
function q1() {
$('#change').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rows = response['rate']
$('#change').text(rows);
// let temp_html = '';
// temp_html = `<p class="blue">달러-원 환율:${rows}</p>`
// console.log(temp_html);
// $('#change').append(temp_html)
}
}
)
}
function order() {
let name = $('#order-id').val();
let count = $('#inputGroupSelect01').val();
let address = $('#order-address').val();
let call = $('#order-call').val();
$.ajax({
type: "POST",
url: "/order",
data: {name_give: name, count_give: count, address_give: address, call_give: call},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showReview() {
$.ajax({
type: "GET",
url: "/order",
data: {},
success: function (response) {
let shopping = response['all_shopping']
for (let i = 0; i < shopping.length; i++) {
let name = shopping[i]['name']
let count = shopping[i]['count']
let address = shopping[i]['address']
let call = shopping[i]['call']
let temp_html = ` <tr>
<td>${name}</td>
<td>${count}</td>
<td>${address}</td>
<td>${call}</td>
</tr>`
$('#reviews-box').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<div class="image">
</div>
<div class="ment">
<h1>향초를 팝니다. <span class="price">가격:3000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 가지고 있어요 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나사가세요.! 대나무향이 아주 좋아요</p>
<p class="blue">달러 환율 <span id="change">1215.15</span></p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default1">주문자이름</span>
</div>
<input type="text" id="order-id" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>수량을 선택하세요</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default2">주소</span>
</div>
<input type="text" id="order-address" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default2">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default3">전화번호</span>
</div>
<input type="text" id="order-call" class="form-control" aria-label="Default"
aria-describedby="inputGroup-sizing-default3">
</div>
<p class="lead">
<a onclick="order()" class="mybtn btn-primary btn-lg" href="#" role="button">주문하기</a>
</p>
<div class="reviews">
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">수량</th>
<th scope="col">주소</th>
<th scope="col">전환번호</th>
</tr>
</thead>
<tbody id="reviews-box">
</tbody>
</table>
</div>
</div>
</body>
</html>
성장하는개발자