플라스크 기반 원페이지 쇼핑몰 사이트

플라스크 기반 원페이지 쇼핑몰 사이트

728x90

1. app.py

from flask import Flask, render_template, jsonify, request from pymongo import MongoClient # 로컬 클라이언트, 로컬서버 몽고DB # client = MongoClient('localhost', 27017) # db = client.dbsparta # 로컬 클라이언트, 원격서버 몽고 DB # client = MongoClient('mongodb://xxx1xxx:[email protected]', 27017) # db = client.remotesparta # 원격 클라이언트, 원격 서버몽고 DB client = MongoClient('mongodb://web1mhz:web1024@localhost', 27017) db = client.remotesparta app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route('/order', methods=['POST']) def order(): name = request.form['name'] quantity = request.form['quantity'] address = request.form['address'] phone = request.form['phone'] print(name) doc = { 'name': name, 'quantity': quantity, 'address': address, 'phone': phone } db.order_product.insert_one(doc) return jsonify({"성공":"저장완료했습니다."}) @app.route('/order_list', methods=['GET']) def order_list(): order_list = list(db.order_product.find({},{'_id':False})) return jsonify({"order_product": order_list}) if __name__ == '__main__': app.run(host='0.0.0.0', port=5001, debug=True)

2. index.html

4주차 과체 * { font-family: 'Stylish', sans-serif; } .wrap { width: 900px; margin: auto; } h1 { padding: 10px; } .product_img { height: 400px; margin: 20px; background-image: url("https://t1.daumcdn.net/liveboard/glab/cb5d0f07afa04de6b917f855e3a43277.png"); background-size: cover; background-position: center; } .product_content { font-size: 22px; } .order-form { width: 500px; margin-top: 20px; } .product-title { font-family: 'Jua', sans-serif; font-size: 40px; font-weight: bold; color: #333; } .product-price { font-size: 16px; font-weight: normal; } .order_btn { width: 200px; margin: auto; display: block; margin-top: 40px; font-size: 20px; font-weight: bold; } .conv-won { font-size: 20px; color: blue; font-weight: bold; } .mytable { margin-top: 20px; } $(document).ready(function () { // alert('홈페이지 로딩') $.ajax({ type: "GET", url: "https://api.manana.kr/exchange/rate.json", data: {}, success: function (response) { // console.log(response[1]['rate']); let rate = response[1]['rate']; $('#convert_won').text(rate + '원'); } }) order_list() }); function order_product() { let order_name = $('#order_name').val() let order_quantity = $('#order_quantity').val() let order_address = $('#order_address').val() let order_phone = $('#order_phone').val() alert(order_name + '주문완료' + order_quantity + order_address + order_phone); $.ajax({ type: 'POST', url: '/order', data: {name: order_name, quantity: order_quantity, address: order_address, phone: order_phone}, success: function (response) { console.log(response); window.location.reload(); } }) } function order_list() { $.ajax({ type: 'GET', url: '/order_list', data: {}, success: function (response) { console.log(response); let product_list = response['order_product'] for(let i = 0; i< product_list.length;i++){ let name = product_list[i]['name'] let quantity = product_list[i]['quantity'] let address = product_list[i]['address'] let phone = product_list[i]['phone'] let tmp_template = ` ${i+1} ${name} ${quantity} ${address} ${phone} ` $("#order_product").append(tmp_template); } } }) } 불로장생 불로장생초 가격 1,000,000원 / 개 이 상품은 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기돼지 삼형제의 숨결이 고루 녹아 있는... 먹으면 120세까지 살 수 있다는 전설의 명약. 이 상품은 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기돼지 삼형제의 숨결이 고루 녹아 있는... 먹으면 120세까지 살 수 있다는 전설의 명약. 이 상품은 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기돼지 삼형제의 숨결이 고루 녹아 있는... 먹으면 120세까지 살 수 있다는 전설의 명약. 주문하기 달러-원환율 : 주문자 성함 수량 수량을 선택하세요(박스당 10개) 1 박스 3 박스 10 박스 주소 전화번호 주문하기 # 주문자이름 수량 주소 전화번호

728x90

반응형

from http://ecogis.tistory.com/157 by ccl(A) rewrite - 2021-08-24 13:26:12