코딩 공부 네번째

Grolar Kim·2021년 9월 16일
Flaskhtmlpython서버클라이언트
0

코딩 공부 (웹개발-내일배움단)

목록 보기
4/6

파이썬을 활용하여 플라스크 서버를 만들어보았고 서버와 클라이언트의 기초를 배웠다.

Flask서버

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)

종료하는 법

터미널 창 클릭 ctrl + c를 누르면 서버를 종료함

flask 기본 폴더구조

Flask 서버를 만들 때, 항상,
프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일

html 파일 불러오기

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

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
	return render_template('index.html')
if __name__ == '__main__':
	app.run('0.0.0.0', port=5000, debug=True)

API만들기

Get, Post 방식 차이

  • GET
    → 통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회
    → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
    → 예: google.com?q=북극곰
  • POST
    → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정
    → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

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

연습을 위해 [모두의 책리뷰] 만들기

1. 서버 만들기(POST)

app.py에 서버 만들기

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.

  • 제목(title)
  • 저자(author)
  • 리뷰(review)

    따라서 API 기능은 다음 세 단계로 구성되어야 합니다.
  1. 클라이언트가 준 title, author, review 가져오기.
  2. DB에 정보 삽입하기
  3. 성공 여부 & 성공 메시지 반환하기

A. 요청 정보
요청 URL= /review , 요청 방식 = POST
요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'msg'= '리뷰가 성공적으로 작성되었습니다.'

@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': '리뷰가 성공적으로 작성되었습니다.'})

2. 클라이언트 만들기(POST)

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.

  • 제목(title)
  • 저자(author)
  • 리뷰(review)

    따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
  1. input에서 title, author, review 가져오기
  2. 입력값이 하나라도 없을 때 alert 띄우기.
  3. Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기

A. 요청 정보
요청 URL= /review , 요청 방식 = POST
요청 데이터 : 제목(title), 저자(author), 리뷰(review)

B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고
응답 데이터를 보냄

C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'

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

3. 서버 만들기(GET)

API 기능은 다음 단계로 구성되어야 합니다.
1. DB에서 리뷰 정보 모두 가져오기
2. 성공 여부 & 리뷰 목록 반환하기

A. 요청 정보
요청 URL= /review , 요청 방식 = GET
요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'reviews'= 리뷰리스트

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

4. 클라이언트 만들기(GET)

리뷰를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.

  • 제목(title)
  • 저자(author)
  • 리뷰(review)

    따라서 클라이언트 코드는 다음 세 단계로 구성되어야 합니다.
  1. 리뷰 목록을 서버에 요청하기
  2. 요청 성공 여부 확인하기
  3. 요청 성공했을 때 리뷰를 올바르게 화면에 나타내기

    A. 요청 정보
    요청 URL= /review , 요청 방식 = GET
    요청 데이터 : 없음
    B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보
    냄
    C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트
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)
			}
		}
	})
}

5. 완성본

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
@app.route('/')
def home():
	return render_template('index.html')
@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();
});
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" style="max-width: 600px;">
<img src="https://image.freepik.com/free-vector/large-bookcase-with-books-library-book-shelf-interior_92863-357.jp
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>

meta tag

메타 태그는, 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들입니다.
예시 og:image / og:title / og:description

profile
Grolar Kim
이전 포스트

코딩 공부 세번째

다음 포스트

코딩 공부 다섯번째

0개의 댓글