항해99 개발일지

[항해99] 웹개발 종합반 4주차 (내용정리)

펭귄코기 2022. 8. 13. 17:29

지난시간은 클라우드인 mongoDB를 이용해서 서버를 다뤄보았다면

오늘은 로컬서버를 만들어 본다

이때 flask 라는 프레임워크를 이용해서 만든다

 

 

 

 

 

# flask 기본코드

 

 

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)

 

 

 

 

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 규칙

 

 

 

 

 

<!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.5.1/jquery.min.js"></script>
    <title>Document</title>
    
    <script>
    	function hey(){
    		alert('안녕!')
    	}
    </script>
    
</head>
    <body>
    	<button onclick="hey()">나는 버튼!</button>
    </body>
</html>

 

 

 

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 만들기

 

 

 

 

 

받은 값을 개발자가 볼 수 있게 print 로 찍어볼 수 있게 했습니다. 실전에선 print로 찍어주는 것 외에, 여러가지 작업을 할 수 있겠죠?

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

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

 

 

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

 

 

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

 

 

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

 

 

# 프로젝트 설정

패키지다운목록

-flask

-pymongo

-dnspython

-requests

-bs4

 

 

# 조각기능 구현 해보기

크롤링하는것 이라고 생각하면 된다

 

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

 

해당 구조를 가져와서 url에 크롤링할 주소를 적어주면된다

그리고는 print() 해서 뽑아올 내용의 meta의 property를 확인하고

상세 속성도 지정해주면 해당 내용을 크롤링해서 뽑아낼 수 있다

 

title = soup.select_one('meta[property="og:title"]')['content']

image = soup.select_one('meta[property="og:image"]')['content']

desc = soup.select_one('meta[property="og:description"]')['content']

 

 

# 뼈대 준비하기

 

 

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

@app.route('/')
def home():
	return render_template('index.html')
    
@app.route("/mars", methods=["POST"])
def web_mars_post():
	sample_receive = request.form['sample_give']
	print(sample_receive)
	return jsonify({'msg': 'POST 연결 완료!'})
    
@app.route("/mars", methods=["GET"])
def web_mars_get():
	return jsonify({'msg': 'GET 연결 완료!'})
    
if __name__ == '__main__':
	app.run('0.0.0.0', port=5000, debug=True)

 

 

 

<!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">[스파르타코딩클럽] 웹개발 종합반 - 4주차 10
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
		crossorigin="anonymous"></script>
        
	<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">
	<title>선착순 공동구매</title>
    <style>
    * {
        font-family: 'Gowun Batang', serif;
        color: white;
    }
    
    body {
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.aitimes.com/news
        background-position: center;
        background-size: cover;
    }
    
    h1 {
    	font-weight: bold;
    }
    
    .order {
        width: 500px;
        margin: 60px auto 0px auto;
        padding-bottom: 60px;
    }
    
    .mybtn {
    	width: 100%;
    }
    
    .order > table {
        margin : 40px 0;
        font-size: 18px;
    }
    
    option {
    	color: black;
    }
    </style>
    <script>
        $(document).ready(function () {
        	show_order();
        });
        function show_order() {
        	$.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
        	});
        }
        function save_order() {
            $.ajax({
                type: 'POST',
                url: '/mars',
                data: { sample_give:'데이터전송' },
                success: function (response) {
                	alert(response['msg'])
                }
            });
        }
    </script>
</head>
<body>
    <div class="mask"></div>
    <div class="order">
    	<h1>화성에 땅 사놓기!</h1>
    	<h3>가격: 평 당 500원</h3>
    	<p>
    	화성에 땅을 사둘 수 있다고?<br/>
    	앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
    	</p>
        <div class="order-info">
            <div class="input-group mb-3">
                <span class="input-group-text">이름</span>
                <input id="name" type="text" class="form-control">
            </div>
            <div class="input-group mb-3">
            <span class="input-group-text">주소</span>
            <input id="address" type="text" class="form-control">
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="size">평수</label>
            <select class="form-select" id="size">
                <option selected>-- 주문 평수 --</option>
                <option value="10평">10평</option>
                <option value="20평">20평</option>
                <option value="30평">30평</option>
                <option value="40평">40평</option>
                <option value="50평">50평</option>
            </select>
        </div>
    	<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>
    	</div>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">이름</th>
                    <th scope="col">주소</th>
                    <th scope="col">평수</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>홍길동</td>
                    <td>서울시 용산구</td>
                    <td>20평</td>
                </tr>
                <tr>
                    <td>임꺽정</td>
                    <td>부산시 동구</td>
                    <td>10평</td>
                </tr>
                <tr>
                    <td>세종대왕</td>
                    <td>세종시 대왕구</td>
                    <td>30평</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

 

 

https://cloud.mongodb.com/

 

 

MongoDB Cloud

MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services.

www.mongodb.com

app.py (서버) 와 index.html (클라이언트) 를 준비해준다

이때 서버는 post 방식과 get 방식으로 메서드를 준비하고

클라이언트는 서버로 값을 넘겨줄것과 받아서 뿌려줄 메서드를 준비한다

 

 

# post 방식

 

 

 

 

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

 

 

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>

 

 

 

@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': '주문 완료!'})

 

 

 

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

 

 

 

 

 

# get 방식

 

 

 

 

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

 

 

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

 

 

 

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

 

 

 

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

 

 

 

 

 

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

from pymongo import MongoClient
client = MongoClient('내 URL')
db = client.dbsparta

@app.route('/')
def home():
	return render_template('index.html')
    
@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': '주문 완료!'})

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})
    
if __name__ == '__main__':
	app.run('0.0.0.0', port=5000, debug=True)

 

 

<!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/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    	integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
   		crossorigin="anonymous"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">
	
    <title>선착순 공동구매</title>
    
    <style>
        * {
            font-family: 'Gowun Batang', serif;
            color: white;
        }
        
        body {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.aitimes.com/news
            background-position: center;
            background-size: cover;
        }
        
        h1 {
        	font-weight: bold;
        }
        
        .order {
            width: 500px;
            margin: 60px auto 0px auto;
            padding-bottom: 60px;
        }
        
        .mybtn {
        	width: 100%;
        }
        
        .order > table {
            margin : 40px 0;
            font-size: 18px;
        }
        
        option {
        	color: black;
        }
    </style>
    <script>
        $(document).ready(function () {
        	show_order();
        });
        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)
                	}
                }
        	});
		}
        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()
                }
            });
        }
    </script>
</head>
<body>
    <div class="mask"></div>
    <div class="order">
        <h1>화성에 땅 사놓기!</h1>
        <h3>가격: 평 당 500원</h3>
        <p>
            화성에 땅을 사둘 수 있다고?<br/>
            앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
        </p>
        <div class="order-info">
        	<div class="input-group mb-3">
                <span class="input-group-text">이름</span>
                <input id="name" type="text" class="form-control">
        	</div>
        <div class="input-group mb-3">
        	<span class="input-group-text">주소</span>
        	<input id="address" type="text" class="form-control">
        </div>
        <div class="input-group mb-3">
        	<label class="input-group-text" for="size">평수</label>[스파르타코딩클럽] 웹개발 종합반 - 4주차 16
        	<select class="form-select" id="size">
                <option selected>-- 주문 평수 --</option>
                <option value="10평">10평</option>
                <option value="20평">20평</option>
                <option value="30평">30평</option>
                <option value="40평">40평</option>
                <option value="50평">50평</option>
            </select>
        </div>
        <button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">이름</th>
                <th scope="col">주소</th>
                <th scope="col">평수</th>
            </tr>
        </thead>
        <tbody id="order-box">
            <tr>
                <td>홍길동</td>
                <td>서울시 용산구</td>
                <td>20평</td>
            </tr>
            <tr>
                <td>임꺽정</td>
                <td>부산시 동구</td>
                <td>10평</td>
            </tr>
            <tr>
                <td>세종대왕</td>
                <td>세종시 대왕구</td>
                <td>30평</td>
            </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

 

# 최종 결과물

닉네임과 응원댓글을 적고 응원남기기를 하면 아래에 내용이 추가된다

 

 

# 느낀점

진행하다가 도저히 오류가 왜 나는지 모르는 상황을 마주했다

구글링해서 고쳐보려했으나 해결이 되지않아서 일단 미뤄두고

질문을 올린후 다른 강의도 듣고 공부를 이어나가고 오늘이되어

답변을 받았는데 튜터님도 코드가 아무리 봐도 제대로 쳤는데 왜그런지

모르겠다 하시고 새로운 코드를 보내주셨다

그 코드를 붙여넣기 해보니..정상 작동했다.. 그래서 내꺼랑 뭐가 다른가

확인해봤는데 똑같았다..예전에 자바를 배울때도 이런적이 있었다

단순 IDE오류 같은거라고 생각하라 하셨는데 이번에도 그런거였을까..?

어쨌든 그 후에 진도를 잘 나가고 정리도 어느정도 한거같다

​

간단하다 post는 게시,수정,삭제 get은 전체불러오기 정도이고

post는 클라이언트에서 넘어오는값을 받아서 서버에 저장하는용도이고

get은 서버에서 값을 넘겨주면 클라이언트에서 받아 화면에 뿌려준다

​

단지 다루는 언어가 파이썬이고 자바스크립트 라이브러리인 JQuery를 이용해

ajax 방식으로 넘기기 때문에 문법적으로 헷갈리는 단계인거 같다

그래도 계속 반복적으로 하다보니 익숙해지고있는 단계인 것도 같다

​

더 열심히해서 파이썬 자바스크립트도 잘 다룰줄 아는 개발자가 되어야겠다!

 

 

 

 

 

저작자표시 (새창열림)