오늘의 한 일
- 유화 제작 프로젝트 - 백엔드 딥러닝 완성, 프론트엔드 고민중
유화 제작 프로젝트
post에 title, content, input(이미지파일), style을 담아서 보내면
이미지 생성과 함께 article 게시까지 확인완료
이제 이걸 프론트엔드에서 어떻게 구현하느냐 하는건데..
frontend - post_article.js(가제)
// 게시글 작성(await fetch) //
async function post_article() {
const title = document.getElementById("title").value
const content = document.getElementById("content").value
const style = document.getElementById("style").value // 클릭 radio value값에 style 넣으면 되려나?
const input = document.getElementById("fileUpload").files // files 받아와야함
const formData = new FormData()
formData.append('input', input[0])
formData.append('title', title)
formData.append('content', content)
formData.append('style', style)
const response = await fetch(`${backend_base_url}article/`, {
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization': 'Bearer ' + localStorage.getItem("access")
},
method: 'POST',
body: formData
})
if (response.status == 200) {
window.location.replace(`${frontend_base_url}`);
} else {
alert(response.status);
}
}
여기서 걸리는 부분이
const style = document.getElementById("style").value // 클릭 radio value값에 style 넣으면 되려나?이 부분인데..
어떤 방식으로 구현하던 클릭시에 value값에 모델 경로를 담아서 그걸 가져오면 되려나? 아직 감이 좀 덜잡힌다..
frontend - 게시물 보여주기 (컨셉)
main.html
..
<body>
<!-- 네비게이션 바 start -->
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
<!-- 네비게이션 바 end -->
<!-- create 모달 start -->
<div id="myModal" class="modal">
<!-- create 모달 content -->
</div>
<!-- create 모달 end -->
<!-- 게시글 시작(부트스트랩 카드 형태) -->
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<!-- 게시물 temp_html.append -->
</div>
</div>
..대충 이런 뼈대에 웹개발 강의때 썻던 get요청으로 받은 데이터를 temp_html 형태로 가공해 append하는 방식으로 게시물을 생성하는 방식이 좋지 않을까 싶다
show_article.js (가제)
// 전체 아티클 보여주기
function show_article() {
$.ajax({
type: 'GET',
url: `${backend_base_url}article/`,
data: {},
success: function (response) {
let articles = response
for (let i = 0; i < postings.length; i++) {
append_temp_html(
articles[i].id,
articles[i].username,
articles[i].title,
articles[i].content,
articles[i].image
)
}
function append_temp_html(id, user, title, content, image) {
temp_html = `<div class="col">
<div class="card h-100">
<img src="(${backend_base_url}${image}) class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
});
}
show_article()
대충 이런식으로 하면 되지 않을까?
사진이나 제목 혹은 div 전체에 onclick으로 해당 detail 페이지 들어가면 될듯