원페이지 쇼핑몰 완성하기

원페이지 쇼핑몰 완성하기

728x90

1. 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'] 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.orders.insert_one(doc) return jsonify({'result': 'success', 'msg': '주문 완료!'}) # 주문 목록보기(Read) API @app.route('/order', methods=['GET']) def view_orders(): orders = list(db.orders.find({}, {'_id': False})) return jsonify({'result': 'success', 'orders': orders}) if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)

2. index.html

스파르타코딩클럽 | 부트스트랩 연습하기 * { font-family: 'Jua', sans-serif; } .item-img { width: 500px; height: 300px; background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG"); background-position: center; background-size: cover; } .price { font-size: 20px; } .item-desc { width: 500px; margin-top: 20px; margin-bottom: 20px; } .item-order { width: 500px; margin-bottom: 50px; } .btn-order { margin: auto; width: 100px; display: block; } .wrap { width: 500px; margin: auto; } .rate { color: blue; } $(document).ready(function () { get_rate(); listing(); }); function listing() { $.ajax({ type: "GET", url: "/order", data: {}, success: function (response) { if (response["result"] == "success") { let orders = response['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 = ` ${name} ${count} ${address} ${phone} ` $('#orders-box').append(temp_html) } } } }) } function get_rate() { $.ajax({ type: "GET", url: "https://api.manana.kr/exchange/rate.json", data: {}, success: function (response) { let now_rate = response[1]['rate']; $('#now-rate').text(now_rate); } }) } function order() { let name = $('#order-name').val(); let count = $('#order-count').val(); let address = $('#order-address').val(); let phone = $('#order-phone').val(); $.ajax({ type: "POST", url: "/order", data: {name_give: name, count_give: count, address_give: address, phone_give: phone}, success: function (response) { if (response["result"] == "success") { alert(response["msg"]); window.location.reload(); } } }) } 양초를 팝니다 가격:3,000원/개 이 양초는 사실 특별한 힘을 지니고 있어요! 달러-원 환율: 1219.15 주문자이름 수량 -- 수량을 선택하세요 -- 1 2 3 주소 전화번호 주문하기 이름 수량 주소 전화번호

728x90

반응형

from http://ecogis.tistory.com/155 by ccl(A) rewrite - 2021-08-22 14:26:31