GET과 POST를 이용해서 랜덤 질문 추출 기능 구현

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


# API 역할을 하는 부분
@app.route('/contents/get', methods=['GET'])
def contents_get():
    client = MongoClient('localhost', 27017)
    db = client.dbbbackco
    questions = list(db.questions_ko.find({}, {'_id': False}))

    return jsonify({'all_questions': questions})


@app.route('/contents/post', methods=['POST'])
def contents_post():
    question_receive = request.form['question_give']
    answer_receive = request.form['answer_give']

    # db에 저장
    doc = {
        'question': question_receive,
        'answer': answer_receive
    }

    client = MongoClient('localhost', 27017)
    db = client.dbbbackco
    db.contents.insert_one(doc)

    return jsonify({'msg': '저장되었습니다.'})

<script>
        //페이지 로딩시 랜덤 질문 from JSON. 
        window.onload = function () {
            randomStation()
        }


        //버튼 클릭시 랜덤 질문 from JSON. 
        function randomStation() {
            $('#station').empty();

            $.ajax({
                type: "GET",
                url: "/contents/get",
                data: {},
                success: function (response) {
                    let questions = response['all_questions']
                    let i = Math.floor(Math.random() * questions.length)
                    let question = questions[i]['question']
                    let temp_html = `${question}`
                    $('#station').append(temp_html);
                }
            })
        }

        //버튼 클릭시 랜덤 질문 from JSON.
        function postAnswers() {
            let question = $('#station').text()
            let answer = $('#A-input-id').val()

            $.ajax({
                type: "POST",
                url: "/contents/post",
                data: {question_give: question, answer_give: answer},
                success: function (response) { // 성공하면
                    alert(response['msg']);
                }
            })
        }
    </script>

GET - 데이터 조회(read)
POST - 데이터 생성(create),변경(update),삭제(delete)

 

1. GET

구현해야 할 기능

: mongodb로부터 질문 데이터를 받아와서, 질문 페이지 질문란에 랜덤으로 띄우기.

 

구현 방법

- 서버 (app.py)

: db에서 데이터를 내려 받아서 jsonify 이용해서 'all_questions'로 클라이언트 쪽으로 전달!

(mongodb dbname - dbbbackco, collection - question_ko) 

 

- 클라이언트 (html - <script>)

: questions 변수를 만들어 서버로부터 내려온 'all_questions'를 받고, i 변수를 만들어 랜덤 추출 기능을 넣었다.

이 둘을 question으로 묶고, temp_html 사용해서 넣고 싶었던 질문 자리에서 구현될 수 있도록 했다.

 

랜덤 질문 추출 함수

let i = Math.floor(Math.random() * questions.length)

i 변수에 Math.random()이라는 랜덤 함수를 적용. 변수 questions의 길이(수)만큼 랜덤 함수가 돌아갈 수 있도록 함.

 

 

 

2. POST

구현해야 할 기능

: 클라이언트로부터 질문과 답 데이터를 받아 mongodb에 저장.

 

구현 방법

- 서버 (app.py)

: 클라이언트로부터 question_give, answer_give라는 이름의 질문과 답 데이터를 question_receive, answer_receive라는 이름으로 받아와서, question, answer로 mongodb에 저장.

(mongodb dbname - dbbbackco, collection - contents)

 

- 클라이언트 (html - <script>)

: 페이지에 입력된 질문과 답을 question과 answer이라는 변수로 받아 question_give, answer_give라는 이름으로 서버에 전달.

answer은 input box에 적는 내용이라 .val()를 통해서도 text값이 추출되었으나,

question은 db에서 받아오는 질문을 그대로 보여주는 것이라 .val()를 통해서는 text값이 추출되지 않았다.

그래서 question은 .text()를 이용해서 text값을 추출해서 db에 넣었다!
(사실 이게 맞는 방법인지는 잘 모르겠지만 어쨌든 구현이 되었으니 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ.. .text()를 썼을 때 text가 혼자 보라색이 돼서 긴가민가한 부분도 있다.)

 

 

 

< mongodb와 파이썬 연결하기 >

1. app.py에 mongodb 임포트

2. db와 관련된 코드를 쓸 때 먼저 client와 연결하고, db 이름 지정.

(GET과 POST 모두 db 관련 코드 쓰기 전에 넣었다. 안 그러면 db 코드 쓸 때 db에 빨간 밑줄 생기길래!

확실한게 좋아 이렇게 했지만 사실 정확한 원리? 이유?는 잘 모르겠다.)

client = MongoClient('localhost', 27017)
db = client.dbbbackco
questions = list(db.questions_ko.find({}, {'_id': False}))

3. dbprac 폴더 참고해서 내용 구성 (collection 이름은 수정하기!)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

 

 

질문 페이지의 랜덤 질문과 답변 입력

db의 질문 데이터와 클라이언트부터 받아온 질문, 답변 데이터