나홀로일기장 만들기
서버-클라이언트 연결 코드 만들기
- GET : 데이터 조회(Read) 요청 시 사용
- POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시 사용
- 기본 Flask 코드
from flask import Flask, render_template, jsonify, request
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)
GET 요청
$(document).ready(function () {
alert("!!");
})
$.ajax({
type: "GET",
url: "/diary?sample_give=샘플데이터",
data: {},
success: function(response){
alert(response["msg"])
}
})
@app.route('/diary', methods=['GET'])
def show_diary():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': 'GET 연결 완료!'})
POST 요청
$.ajax({
type: "POST",
url: "/diary",
data: {sample_give:'샘플데이터'},
success: function(response){
alert(response['msg'])
}
})
@app.route('/diary', methods=['POST'])
def save_diary():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
포스팅 API, 리스팅 API 만들기
포스팅 API 만들기
@app.route('/posting', methods=['POST'])
def posting():
title_receive = request.form['title_give']
content_receive = request.form['content_give']
doc = {
'title': title_receive,
'content': content_receive
}
db.articles.insert_one(doc)
return jsonify({'msg': '업로드 완료!'})
function posting() {
let title = $('#title').val()
let content = $('#content').val()
$.ajax({
type: "POST",
url: "/posting",
data: {'title_give': title, 'content_give': content},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
리스팅 API 만들기
@app.route('/listing', methods=['GET'])
def listing():
articles = list(db.articles.find({}, {'_id':False}))
return jsonify({'articles': articles})
$(document).ready(function() {
listing()
})
function listing() {
$.ajax({
type: "GET",
url: "/listing",
data: {},
success: function (response) {
let articles = response['articles']
for (let i = 0; i < articles.length; i++) {
let title = articles[i]['title']
let content = articles[i]['content']
let temp_html = `<div class="card">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
파일업로드 준비
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
bsCustomFileInput.init()
서버 쪽 파일 받기, 클라이언트 쪽 보내기
서버 쪽 파일 받기 코드
file = request.files["file_give"]
save_to = 'static/mypicture.jpg'
file.save(save_to)
클라이언트 쪽 보내기 코드
function posting() {
let title = $('#title').val()
let content = $('#content').val()
let file = $('#file')[0].files[0]
let form_data = new FormData()
form_data.append("file_give", file)
form_data.append("title_give", title)
form_data.append("content_give", content)
$.ajax({
type: "POST",
url: "/diary",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
파일 이름 설정 (서버)
f-string
myname = '정예원'
text = f'내 이름은 {myname}'
datetime
from datetime import datetime
now = datetime.now() # 현재 날짜 시간
date_time = now.strftime("%Y-%m-%d-%H-%M-%S") # 원하는 형태로 변환하기
파일 이름 변경해서 저장하기
extension = file.filename.split('.')[-1]
now = datetime.now() # 현재 날짜 시간
mytime = now.strftime("%Y-%m-%d-%H-%M-%S") # 원하는 형태로 변환하기
filename = f'file-{mytime}'
save_to = f'static/{filename}.{extension}'
file.save(save_to)
doc = {
'title': title_receive,
'content': content_receive,
'file': f'{filename}.{extension}',
}
db.diary.insert_one(doc)
카드 목록 출력 (클라이언트)
function listing() {
$.ajax({
type: "GET",
url: "/listing",
data: {},
success: function (response) {
if (response["result"] == "success") {
let articles = response['articles']
for (let i = 0; i < articles.length; i++) {
let title = articles[i]['title']
let content = articles[i]['content']
let file = articles[i]['file']
let temp_html = `<div class="card">
<img src="../static/${file}" class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
}
});
}
