오랜만에 개발일지 4편

사실 별로 오랜만 아닌듯

어쩌다보니 수강랭킹 2위가 되어버렸다.

현실세계에선 겜창 교사인 내가 스파르타에선 2위 수강생,,?

 

3편에선 파이썬을 이용하여 DB의 입력, 로딩, 수정, 삭제만 간단하게 수행해 봤다.

그래서 이번엔 요전까지 공부한 HTML과 함께 사용하여 웹에서 정보를 받아 DB를 만드는 것을 공부하였다.

 

new project로 폴더를 지정하고 (venv 필요)

app.py와 static,templates 폴더 index.html를 만들어서 넣어준다.

 

이젠 잘 안까먹는데 처음엔 좀 헷갈렸음

 

(클라이언트)

index.html 로 만든 웹 form에서 데이터를 입력받아 서버의 POST의 data로 전송

function makeReview() {
            let title = $(`#title`).val()
            let author = $(`#author`).val()
            let review = $(`#bookReview`).val()

            $.ajax({
                type: "POST",
                url: "/review",
                data: {title_give: title, author_give: author, review_give: review},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

(서버 POST)

data로 들어온 데이터를 양식에 맞추어 DB에 저장 (Robo3T를 이용해 내용물을 확인 할 수 있다.)

## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }

    db.bookreview.insert_one(doc)

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

(서버 GET)

DB에 있는 내용물을 전부 받아온다.

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})

(클라이언트)

GET을 통해 받아온 내용물을 형식에 맞추어 출력한다.

function showReview() {
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    let reviews = response["all_reviews"]
                    for (let i = 0; i < reviews.length; i++) {
                        let title = reviews[i]['title']
                        let author = reviews[i]['author']
                        let review = reviews[i]['review']

                        let temp_html = `<tr>
                                            <td>${title}</td>
                                            <td>${author}</td>
                                            <td>${review}</td>
                                        </tr>`
                        $(`#reviews-box`).append(temp_html)
                    }
                }
            })
        }

$(`#...`) 형식은 id , ${...} 형식은 변수 <- 기억 필요!

 

이번 차시 내내 API에 익숙해지기 위해서 비슷한 내용을 반복적으로 학습하였다.

웹 크롤링과 함께 써보는 등..

 

처음에는 이게 뭔소리요? 했지만, 데이터의 흐름을 어느정도 파악하고 나선 그럭저럭 내용을 적을만했다.

 

숙제도 빨리 끝내버리고 다음 내용을 알아보고싶다. 

 

대충 이런 페이지 였다.

 

아래 사진은 Robo3T 로 본 DB

 

 

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

db.bookreview.insert_one(doc)

 

++ 숙제하다 봐버린 웃긴거

숙제 페이지는 이런식으로 만드세요~ 하고 보여주는 예시 페이지 인데 다들 남겨둔 댓글이 제정신이 아니다 ㅋㅋㅋ

의식의 흐름같은 글들 때문에 뻘하게 웃겨서 붙여봄

 

사실 나도 숙제하면서 이..이게뭐노..? 싶은 순간이 잠깐잠깐 있었,,