220217 웹개발종합반 - 4주차

44408 단어 이누_겅부중 서버 Flask mongodb atlas Flask

4주차 1회독 회고

오늘은 HTML과 mongoDB Atlas 클라우드 서비스를 연동해서 서버를 사용해봤다! 헷갈리는 게 많았는데 예제를 반복하니까 좀 친근해졌다! 그동안 들었던 주차 중에서 제일 재밌었다 ㅎㅎ

로컬 개발 환경

같은 컴퓨터에 서버도 만들고, 요청도 함!
즉, 클라이언트 = 서버

Flask 프레임워크

서버를 구동시켜주는 편한 코드 모음
서버를 구동하려면 필요한 복잡한 것들을 쉽게 가져다 사용할 수 있음

Flask 시작 코드

통상적으로 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)

Flask : URL 나누기

url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안 됨

from flask import Flask
app = Flask(__name__)

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

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

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

Flask : HTML 파일 불러오기

Flask 서버를 만들 때 기본 폴더 구조
프로젝트 폴더 안에
ㄴ static 폴더 (이미지, css 파일)
ㄴ templates 폴더 (html 파일)
ㄴ app.py 파일

flask 내장함수 render_template를 사용함

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

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

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

Flask : API 만들기

GET, POST 방식 복습
1. GET
: 데이터 조회(Read) 요청 시 사용
: 데이터 전달 시, URL 뒤에 물음표를 붙여 key=value로 전달 (예 : google.com?q=북극곰)
2. POST
: 데이터 생성, 변경, 삭제 요청 시 사용
: 데이터 전달 시, 바로 보이지 않는 HTML body에 key:value 형태로 전달

< GET, POST 요청에서 클라이언트의 데이터를 받는 방법 >

예) 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔을 때

GET 요청 API 코드

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

GET 요청 확인 Ajax코드

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

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

프로젝트 세팅

패키지 설치 : flask, pymongo, dnspython (bs4, requests)

app.py 준비
index.html 준비
mongoDB Atlas 창 띄워두기

POST 연습 (주문 저장)

API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> POST)

요청정보 = URL(/mars), 요청 방식 = POST

클라이언트(ajaxk) -> 서버(flask) : name, address, size

서버(flask) -> 클라이언트(ajax) : '주문 완료!' 메세지를 보냄

1) 클라이언트와 서버 연결 확인
[서버 코드 : app.py]

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

[클라이언트 코드 : index.html]

function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

2) 서버 만들기

name, address, size 정보를 받아 저장

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

3) 클라이언트 만들기

name, address, size 정보를 보냄

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

4) 완성 확인 (DB에 잘들어갔는지 확인)

GET 연습(주문 보여주기)

API 만들고 사용하기 - 저장된 주문을 화면에 보여주기(Read → GET)

요청정보 = URL(/mars), 요청 방식 = GET
클라이언트(ajaxk) -> 서버(flask) : 없음
서버(flask) -> 클라이언트(ajax) : 전체 주문을 보내주기

1) 클라이언트와 서버 확인
[서버 코드 : app.py]

@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

[클라이언트 코드 : index.html]

$(document).ready(function () {
    show_order();
});
function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            alert(response['msg'])
        }
    });
}

2) 서버 만들기

받을 것 없이 order에 주문 정보를 담아서 내려주기

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})

3) 클라이언트 만들기

응답을 잘 받아서 for문으로 붙여주기

function show_order() {
    $('#order-box').empty()
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                  </tr>`
                $('#order-box').append(temp_html)
            }

        }
    });
}

4) 완성 확인
화면 새로고침 시, DB에 저장된 리뷰가 화면에 표시되는지 확인

조각 기능 구현

API에서 수행해야하는 작업 중 익숙하지 않은 것들은 따로 파이썬 파일을 만들어 실행해보고 잘 되었을 때 코드를 붙여넣을 것

meta 태그 스크래핑 (URL 에서 페이지 정보(제목, 썸네일 이미지, 내용) 가져오기)

: 메타 태그 = <head></head> 부분에 들어가며, 눈으로 보이는 body외에 사이트의 속성을 설명해주는 태그 (예 : 구글 검색 시 표시될 설명문, 사이트 제목, 카톡 공유 시 표시될 이미지)
크롤링 기본 코드

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

select_one을 이용해 meta tag를 먼저 가져온다.

og_image = soup.select_one('meta[property="og:image"]')
og_title = soup.select_one('meta[property="og:title"]')
og_description = soup.select_one('meta[property="og:description"]')

print(og_image)
print(og_title)
print(og_description)

가져온 meta tag의 content를 가져온다.

image = og_image['content']
title = og_title['content']
description = og_description['content']

print(image)
print(title)
print(description)

4주차 숙제

comment랑 comments를 헷갈려서 엄청 헤맸당,,

app.py

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:[email protected]/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

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

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name':name_receive,
        'comment':comment_receive
    }

    db.homework.insert_one(doc)

    return jsonify({'msg':'응원 메세지 등록 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments':comment_list})

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>초미니홈피 - 팬명록</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://t1.daumcdn.net/cfile/tistory/99F3D3435C8F7C6901?original');
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function(){
            set_temp()
            show_comment()
        });
        function set_temp(){
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }
        function save_comment(){
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {name_give:name, comment_give:comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }
        function show_comment(){
            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for(let i = 0; i < rows.length; i++){
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`
                        $('#comment-list').append(temp_html)
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div class="mypic">
        <h1>백예린 팬명록</h1>
        <p>현재기온: <span id="temp">36</span>도</p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class="mycards" id="comment-list">

    </div>
</body>
</html>

Author And Source

이 문제에 관하여(220217 웹개발종합반 - 4주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_inuu/220217-웹개발종합반-4주차

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

spring boot maven 여러 main 함수 포장 이상

데이터형식,변수,내장함수1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다