22.06.27(월)

서버

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

로컬 개발 환경

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

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

1) app.py

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

2) static

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

3) templates

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

프레임워크 : flask

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

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

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

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

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

flask

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


      
      
      
    
    
      <bash />
    
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 기본세팅


      
      
      
    
    
      <bash />
    
<!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>


      
      
      
    
    
      <bash />
    
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 코드


      
      
      
    
    
      <bash />
    
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 코드


      
      
      
    
    
      <bash />
    
@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 패키지 설치


      
      
      
    
    
      <bash />
    
<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)


      
      
      
    
    
      <bash />
    
<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 작성


      
      
      
    
    
      <bash />
    
## 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에서 확인


      
      
      
    
    
      <bash />
    
      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 작성


      
      
      
    
    
      <bash />
    
@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 작성


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

<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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

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

검색 태그

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역