웹개발 종합반 프로젝트

flask, pymongo, Jquery의 기능을 사용해 웹페이지를
만들어보자

이름, 주소, 평수를 입력하면 mongodb에 저장,
저장된 데이터를 홈페이지에 다시 붙여준다.

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name':name_receive,
        'address': address_receive,
        'size': size_receive
    }
    db.mars.insert_one(doc)

    return jsonify({'msg':'저장 완료'})

@app.route("/mars", methods=["GET"])
def web_mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})
    
1) 데이터를 받을 변수를 선언하고 db에 저장해준다.
2) 저장된 데이터를 보내준다

  $(document).ready(function () {
  show_order();
});
function show_order() {
  fetch('/mars').then((res) => res.json()).then((data) => {
    let rows = data['result']
    $('#order-box').empty()
    rows.forEach((a)=>{
      let name = a['name']
      let address = a['address']
      let size = a['size']
      
      let temp_html = `<tr>
                          <td>${name}</td>
                          <td>${address}</td>
                          <td>${size}</td>
                       </tr>`
      $('#order-box').append(temp_html)
    })
  })
}
function save_order() {
  let name = $('#name').val()
  let address = $('#address').val()
  let size = $('#size').val()

  let formData = new FormData();
  formData.append("name_give", name);
  formData.append("address_give", address);
  formData.append("size_give", size);

  fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
    console.log(data);
    alert(data["msg"]);
    window.location.reload()
  });
}

1) 이름, 주소, 평수의 값을 가져오고 변수를 할당한다.
2) 서버로 보내줄 값들의 형식을 맞춰주고 데이터를 실어 보내준다.
3) data['result'] = mars_data 서버에서 보내준 
   mongodb에 저장된 값들이다.
4) 반복문을 사용해 rows 값들을 돌면서 temp_html을 활용해
   웹페이지에 붙여준다