Web Page 작성 -4

환경 구성

• 아래 그림과 같이 폴더 및 환경 설정을 한다.
  (static / template 폴더 생성 - index.html / app.py 생성)
  
  • flask / bs4 / pymongo / requests package install 필요

app.py 작성

• DB와 연결

    from pymongo import MongoClient

    client = MongoClient('localhost', 27017)
    db = client.dbhomework3

• index.html 실행

    def homework():
    return render_template('index.html')

• POST

	@app.route('/submit', methods=['POST'])
    def save_submit():
      db_name = request.form['app_name']
      db_company_id = request.form['app_company_id']
      db_submit_date = request.form['app_submit_date']
      db_file = request.form['app_file']

      doc = {
          'mongodb_name': db_name,
          'mongodb_company_id': db_company_id,
          'mongodb_submit_date': db_submit_date,
          'mongodb_file': db_file
      }
      db.submit.insert_one(doc)
      return jsonify({'success_msg': 'DB에 저장되었습니다!'})

• GET

    @app.route('/submit', methods=['GET'])
    def view_submit():
        submitters = list(db.submit.find({}, {'_id': False}))
        return jsonify({'all_submitter': submitters})


    if __name__ == '__main__':
        app.run('0.0.0.0', port=5000, debug=True)

index.html 작성

• html 불러올 시 바로 실행

    $(document).ready(function () {
          submit_listing();
     });

• POST

    function submit() {
        let name = $("input[aria-describedby='basic-addon1']").val();
        let company_id = $("input[aria-describedby='basic-addon2']").val();
        let submit_date = $("input[aria-describedby='basic-addon3']").val();
        let file = $("#inputGroupSelect04").val();

        $.ajax({
            type: "POST",
            url: "/submit",
            data: {
                app_name: name,
                app_company_id: company_id,
                app_submit_date: submit_date,
                app_file: file
            },
            success: function (response) {
                alert(response["success_msg"])
                submit_listing()
            }
        })
    }

• GET

    function submit_listing() {
            $.ajax({
                type : "GET",
                url : "/submit",
                data : {},
                success : function (response) {
                    let all_submitters = response["all_submitter"];
                    let submit_html = "";
                    for (let i=0; i < all_submitters.length; i++) {
                        submit_html += `<tr>
                                            <td>${all_submitters[i].mongodb_name}</td>
                                            <td>${all_submitters[i].mongodb_company_id}</td>
                                            <td>${all_submitters[i].mongodb_submit_date}</td>
                                            <td>${all_submitters[i].mongodb_file}</td>
                                       </tr>`

                    }
                    $('tbody').html(submit_html);
                }
            })
        }