나홀로 쇼핑몰
2주차에 만든 페이지에 flask 서버 연결하고 주문하기, 주문 목록 보기 api 만들어서 ajax로 통신
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
## 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']
quan_receive = request.form['quan_give']
add_receive = request.form['add_give']
num_receive = request.form['num_give']
doc = {
'name': name_receive,
'quan': quan_receive,
'add': add_receive,
'num': num_receive
}
db.dbhomework.insert_one(doc)
return jsonify({'msg': '주문 완료'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
orders = list(db.dbhomework.find({}, {'_id': False}))
return jsonify({'all_orders': orders})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)<!doctype html>
<html lang="en">
<head>
<!-- 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>
<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=Nanum+Gothic&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Nanum Gothic', sans-serif;
}
.wrap {
width: 500px;
margin: auto;
}
.rate {
color: blue;
}
.product-image {
width: 500px;
height: 300px;
background-image: url("data:image/jpeg;base64,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");
background-size: contain;
background-position: center;
margin-bottom: 10px;
}
.price {
font-size: 18px;
}
.product-order {
margin-top: 20px;
margin-bottom: 30px;
}
.btn {
display: block;
width: 100px;
margin: auto;
}
.table {
width: 800px;
margin: auto;
}
</style>
<script>
$(document).ready(function () {
// 로딩되는 즉시 밑의 코드 실행
showRate()
viewOrderList()
});
function showRate() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate']
let temp_html = `<p class="rate">달러-원 환율: ${rate}</p>`
$('.product-info').append(temp_html)
}
})
}
function sendOrder() {
let name = $('#name').val()
let quan = $('#quantity').val()
let address = $('#address').val()
let phoneNum = $('#phone-number').val()
$.ajax({
type: "POST",
url: "/order",
data: {name_give:name, quan_give:quan, add_give:address, num_give:phoneNum},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function viewOrderList() {
$.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 quan = orders[i]['quan']
let add = orders[i]['add']
let num = orders[i]['num']
let temp_html = `<tr>
<th scope="row">${name}</th>
<td>${quan}</td>
<td>${add}</td>
<td>${num}</td>
</tr>`
$('#order-list').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="product-image"></div>
<div class="product-info">
<h1>수제버거 <span class="price">price: $10</span></h1>
<p>세상에서 제일 맛있는 수제버거 팝니다.</p>
</div>
<div class="product-order">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주문자 이름</span>
</div>
<input type="text" class="form-control" id="name" placeholder="" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="quantity">수량</label>
</div>
<select class="custom-select" id="quantity">
<option selected>수량 선택</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주소</span>
</div>
<input type="text" class="form-control" id="address" placeholder="" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">전화번호</span>
</div>
<input type="text" class="form-control" id="phone-number" placeholder="" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<button type="submit" onclick="sendOrder()" class="btn btn-primary">주문하기</button>
</div>
</div>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">이름</th>
<th scope="col">수량</th>
<th scope="col">주소</th>
<th scope="col">전화번호</th>
</tr>
</thead>
<tbody id="order-list">
</tbody>
</table>
</body>
</html>'course > spartacoding' 카테고리의 다른 글
| [웹개발 종합반] 5주차 (2) 배포 (런칭) (0) | 2021.11.05 |
|---|---|
| [웹개발 종합반] 5주차 (1) 무비스타 (0) | 2021.11.05 |
| [웹개발 종합반] 4주차 (3) 나홀로 메모장 (0) | 2021.11.04 |
| [웹개발 종합반] 4주차 (2) Flask 활용 (0) | 2021.11.03 |
| [웹개발 종합반] 4주차 (1) Flask 기초 (0) | 2021.11.03 |
