나홀로일기장 만들기

 

서버-클라이언트 연결 코드 만들기

  • 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 요청

  • Javascript 로딩 후 실행
$(document).ready(function () {
	alert("!!");
})
  • GET 요청 Ajax 코드
$.ajax({
	type: "GET",
	url: "/diary?sample_give=샘플데이터",
	data: {},
	success: function(response){
		alert(response["msg"])
	}
})
  • GET 요청 API 코드
@app.route('/diary', methods=['GET'])
def show_diary():
	sample_receive = request.args.get('sample_give')
	print(sample_receive)
	return jsonify({'msg': 'GET 연결 완료!'})

POST 요청

  • POST 요청 Ajax 코드
$.ajax({
	type: "POST",
	url: "/diary",
	data: {sample_give:'샘플데이터'},
	success: function(response){
		alert(response['msg'])
	}
})
  • POST 요청 API 코드
@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)
  • 변경된 파일 이름으로 DB에 저장하기
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)
                }
            }
        }
    });
}

+ Recent posts