새 프로젝트
-> MARS 폴더 -> 폴더에 3개 추가 : static / templates / app.py
-> 설정으로 들어가서 패키지 추가 : flask(서버 연결) / pymongo(DB연결) / dnspython(python 꾸미기)
app.py / index.html : 내용 입력
--> flask 쓸 때 templates 폴더 안에 html 들어가야 된다고 지난 강의에서도 설명 했었다.
static : style, css / templates : html / app.py
**mongodb atlas 띄워두기.
============================================================================
** POST 연습 ; 주문 저장
1. 요청정보 : URL=/mars, 요청 방식 = POST
2.클라(ajax) -> 서버(flask): name, address, size
3.서버(flask) -> 클라(ajax): 메시지를 보냄 (주문 완료!)
1. 잘 연결되었는지 확인 --> ok
2. 서버 부터 : 3가지 받아야겠지. name, address, size : 받은 후 저장
3. app.py에서 POST로 받는 곳 확인 --> name, address, size _ receive로 각각 받을 수 있게 정의
4. 서버를 넣어줘야지 . DB : pythonprac -> dbprac 입력 ()그러면 dbprac.py가 프로젝트에 들어간다.
5. dbprac.py의 윗 세줄 입력
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.2imbw.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta
6. 저장 하려면 insert_one()으로 "db.위치.insert_one()" 입력
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = address.form['name_give']
size_receive = size.form['name_give']
doc = {
'name':name_receive,
'address':address_receive,
'size':size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': 'POST 연결 완료!'})
7. 이제 서버에 저장은 끝! 다음에는 front_end로 넘어가서 (index.html)
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: { name_give: name, address_give: address, size_give: size},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
save_order() { 안에 각각 저장할 항목 내용 정의해서 넣기. }
-> ajax로 type, url, data 넘기기.
--> 이렇게 하면 database로 저장하는건 마무리된다.
============================================================================
다음에는 이제 database에서 front_end로 해당 내용을 $('').append(temp_html) 해줘야지!
그러면 순서를 써야되니까, GET 방식으로 DB 내용을 1번부터 끝번까지 가져와야지 .
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size= rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
}
}
});
}
이후에 $('#order-box').append(temp_html) 하면 밑에 붙는다.
'개발자 일지' 카테고리의 다른 글
Javascript -JQUERY 입문 (0) | 2022.01.04 |
---|---|
5주차(2) GET 서버 만든 뒤 내려받기! (0) | 2022.01.04 |
웹개발종합반, 3주차 (0) | 2021.12.28 |
3주차, 개발자일지(1) (0) | 2021.12.28 |
Javascript 기초정리 // 2주차 jquery 연습 (0) | 2021.12.27 |
댓글