4주차 강의는 정말 멘붕......
따라가는건 보면서 얼추 따라갔지만 막상 숙제로 혼자하려니 진짜 정말 답답하고 멘붕이었다...
겨우겨우 혼자 아는거 위주로 강의를 다시 돌려보면서 했는데 작동을 안해서!!!!!!!!!
결국 질문을 했다!! 진작 질문할껄!!!!
친절하게 뭐가 틀렸는지 다 알려주셔서 해결할 수 있었다.
다행인건 그래도 그동안 강의를 대충들은건 아니여서 왜 틀렸는지는 이해가 잘됐다
좀만 집중하고 세세히 봤으면 몇개는 찾아낼 수 있는것들이었다
그래서 4주차 개발일지는 잊지 않기위해 통으로 메모
<html>
<!doctype html>
<html lang="ko">
<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>
<title>원페이지쇼핑몰</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.all {
width: 600px;
margin: auto;
}
.mytitle {
width: 600px;
height: 300px;
margin-top: 40px;
background-image: url("https://shop-phinf.pstatic.net/20200708_39/15942188083319Ochx_JPEG/%EB%8B%B4%EC%88%98%EC%A7%84%EC%A3%BC_%EB%AA%A9%EA%B1%B8%EC%9D%B4_%EC%B0%A9%EC%9A%A9%EC%83%B7_%ED%99%95%EB%8C%80_S+L.jpg?type=w860");
background-size: cover;
background-position: center;
}
.product_name {
font-size: 25px;
}
.btn-lg {
width: 80px;
margin: auto;
display: block;
font-size: 15px;
}
.real {
color: blue;
}
.table {
margin: auto;
width: 600px;
}
</style>
<script>
$(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 = `<tr>
<th scope="col">${name}</th>
<th scope="col">${count}</th>
<th scope="col">${address}</th>
<th scope="col">${phone}</th>
</tr>`
$('#orders-box').append(temp_html)
}
}
}
})
}
function get_rate() {
// 주문목록 보기 API 연결
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let now_rate = response['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()
// 주문하기 API 연결
$.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()
}
}
})
}
</script>
</head>
<body>
<div class="all">
<div class="mytitle">
</div>
<p></p>
<h1 class=product_name>핸드메이드 담수진주 목걸이
<span class=price>가격: 14,000원/개
</span>
</h1>
<p>손으로 직접 제작한 담수진주 목걸이입니다. 담수진주는 양식장에서 나오는 진주로 크기와 모양이 일정하지 않은 것이 특징입니다. 영롱한 진주 목걸이로 화사한 하루를 연출해보세요~!
</p>
<p id="real" class="real">달러-원 환율 :<span id= "now-rate" class="real2">1219.15</span> </p>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">주문자 이름</div>
</div>
<input id = "order-name" type="text" class="form-control" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<p></p>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">수량</div>
</div>
<select id = "order-count" class="custom-select" aria-label="Input group example" aria-describedby="btnGroupAddon">
<option selected>--수량을 선택하세요--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<p></p>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">주소</div>
</div>
<input id = "order-address" type="text" class="form-control" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<p></p>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">전화번호</div>
</div>
<input id = "order-phone" type="text" class="form-control" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
<p></p>
<button class="btn btn-primary btn-lg" onclick="order()">주문하기</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">수량</th>
<th scope="col">주소</th>
<th scope="col">전화번호</th>
</tr>
</thead>
<tbody id="orders-box">
</tbody>
</table>
</div>
</body>
</html>
<python>
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)
11일 챌린지 덕분에 87강을 11일만에 들어서 강의를 들을 수 있는 시간이 아직 많이 남았따~!
그 안에 여러번 반복해서 듣고 다시 해보고 또 다시 해보면서 더 익숙해지고 어느정도 암기를 해야할 것 같다
코딩 재밌다!!!