ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 21.09.17. 4-6~9강 (프로젝트1. 모두의 책 리뷰)
    일기 2021. 9. 18. 01:02

    [기본 셋팅]

     

    File -> New Project -> \projects\bookreview -> OK

    Location에 \venv 잘 붙어있나 확인, 없으면 써주기

    Base interpreter에 Python38 잘 들어왔나 확인

    Create a main.py welcome script 체크 박스 해제

    -> Create -> This Window -> Terminate(지금 돌아가는 거 끌거냐?)

     

    app.py 파일 만들기

    static 폴더 만들기

    templates 폴더 만들기

     

    File -> Settings -> Project: bookreview -> Python Interpreter -> Flask, pymongo 설치 -> OK

     

     

     

    [POST 연습(리뷰 저장)]

     

    - 제목, 저자, 리뷰 정보 저장하기 (Creat -> POST)

    - 순서 1. 클라이언트와 서버 연결 확인

             2. 서버부터 만들기

             3. 클라이언트 만들기

             4. 핑퐁 완성 확인

     

     

    [서버]

     

    from flask import Flask, render_template, jsonify, request
    app = Flask(__name__)

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

    ## HTML을 주는 부분
    @app.route('/')
    def home():
         return render_template('index.html')

    ## 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': '저장 완료!'})


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


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

     

     

     

     

    [클라이언트]

     

    <!DOCTYPE html>
    <html lang="ko">

    <head>
    <!-- Webpage Title -->
    <title>모두의 책리뷰 | 스파르타코딩클럽</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>

    <!-- 구글폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">

    <script type="text/javascript">

    $(document).ready(function () {
    showReview();
    });
    // showReview는 로딩되자마자 불리고 있음

    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();
    }
    })
    }

    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)
    }
    }
    })
    }
    </script>

    <style type="text/css">
    * {
    font-family: "Do Hyeon", sans-serif;
    }

    h1,
    h5 {
    display: inline;
    }

    .info {
    margin-top: 20px;
    margin-bottom: 20px;
    }

    .review {
    text-align: center;
    }

    .reviews {
    margin-top: 100px;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
    class="img-fluid" alt="Responsive image">
    <div class="info">
    <h1>읽은 책에 대해 말씀해주세요.</h1>
    <p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
    <div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text">제목</span>
    </div>
    <input type="text" class="form-control" id="title">
    </div>
    <div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text">저자</span>
    </div>
    <input type="text" class="form-control" id="author">
    </div>
    <div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text">리뷰</span>
    </div>
    <textarea class="form-control" id="bookReview"
    cols="30"
    rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
    </div>
    <div class="review">
    <button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
    </div>
    </div>
    <div class="reviews">
    <table class="table">
    <thead>
    <tr>
    <th scope="col">제목</th>
    <th scope="col">저자</th>
    <th scope="col">리뷰</th>
    </tr>
    </thead>
    <tbody id="reviews-box">


    </tbody>
    </table>
    </div>
    </div>
    </body>

    </html>

     

     

     

     

    *Memo

     

    - 서버 파이썬 새로 입력하면 브라우저 창 새로고침 하고 확인해보자 (안 하면 오류 뜸)

    - console.log 스펠링 주의 (자꾸 consol.log 라고 씀)

    - 리뷰박스에 작성된 항목 붙여주고 싶을 땐

      반복되는 위치 가져오기 위해 for 반복문 쓰기!

      그리고 temp_html로 명명해주고

      .append 사용해서 붙여주기~

Designed by Tistory.