スパルタコードクラブの周りのノート
57751 ワード
1.Flaskの起動-サーバの作成
2)Flaskパッケージをインストールしてスタート!
私の考え!パッケージインストール画面へ
ウィンドウ:左上隅File->setting->Pythonインタプリタ
3）Flashベース：デフォルト運転
Flaskフレームワーク:サーバを駆動するための便利なコードのセット.サーバを駆動するには、必要な複雑な作業を簡単に書くことができます.
=>フレームを使わなければ、サンセットを潰してコチュジャンに!フレームは3分料理/調味料セット!
app.pyファイルを作成し、次のコードを貼り付けます.
=>通常フラスコサーバを実行するファイルは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)4)Flaskベース:URLの共有
=>urlの関数名が同じではないか、ルーティング("/")のアドレスが同じではありません.
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)2.Flaskの起動—HTMLファイルのライフサイクル
5)Flash Basice:デフォルトのフォルダ構造-常にこのように設定してから開始します!
プロジェクトフォルダで、
静的フォルダ(画像、cssファイルが暗い)
ㄴtemplatesフォルダ(htmlファイルを非表示)
ㄴapp.pyファイル
これで3つ作ってから始めましょうでは、各フォルダの役割について説明しましょう.
(我慢しなきゃ!!venvは実際には見えるけど見えない~!覚えてるでしょ?)
6)Flashベース:HTMLファイルを読み込む
[コードセグメント]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__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)3.Flaskの起動-正式APIの作成
7）入る前：GET、POST要求タイプ
様々な方式が存在するが、その中で最もよく用いられるのはGET、POST方式である.
=>通常!データ照会要求時
例)ムービーリストの表示
=>データ転送:URLの後ろに疑問符を付けてkey=valueに転送
例えば、Google.com?ホッキョクグマ
=>通常!作成、更新、削除を要求します.
例)会員加入、会員脱退、パスワード修正
=>データ転送:非表示のHTML本文でkey:value形式で
8）GET、POST要求クライアントデータの受信方法
たとえば、クライアントがtitle giveのキー値としてサーバからデータをインポートするとします.(850520-…を身分証明書番号として入力するキー値に相当)
=>得られた値を印刷して開発者に見せる.実戦では、pirntで撮影する以外にも、いろいろな仕事ができるのではないでしょうか.[コード断片]-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!'})$.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)
}
})4.[全員の本コメント]-設定項目
9)問題分析-完成作品を見て!
http://spartacodingclub.shop/bookreview10)設定項目-フラスコフォルダ構造の作成
5.[全員の書評]-骨組みの準備
11)プロジェクト準備-app。pyの準備
[コードスナップ]-みんなの書評-apppy
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'])
def write_review():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': '이 요청은 POST!'})
@app.route('/review', methods=['GET'])
def read_reviews():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)12)プロジェクト準備-index。htmlの準備
[コードスナップ]-みんなの書評-indexhtml
<!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"]);
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: 100px;
}
</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>6.[全員の書評]-POST練習(コメント保存)
13）APIの作成と使用：タイトル、作成者、コメント情報の保存
1.クライアントとサーバの確認
## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
# 1. 클라이언트가 준 title, author, review 가져오기.
# 2. DB에 정보 삽입하기
# 3. 성공 여부 & 성공 메시지 반환하기
return jsonify({'result': 'success', 'msg': '리뷰가 성공적으로 작성되었습니다.'})function makeReview() {
// 1. 제목, 저자, 리뷰 내용을 가져옵니다.
// 2. 제목, 저자, 리뷰 중 하나라도 입력하지 않았을 경우 alert를 띄웁니다.
// 3. POST /review 에 저장을 요청합니다.
$.ajax({
type: "POST",
url: "/review",
data: { },
success: function (response) {
if (response["result"] == "success") {
alert(response["msg"] );
window.location.reload();
}
}
})
}[コメントの開始]ボタンをクリックすると、[コメントの作成に成功しました]が表示されます.名前のalertウィンドウが表示されると、クライアントコードがサーバコードに関連付けられていることを示します.
2.サーバの作成
-タイトル(title)
-作成者
-コメント(コメント)
したがって、API機能は、以下の3つのステップを含む必要があります.
1.クライアントからのtitle、author、reviewを取得します.
2.DBに情報を挿入する
3.成功するかどうか&成功メッセージを返す
-要求URL=/review、要求方式=POST
-要求データ:タイトル(title)、作成者(author)、コメント(review)
B.サーバが提供する機能:クライアントに要求データをデータベース作成(Create)に送信し、保存に成功したことを示す応答データを送信する.
C.応答データ:(JSON形式)「msg」=「コメント作成に成功しました.」
@app.route('/review', methods=['POST'])
def write_review():
# title_receive로 클라이언트가 준 title 가져오기
title_receive = request.form['title_give']
# author_receive로 클라이언트가 준 author 가져오기
author_receive = request.form['author_give']
# review_receive로 클라이언트가 준 review 가져오기
review_receive = request.form['review_give']
# DB에 삽입할 review 만들기
doc = {
'title': title_receive,
'author': author_receive,
'review': review_receive
}
# reviews에 review 저장하기
db.bookreview.insert_one(doc)
# 성공 여부 & 성공 메시지 반환
return jsonify({'msg': '리뷰가 성공적으로 작성되었습니다.'})3.クライアントの作成
-タイトル(title)
-作成者
-コメント(コメント)
したがって、クライアント・コードには、次の3つのステップが含まれている必要があります.
1.inputからtitle、author、reviewをインポート
2.値が入力されていない場合はalertをフローティングします.
3.Ajaxをサーバに保存し、画面の再ロードを要求します.
A.要求情報
-要求URL=/review、要求方式=POST
-要求データ:タイトル(title)、作成者(author)、コメント(review)
C.応答データ:(JSON形式)「result」=「success」、「msg」=「コメント作成成功」.
function makeReview() {
// 화면에 입력어 있는 제목, 저자, 리뷰 내용을 가져옵니다.
let title = $("#title").val();
let author = $("#author").val();
let review = $("#bookReview").val();
// POST /review 에 저장(Create)을 요청합니다.
$.ajax({
type: "POST",
url: "/review",
data: { title_give: title, author_give: author, review_give: review },
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}4.完了確認
タイトル、作成者、コメントを作成して[コメントを作成](Create Comment)ボタンをクリックすると、[コメントを正常に作成](Create Comment)が表示されます.名前のalertが表示されていることを確認してください.
7.[全員の本レビュー]-GET練習(コメント表示)
14)保存されたコメントを作成して使用する(Read->GET)
動作を参照します.
Reference
この問題について(スパルタコードクラブの周りのノート), 我々は、より多くの情報をここで見つけました https://velog.io/@hanalsky/스파르타코딩클럽-4주차-필기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol