데일리로그C:
article thumbnail
Published 2022. 6. 27. 21:13
22.06.27(월) Python/Web_log

서버

   --> 컴퓨터에 돌아가고 있는 하나의 프로그램 

 

로컬 개발 환경

   --> 컴퓨터 한대로 클라이언트 = 서버

 

 

로컬 개발 환경에 필요한 파일, 폴더

1) app.py

   --> 서버를 돌아가게 만드는 파이썬 파일 이름(통일시키기★)

 

2) static

   --> CSS나 이미지 파일들을 담아둘 때 사용하는 폴더(잘 사용 X)

 

3) templates

   --> html 파일들을 담아두는 폴더(통일시키기★)

 

 

프레임워크  : flask

   --> 남이 짜둔 어떤 규칙이나 틀 안에서 코딩을 자유롭게 할 수 있음

   --> 하나의 프레임워크 안에서 짜야 함

 

 

라이브러리 : 3주차에서 사용했던 것들

   --> 내가 내 맘대로 짜는데 남이 만들어놓은걸 중간중간 자유롭게 가져다 씀

   --> 백개든 천개든 가져올 수 있음

 

 

flask

   --> 기본 세팅(app.py에 작성)

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)   --RUN-----> running ~~~~ 뜸

        ㄴ> 크롬 창에 localhost:5000 검색했을 때 This is home! 뜨면 잘 된거임!!

              ( localhost:5000으로 내 컴퓨터에 서버를 돌리고 있고, 크롬 열어서 그 서버에 접속한거임)

 

   --> 서버에 가져다 줄 index.html 기본세팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>서버를 만들었다!</h1>
</body>
</html>
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')   ---> 주소창 엔터하면 여기로 들어와서
def home():   -------> home 함수실행
   return render_template('index.html')  ---------> index.html 에 작성된 내용을 서버가 그려줌

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

 

 

API ( = 은행 창구) : 클라이언트가 요청( 타입 : GET, POST)  ⇔ 서버가 답

 

1) GET :  데이터 조회(Read)  ex) 영화 목록 조회

   --> 요청 URL :  http:// 서버 주소/ 창구이름?고객이 가지고 가는 데이터1&데이터2

                              ㄴ> ? : 전달할 데이터가 작성된다

                              ㄴ> & : 전달할 데이터가 더 있다

 

   --> GET 요청 API 코드

import request, jsonify

@app.route('/test', methods=['GET'])  ------> url은 /test, 타입은 GET 
def test_get():
   title_receive = request.args.get('title_give')  ---> title_give로 얻은 값 가져와봐!
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

             ㄴ> 즉, 고객인 Ajax로 콜을 해서 그 Ajax로 가지고 온 것을 API에서 처리해서 response 줌

                         그 response를 고객 Ajax가 response해서 console.log 찍어서 볼 수 있게 함

 

 

   --> GET 요청 확인 Ajax 코드(5000 페이지 console에 입력)

> $.ajax({
       type: "GET",
       url: "/test?title_give=봄날은간다", ---> GET 요청은 ? 기준!!, title_give 이름으로 봄날은간다 값 가져옴
       data: {},
       success: function(response){
             console.log(response)
       }
   })

< { msg : '이 요청은 GET!', result : 'success' }

      ㄴ> response : 서버 쪽에서 내려준 값

 

 

 2) POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 ex) 회원가입, 회원탈퇴, 비번 수정

   --> POST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

 

   --> POST 요청 확인 Ajax 코드

> $.ajax({
        type: "POST",
        url: "/test",
        data: { title_give:'봄날은간다' },
        success: function(response){
              console.log(response)
        }
   })

< { msg : '이 요청은 POST!', result : 'success' }

 

에러 보는  꿀팁!!

   ---> INTERNAL SERVER ERROR : 서버 에러이므로 app.py RUN 화면에서 에러 봐야함!!

 

 

Project 모두의 책리뷰

  ㄴ> flask, pymongo 패키지 설치

<app.py(서버) 기본세팅>

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'])   --------> POST와 /review로 요청을 해서
def write_review():
    sample_receive = request.form['sample_give'] ---> sample_give 가져갔고
    print(sample_receive)
    return jsonify({'msg': '이 요청은 POST!'})  ----> response로 데이터가 넘어옴


@app.route('/review', methods=['GET']) 
def read_reviews():
    sample_receive = request.args.get('sample_give')  ---> sample_give라는 이름으로 데이터 받음
    print(sample_receive)
    return jsonify({'msg': '이 요청은 GET!'})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
<index.html 기본세팅>

<!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();     ----> 로딩되자마자 불림
            });

            function makeReview() {
                $.ajax({
                    type: "POST",
                    url: "/review",  
                    data: {sample_give:'샘플데이터'},
                    success: function (response) {
                        alert(response["msg"]);  ----> app.py에서 설정한 메세지 뜸
                        window.location.reload();
                    }
                })                  
            }

            function showReview() {
                $.ajax({
                    type: "GET",
                    url: "/review?sample_give=샘플데이터",
                    data: {},
                    success: function (response) {
                        alert(response["msg"]);
                    }
                })
            }
        </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: 50px;
            }
        </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">
                    <tr>
                        <td>왕초보 8주 코딩</td>
                        <td>김르탄</td>
                        <td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>

</html>

 

1. 리뷰저장(POST)

   --> 순서 : 클라이언트와 서버 확인하기 > 서버부터 만들기 > 클라이언트 만들기 > 완성 확인

   --> 서버 역할 : 제목, 저자, 리뷰를 작성하면 그걸 받아서 DB에 저장

 

 1) app.py 작성 

## 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)    ----> DB에 저장!

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

 

 2) index.html 작성

    --> input 박스에 작성 후 리뷰작성하기 버튼 클릭 > robo에서 확인

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

    ㄴ> JQuery 로 input 박스 값 가져오기 & 입력하기

 

 

2. 리뷰 보여주기(GET)

   --> 순서 : 클라이언트와 서버 확인하기 > 서버부터 만들기 > 클라이언트 만들기 > 완성 확인

   --> 서버 역할 : 클라이언트한테 받을 데이터는 X, 모든 리뷰를 DB에서 가져와서 내려주기만!!!

   --> 클라이언트 역할 : for문을 돌면서 리뷰들을 붙여주면 됨

 

 1) app.py 작성

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

     ㄴ> pymongo 여러개 찾기 : same_ages = list(db.users.find({'age':21},{'_id':False})) 사용!!

 

2) index.html 작성

<!--반복문 돌릴 때 필요한 요소-->

<span class="input-group-text">제목</span>
<input type="text" class="form-control" id="title">

<span class="input-group-text">저자</span>
<input type="text" class="form-control" id="author">

<span class="input-group-text">리뷰</span>
<textarea class="form-control" id="bookReview" ~~~>


<!--temp_html 작성 시 필요한 요소-->
<tbody id="reviews-box">
<tr>
    <td>왕초보 8주 코딩</td>
    <td>김르탄</td>
    <td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
</tr>


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

                    }
                })
            }

    ㄴ> 클라이언트가 가져갈 데이터가 없으므로 url: "/review?sample_give=샘플데이터" 표시부분 없애기

 

 

3. 완성본

저작자표시

'Python > Web_log' 카테고리의 다른 글

22.06.29(수)  (0) 2022.06.29
22.06.28(화)  (0) 2022.06.28
22.06.24(금)  (0) 2022.06.24
22.06.23(목)  (0) 2022.06.23
22.06.04  (0) 2022.06.23
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그

짱구인형
몽고DB
서버
PROJECT
HTML
파이썬
3주차
5주차
스파르타
나홀로메모장
코딩오류
그림
데이터베이스
자바스크립트
.value
모두의책리뷰
Robo3T
CSS
적응중..
on속성
4주차
웹개발
AWS
좋아연
메디방
MongoDB
코딩
개발일지
앱개발
포뇨

티스토리툴바