페이지 만드는 순서 / 복습 / 파일 업로드 기능
일기장 페이지를 해보며 전에 했던 것들과 유사하지만 추가적으로 파일을 업로드할 수 있는 부분을 해보았다.
팁: 앞으로도 혼자서 이와 비슷한 프로젝트를 만들 때의 순서를 간략히 적어보려 한다.
1. 생김새를 먼저 만들기 - HTML+CSS
2. 만들어야 할 기능을 파악하기 (포스팅 API, 리스팅 API 두개!)
3. 서버 - 클라이언트 연결 코드 만들기
4. 포스팅 API 만들기 (꿀팁!! 보통 저장하는 것을 먼저 만들 때가 더 편하다!!)
5. 리스팅 API 만들기
만들어야 할 기능 파악하기
- 포스팅 API
(1) 클라이언트에서 줄 데이터: 제목, 코멘트
(2) 서버에서 할 일: 제목, 코멘트를 DB에 저장
(3) 서버에서 줄 것: 잘 저장됐다는 메시지 - 리스팅 API
(1) 클라이언트에서 줄 데이터: 없음
(2) 서버에서 할 일: 제목, 코멘트를 DB에서 모두 추출
(3) 서버에서 줄 것: 제목, 코멘트 꾸러미(리스트 형태)
파일 업로드 기능 만들어보기
-
파일 업로드의 프론트엔드 코드 작성
- 카드에 이미지 넣기
- 폼 부분에 파일 업로드 넣기
- 파일 업로드에 파일이 들어가게 만들기
-
HTML,CSS 카드에 이미지 넣기
<img src="../static/monet.jpg" class="card-img-top"><img src="../static/monet.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title">모네의 그림</h5> <p class="card-text">그림을 보면 마음이 안정된다.</p> </div> </div> -
HTML,CSS 폼 부분에 파일 업로드 넣기
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>- CSS 조정해주기 코드
.posting-box > .custom-file {
margin-bottom: 20px;}- HTML,CSS 파일 업로드가 되게 만들기
//파일 업로드 라이브러리
<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}입니다.': 더 많은 사용법을 원한다면 구글에 python datetime 사용법 이라고 검색해보자!
- 날짜와 시간을 다루는 함수
//임포트하기
from datetime import datetime//자주 쓰는 문법 1: 지금 날짜 시간 표시하기
now = datetime.now()
print(now)//자주 쓰는 문법 2: 날짜 시간을 원하는 형태로 변환하기
date_time = now.strftime("%Y-%m-%d-%H-%M-%S")
print(date_time)- 파일 이름 변경해주고 저장하기
//먼저, 확장자를 빼내기
extension = file.filename.split('.')[-1]//새로운 이름 만들어 주기
today = datetime.now()
mytime = today.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)항해 3일차.. 화이팅 😂😂😂
Fun_Dev