웹개발종합반 4주차 - 숙제 : 나홀로쇼핑몰 완성
2022. 1. 4. 01:42ㆍ코딩공부/스파르타코딩클럽 - 웹개발종합반
숙제 : 나홀로쇼핑몰 완성
📃 **1주차에 완성한 쇼핑몰을 완성해주세요!**
쇼핑몰은 두 가지 기능을 수행해야 합니다.
1) 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가
2) 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기
나홀로쇼핑몰 API(app.py)
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']
adress_receive = request.form['adress_give']
number_receive = request.form['number_give']
# DB에 삽입할 order 만들기
doc = {
'name': name_receive,
'count': count_receive,
'adress': adress_receive,
'number': number_receive
}
# orders에 order 저장하기
db.aloneshop.insert_one(doc)
# 성공 여부 & 성공 메시지 반환
return jsonify({'msg': '주문이 성공적으로 작성되었습니다.'})
# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
# 1. DB에서 리뷰 정보 모두 가져오기
orders = list(db.aloneshop.find({}, {'_id': False}))
# 2. 성공 여부 & 리뷰 목록 반환하기
return jsonify({'all_orders': orders})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
클라이언트(index.html)
<script>
$(document).ready(function(){
showOrder();
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rates = response['rate']
let temp_html = `<span>달러-원 환율 : ${rates}`
$('#names-q1').append(temp_html)
}
})
});
function makeOrder() {
let name = $("#name").val()
let count = $("#count").val()
let adress = $("#adress").val()
let number = $("#number").val()
// 화면에 입력된 데이터를 jquery로 가지고 온다
// post/ review에 저장(create)을 요청합니다.
$.ajax({
type: "POST",
url: "/order",
data: { name_give: name, count_give: count, adress_give: adress, number_give: number },
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showOrder() {
$.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 adress = orders[i]['adress']
let number = orders[i]['number']
let temp_html = `
<tr>
<td>${name}</td>
<td>${count}</td>
<td>${adress}</td>
<td>${number}</td>
</tr>
`
$('#order-box').append(temp_html)
}
}
})
}
</script>