Just Fighting

[Flask] MongoDB에 데이터 저장하고 받아오기 본문

Web/백엔드

[Flask] MongoDB에 데이터 저장하고 받아오기

yennle 2022. 2. 21. 18:31
728x90

2022.01.19 - [Web/백엔드] - API 만들기

위에 글에 이어서 이번엔 몽고DB에 데이터를 저장하고 불러오는 것을 정리하려고 한다.

 

app.py는 그대로 두고 index.html만 바꿔서

과일을 저장하는 홈페이지를 작성했다.

 

<index.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask 연습</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script>
        $(document).ready(function () {
            show_get();
        });

        function show_get() {
            $.ajax({
                type: "GET",
                url: "/test?title=hello",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })
        }

        function show_post() {
            let fruit = $('#fruit').val() /* 입력값 가져오기 */

            let temp_html = `<li>${fruit}</li>` /* 추가할 html */

            $('#fruit_list').append(temp_html)  /* id가 fruit_list인 태그 안에 추가 */
            $('#fruit').val('');  /* 입력창 비워주기 */

            $.ajax({
                type: "POST",
                url: "/test",
                data: {title: 'Hello!'},
                success: function (response) {
                    console.log(response)
                }
            })
        }

    </script>
    <style>
        html {
            width: 500px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>먹고싶은 과일 저장하기!</h1>
    <hr>
    <div class="input-group mb-3" id="input">
        <input type="text" class="form-control" placeholder="과일 이름" aria-label="과일 이름"
               aria-describedby="button-addon2" id="fruit">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="show_post()">추가</button>
    </div>
    <ul id="fruit_list">
    </ul>
</body>
</html>

 

 

 

데이터 저장과 조회는 아래 게시글에 사용했던 방법을 사용한다.

2022.01.16 - [Web/백엔드] - MongoDB와 Python 연결하기

< 데이터 저장하기 >

index.html에 show_post() 부분을 아래 코드로 바꿔준다.

입력창에 값을 가져와 fruit_name으로 /test에 보내준다.

function show_post() {
            let fruit = $('#fruit').val() /* 입력값 가져오기 */

            let temp_html = `<li>${fruit}</li>` /* 추가할 html */

            $('#fruit_list').append(temp_html)  /* id가 fruit_list인 태그 안에 추가 */
            $('#fruit').val('');  /* 입력창 비워주기 */

            $.ajax({
                type: "POST",
                url: "/test",
                data: {fruit_name : fruit},
                success: function (response) {
                    console.log(response)
                }
            })
        }

그리고 app.py 파일에 test_pots() 를 아래와 같이 바꿔준다.

이 코드는 받은 데이터를 fruit에 넣는다.

이 코드가 정상적으로 실행하기 위해선 몽고DB와의 연결이 우선이다.

위에 링크로 가서 순서대로 연결하면 된다.

@app.route('/test', methods=['POST'])
def test_post():
    fruit_name = request.form['fruit_name']
    doc = {'fruit_name': fruit_name}
    db.fruit.insert_one(doc)
    return jsonify({'msg': '저장 완료'})

데이터 저장은 성공적으로 이루어졌다!

 

 

< 데이터 가져오기 >

index.html에 show_get()을 아래와 같이 바꿔준다. 

show_get()이 실행되면 /test로 가 test_get()함수를 호출한다.

function show_get() {
            $.ajax({
                type: "GET",
                url: "/test",
                data: {},
                success: function (response) {
                    let rows = response['fruits']
                    for(let i=0; i<rows.length; i++) {
                        let fruit = rows[i]['fruit_name']

                        let temp_html = `<li>${fruit}</li>` /* 추가할 html */

                        $('#fruit_list').append(temp_html)  /* id가 fruit_list인 태그 안에 추가 */

                    }


                }
            })
        }

test_get()함수는 fruit에 있는 모든 데이터를 가져와 리턴한다.

@app.route('/test', methods=['GET'])
def test_get():
    fruit_list = list(db.fruit.find({}, {'_id': False}))
    return jsonify({'fruits': fruit_list})

새로고침 하면 아까 넣은 데이터를 확인할 수 있다.

 

 

 

위의 방식은 데이터를 저장할 때 화면에 표시하도록 되어있다.

데이터를 저장할 때마다 저장된 데이터를 불러와서 로드하는 방식으로 코드를 바꿔보자.

 

show_post()에서 POST를 성공적으로 마쳤을 때,

window.location.reload()를 하면 페이지가 새로고침되면서 show_get()을 불러온다.

function show_post() {
            let fruit = $('#fruit').val() /* 입력값 가져오기 */

            $.ajax({
                type: "POST",
                url: "/test",
                data: {fruit_name : fruit},
                success: function (response) {
                    console.log(response)
                    window.location.reload()
                }
            })
        }

 

 

 

전체 코드는 아래와 같다.

<app.py>

3행에 mongodb 연결할 때의 주소는 각자 주소를 써주면 된다.

from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient
client = MongoClient('mongodb+srv://yeeun:[비밀번호]@cluster0.pasxm.mongodb.net/Cluster0?retryWrites=true&w=majority')

db = client.hobby

app = Flask(__name__)

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


@app.route('/test', methods=['GET'])
def test_get():
    fruit_list = list(db.fruit.find({}, {'_id': False}))
    return jsonify({'fruits': fruit_list})


@app.route('/test', methods=['POST'])
def test_post():
    fruit_name = request.form['fruit_name']
    doc = {'fruit_name': fruit_name}
    db.fruit.insert_one(doc)
    return jsonify({'msg': '저장 완료'})


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

 

<index.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask 연습</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script>
        $(document).ready(function () {
            show_get();
        });

        function show_get() {
            $.ajax({
                type: "GET",
                url: "/test",
                data: {},
                success: function (response) {
                    let rows = response['fruits']
                    for(let i=0; i<rows.length; i++) {
                        let fruit = rows[i]['fruit_name']

                        let temp_html = `<li>${fruit}</li>` /* 추가할 html */

                        $('#fruit_list').append(temp_html)  /* id가 fruit_list인 태그 안에 추가 */

                    }


                }
            })
        }

        function show_post() {
            let fruit = $('#fruit').val() /* 입력값 가져오기 */

            $.ajax({
                type: "POST",
                url: "/test",
                data: {fruit_name : fruit},
                success: function (response) {
                    console.log(response)
                    window.location.reload()
                }
            })
        }

    </script>
    <style>
        html {
            width: 500px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>먹고싶은 과일 저장하기!</h1>
    <hr>
    <div class="input-group mb-3" id="input">
        <input type="text" class="form-control" placeholder="과일 이름" aria-label="과일 이름"
               aria-describedby="button-addon2" id="fruit">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2" onclick="show_post()">추가</button>
    </div>
    <ul id="fruit_list">
    </ul>
</body>
</html>

 

 

728x90
저작자표시 비영리 변경금지

'Web > 백엔드' 카테고리의 다른 글

API 만들기  (0) 2022.01.19
Flask 시작하기  (0) 2022.01.19
MongoDB와 Python 연결하기  (0) 2022.01.16
'Web/백엔드' Related Articles more
Comments