프론트엔드와 백엔드를 통합하는 과정까지 배웠다.
처음에는 헷갈렸지만 코드 하나하나 이해하다보니 재밌었고, 신기했다.
더알아가고 싶은 생각도 많아졌다.
나의 원페이지 쇼핑몰에다가 get과 post를 통해 내가 주문을 하면 mongodb에도 저장이되고, 바로 리스트로 보여줄수 있는 기능을 구현했다.
혼자 했을 때 뿌듯함은 정말 컸다.
import 부분
import requests
from bs4 import BeautifulSoup
from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
기본설정
client = MongoClient('localhost', 27017) # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta # 'dbsparta'라는 이름의 db를 만듭니다.
app = Flask(name)
html 연결
#HTML을 주는 부분
@app.route('/')
def home():
return render_template('shop_clock.html')
listing 'get'
@app.route('/order', methods=['GET'])
def listing():# 모든 document 찾기 & _id 값은 출력에서 제외하기 result = list(db.orders.find({}, {'_id': 0})) # orders라는 키 값으로 주문정보 내려주기 return jsonify({'result': 'success', 'orders': result})
posting(저장) 'post'
@app.route('/order', methods=['POST'])
def saving():# 클라이언트로부터 데이터를 받는 부분 name_receive = request.form['name_give'] count_receive = request.form['count_give'] address_receive = request.form['address_give'] phone_receive = request.form['phone_give']
# meta tag를 스크래핑 하는 부분
# headers = {
# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
# data = requests.get(url_receive, headers=headers)
#
# soup = BeautifulSoup(data.text, 'html.parser')
#
# og_image = soup.select_one('meta[property="og:image"]')
# og_title = soup.select_one('meta[property="og:title"]')
# og_description = soup.select_one('meta[property="og:description"]')
#
# url_image = og_image['content']
# url_title = og_title['content']
# url_description = og_description['content']
# mongoDB에 넣는 부분
order = {'name': name_receive, 'count': count_receive, 'address': address_receive,
'phone': phone_receive}
db.orders.insert_one(order)
return jsonify({'result': 'success'})연결
if name == 'main':
app.run('0.0.0.0', port=6600, debug=True)
그리고 javascript부분에도 코드수정해야한다
function order(){
let name = $('#input_name').val();
let count = $('#input_count').val();
let address = $('#input_address').val();
let phone = $('#input_phone').val();
let regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
if(name==''){
alert('이름을 입력하세요!');
$('#input_name').focus();
return false;
}else if(count=='--- 수량을 선택하세요 ---'){
alert('수량을 입력하세요!');
$('#input_count').focus();
return false;
}else if(address==''){
alert('주소를 입력하세요!');
$('#input_address').focus();
return false;
}else if(phone==''){
alert('핸드폰번호를 입력하세요!');
$('#input_phone').focus();
return false;
}else if (!regExp.test(phone)) {
alert('핸드폰번호는 000-0000-000 로 입력해주세요');
return;
}
**posting(name,count,address,phone);**
}
posting함수로 간다
function posting(name,count,address,phone) {
// 우리가 크롬 콘솔창에서 썼던 그 코드!
$.ajax({
type: "POST", // POST 방식으로 요청하겠다.
url: "/order", // /post라는 url에 요청하겠다.
data: { name_give: name, count_give: count, address_give: address, phone_give: phone }, // 데이터를 주는 방법
success: function(response){ // 성공하면
if (response['result'] == 'success') {
alert('주문완료!');
window.location.reload();//페이지 리로드
} else {
alert('서버 오류!')
}
}
})
}
// 페이지를 열면, 새로고침 하면,
$(document).ready(function(){
//$('#order_check').html('');
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++) {
add_table(orders[i]['name'],orders[i]['count'],orders[i]['address'],orders[i]['phone'])
}
} else {
alert('주문을 받아오지 못했습니다');
}
}
})
}
add_table()로 갈것. 화면이 보여주기
function add_table(name,count,address,phone){
let temp_html = ''+'' + name + ''+'' +count + ''+'' + address + ''+'' + phone +''+'';
$('#order_check').append(temp_html);
}
