일단 오늘은 GET 정보이동 id특정 부분을 했다.
일단 먼저 index부분인데, 댓글창과 마찬가지로 일단 정보를 db에서 가져와서 html코드로 붙이듯이 apped해줬다.
메인페이지 출력함수
function show_main() {
fetch("/introduce/index").then(res => res.json()).then(data => {
let rows = data['result'] //db데이터를 가져와서 리스트 형태로 저장
$('#user_box').empty() //user사진과 이름이 출력될 박스를 비워준다.
rows.forEach((a) => {
let name = a['name']
let img_url = a['img_url']
let _id = a['_id'] //id 값을 받아와준다.
//여기서 들어온 a['_id']값은 app.py에서 형변환 작업이 완료된 str형이다.
//temp_html로 댓글을 하나씩 html코드로 붙입니다.
let temp_html = `<div id="${_id}" class="user_img" onclick="newTab('${_id}')" style="background-image: url('${img_url}');">
<h2>${name}</h2>
</div>`
//temp_html에서 newTab이라는 Detail로 넘어가는 함수에 매개변수로 id값을 할당하는 모습
//div 자체에도 어떤 오브젝트를 선택했는지 알기위해 id값을 주어 db와 연결
$('#user_box').append(temp_html)
})
})
}
물론 ready함수에서 실행하고있다.
메이페이지 GET메소드 처리 영역
@app.route("/index", methods=["GET"])
def main_get():
all_users = list(db.lucky_users.find({},))
for user in all_users:
user['_id'] = str(user['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': all_users}) # 저장한 값 반환
기본틀은 댓글정보를 가져올 때와 같다.
newTab함수 새로운 탭 열 때
function newTab(id){
// let img_url = document.getElementById(id).style.backgroundImage;
// let name = $(`#${id}>h2`).val();
// 이미지값과 이름값을 찾아오려 했지만 id값을 어차피 받을거라면 필요없다 판단
//선택한 탭의 유저 id 정보를 localStorage에 저장하는 수단으로 사용
localStorage.setItem('user_id',id);
//localStorage에 key값을 user_id로 매개변수로 받아온 id값을 저장
window.open('detail');
}
여긴 별 코드가 없다 localStorage에 저장해주고 detail탭으로 넘어가는 내용이 전부.
이미지값과 이름 값을 받아오려고 구글링을 해서 코드를 짜다 id값만 있으면 된다는 걸 알고 주석처리 했다... 저래두면 다음에 생각나면 이 코드를 다시 보러 오지 않을까....?
팀원을 추가할 수 있는 코드도 만들어서 추가했다.
댓글 추가와 그렇게 다르지 않았다 틀만 잡아두면 데이터를 넣고 뺄 때 알아서 적용이 되었다. 이게바로 아키텍처??템플릿??
팀원 추가는 다른 페이지로 넘어가서 처리 되기 때문에 추가완료 되었을 때 다시 자동으로 홈으로 돌아올 수 있도록 posting fetch내에
코드 하나를 추가했다.
위 코드 덕분에 추가 되면 자동으로 홈으로 돌아가고 바로 추가된 인원을 확인해 볼 수 있다.
상세페이지에서 정보를 가져와 뿌려주는 기능도 오늘 만들었는데, 건드리지 않고 팀원에게 맡겨뒀었다가 버그를 많이 일으킨다고 해서 같이 해봤더니 이 녀석 문제였다...
생각보다 앞선 main에 데이터를 뿌려주는 것과 다른부분도 많았고, main에서 id값을 가져와서 데이터를 서칭 해야하는 고난이도 문제도 있었다.
일단 사용자가 클릭한 유저페이지의 id값을 구해서 데이터를 특정해야하는데,
localStorage.getItem으로 user_id키값에 맞는 데이터를 가져와서 변수 id에 저장해준다.
콘솔로 출력해보면 성공적으로 index에서 가져온 유저의 id값이 출력된다.
그리고 id를 비교하는 부분도 문제였는데 app.py가 GET형태라 id값을 Storage에서 가지고 갈 방법을 모르겠어서 findone으로 찾지 못했다. 약간 야매(?) 방법으로 데이터를 전부 긁어온 리스트를 반복문에서 같은 id값을 검사했다. 별로 좋은 코드는 아닌것같다.(그래도 실행만 되면 뭐..)
위와같이 반복문에서 id 값을 검색해 맞다면 다른 값도 가져오는 식으로 만들었다.
그리고 이 작업중 알게된게 있는데, 내가 html코드를 짤 때 이 페이지의 이미지를 백그라운드 이미지로 넣어뒀었다.
백 그라운드 이미지는 백틱 안에 코드에서 변경하기가 힘들었다. 그래서
이 코드를 이용해 스타일에 접근해서 backgroundImage값을 url로 바꿔주었다.
넣을 곳이 필요했기 때문에 temp_html이 찍힌뒤에 실행되도록 해줬다.
오늘 많은걸 한것 같다... 요즘 하루하루 12시간씩 한다는게 정말 힘든거라는걸 느낀다...
내일은 상세페이지 프론트 수정, 우리팀이 다시 디자인해준 팝업디자인 변경, 그리고 최종적으로 팀원들과 코드를 합해서 마지막 수정할 부분을 체크하고 발표준비를 해야겠다....
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Lucky Sparta</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
.body {
color: #333;
font-family: 'Dongle', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 0;
}
/* 헤더 */
.header {
position:sticky;
top: 0px;
background-color: white;
width: auto;
height: 150px;
display: flex;
justify-content: space-between;
align-items: top;
margin: 0px auto auto auto;
}
a {
color:goldenrod;
text-decoration: none;
}
.teamname {
background-color: white;
position:sticky;
align-items: top;
margin-left: 10px;
font-size: 50px;
overflow: hidden;
color: goldenrod;
}
/* 팀소개 */
.middle {
background-color: white;
width: auto;
height: 350px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.teamstory {
margin: 30px;
border-style: solid;
border-color: goldenrod;
text-align: center;
overflow: hidden;
}
/* 팀사진 */
.cards {
width: auto;
margin: 20px auto 20px auto;
text-align: center;
}
/* footer */
.footer {
position: sticky;
bottom: 0px;
width: auto;
height: 50px;
background-color: goldenrod;
margin-top: 100px;
display: flex;
flex-direction: row-reverse;
}
.footer>button {
color: #333;
background-color: goldenrod;
border-radius: 5%;
border-color: red;
}
.footer>button:hover {
background-color: red;
}
</style>
<script>
$(document).ready(function () {
//페이지 로딩과 동시에 실행되는 자리 입니다 show_main함수를 실행합니다.
show_main();
});
// 위 ready 함수에서 실행되어 페이지 시작시 실행되는 댓글을 가져오는 함수 입니다.
function show_main() {
fetch("/index").then(res => res.json()).then(data => {
let rows = data['result'] //db데이터를 가져와서 리스트 형태로 저장
$('#cards').empty() //user사진과 이름이 출력될 박스를 비워준다.
rows.forEach((a) => {
let name = a['name']
let img_url = a['img_url']
let _id = a['_id'] //id 값을 받아와준다.
//여기서 들어온 a['_id']값은 app.py에서 형변환 작업이 완료된 str형이다.
console.log(img_url)
//temp_html로 댓글을 하나씩 html코드로 붙입니다.
// let temp_html = `<div id="${_id}" class="user_img" onclick="newTab('${_id}')" style="background-image: url('${img_url}');">
// <h2>${name}</h2>
// </div>`
let temp_html = `<div id="${_id}" class="col" onclick="newTab('${_id}')">
<div class="card h-100">
<img
src="${img_url}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${name}</h5>
</div>
</div>
</div>`
//temp_html에서 newTab이라는 Detail로 넘어가는 함수에 매개변수로 id값을 할당하는 모습
//div 자체에도 어떤 오브젝트를 선택했는지 알기위해 id값을 주어 db와 연결
$('#cards').append(temp_html)
})
})
}
function newTab(id) {
// let img_url = document.getElementById(id).style.backgroundImage;
// let name = $(`#${id}>h2`).val();
// 이미지값과 이름값을 찾아오려 했지만 id값을 어차피 받을거라면 필요없다 판단
//선택한 탭의 유저 id 정보를 localStorage에 저장하는 수단으로 사용
localStorage.setItem('user_id', id);
//localStorage에 key값을 user_id로 매개변수로 받아온 id값을 저장
window.open('detail');
}
function addTeam() {
window.location.href='/addTeam';
}
</script>
</head>
<body>
<!-- 헤더 -->
<div class="header">
<div class="teamname">
<a href = "index.html">Lucky<br>
Sparta</a>
</div>
<img
src="data:image/png;base64,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"
alt="스파르타">
</div>
<!-- 중앙 소개페이지 -->
<div class="middle">
<div class="teamstory" style="width: 500px; height: 200px;">
<div class="card-body">
<h5 class="card-title">팀 소개</h5>
<h6 class="card-subtitle mb-2 text-muted">We make fun coding club</h6>
<p class="card-text">행운의 숫자 7조로 모인 럭키스파르타입니다. 본 캠프 첫 프로젝트부터 좋은 일만 가득하길 바라면서 럭키스파르타로 팀명을 지었습니다.</p>
</div>
</div>
<div class="teamstory" style="width: 500px; height: 200px;">
<div class="card-body">
<h5 class="card-title">프로젝트명</h5>
<h6 class="card-subtitle mb-2 text-muted">We work together</h6>
<p class="card-text">사전 캠프 때 수강한 웹개발종합반을 바탕으로 복습하고 응용해보는 방식으로 프로젝트를 진행합니다. CSS 기능을 활용하여 웹페이지를 꾸미고, 백엔드를 활용하여 다른
페이지로 이동하는 기능과 댓글 기능을 구현하는 법에 대해 공부합니다. 더불어 팀소개를 주제로 하여 팀원이 서로 알아가고 가까워지는 시간을 가집니다.</p>
</div>
</div>
</div>
<!-- 팀원소개 페이지 -->
<div class="cards">
<div id="cards" class="row row-cols-1 row-cols-md-5 g-5">
<div class="col">
<div class="card h-100">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<button onclick="addTeam()">Adding a Team Member</button>
</div>
</body>
</html>
detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Lucky Sparta</title>
<style>
.wrap {
display: flex;
flex: auto;
border: solid 2px black;
}
.body {
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
.header {
/* background-color: red; */
width: auto;
height: 150px;
display: flex;
justify-content: space-between;
align-items: top;
margin: 0px auto auto auto;
}
.teamname {
/* background-color: blue; */
margin: 20px auto auto 1%;
font-size: 40px;
overflow-y: hidden;
color: goldenrod;
}
/* 댓글 페이지의 코멘트 박스 */
.text-box {
display: block;
font-size: 20px;
width: 100%;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
border: solid 1px gray;
}
textarea {
resize: none;
/* textarea 크기가 변경되는걸 고정시켜주는 코드입니다. */
}
#comment-box {
height: 100px;
}
/* 좌측 반을 차지하는 div 사진 이름 */
.left {
align-items: center;
width: 50%;
height: 100%;
margin: 0 0 auto 0;
display: flex;
flex-direction: column;
background-color: transparent;
justify-content: center;
}
/* 우측 반을 차지하는 div 팀원소개+댓글 */
.right {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
margin: auto;
background-color: lightgrey;
justify-content: center;
}
/* 이미지가 들어가는 div */
.image-box {
width: 400px;
height: 400px;
margin-top: 40px;
border: solid 10px skyblue;
background-image: url('https://pbs.twimg.com/media/Esq5WzJUUAIp1ZS?format=jpg&name=medium');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
h2 {
margin-top: 20px;
}
/* 홈으로 버튼 */
.back-btn {
width: 300px;
height: 50px;
margin-top: 50px;
margin-bottom: 30px;
}
/* 홈으로버튼 마우스 오버시 */
.back-btn:hover {
background-color: lightgray;
}
/* 댓글박스 전체를 감싸고있는 CSS입니다 */
.comment-list {
text-align: right;
display: flex;
flex-direction: column;
margin: 10px 10px 0 10px;
}
/* 댓글 박스 div하나하나에 적용되는 CSS입니다 */
.comment {
color: black;
background-color: transparent;
border: solid 1px black;
margin-right: 20px;
}
/* 수정과 삭제버튼 CSS입니다. */
.UDBtn {
margin-right: 10px;
margin-top: 5px;
}
/* 댓글 수정 팝업 CSS입니다. */
.modify_popup {
width: 400px;
height: 500px;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 3px;
margin: auto;
position: fixed;
text-align: center;
z-index: 10;
background-color: white;
border: solid 2px black;
visibility: hidden;
}
/* 댓글 수정 팝업의 뒷 배경 CSS입니다 */
.popup-back {
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
opacity: 0.5;
z-index: 9;
}
</style>
<script>
$(document).ready(function () {
//페이지 로딩과 동시에 실행되는 자리 입니다 show_comment함수를 실행합니다.
show_comment();
show_users();
});
// 위 ready 함수에서 실행되어 페이지 시작시 실행되는 댓글을 가져오는 함수 입니다.
function show_users() {
let id
if (localStorage.getItem('user_id')) {
id = localStorage.getItem('user_id');
}
fetch("/detail/get").then(res => res.json()).then(data => {
let rows = data['result']
$('#users').empty()
rows.forEach((a) => {
let _id = a['_id']
console.log(_id)
if (id == _id) {
let img_url = a['img_url']
let name = a['name']
let introduce = a['introduce']
console.log(img_url, name, introduce)
// 가져온 이미지, 이름을 html에 붙임
let temp_html = `<div class="left">
<div id="image-box" class="image-box"></div>
<div style="text-align: center;">
<h2>${name}</h2>
<p style="font-size: 20px;">블로그 주소 : </p>
<button class="back-btn">홈으로 이동</button>
</div>
</div>
<!-- 여기까지 좌측페이지 -->
<!-- 여기부터 우측 팀원소개+댓글등록 html -->
<div class="right">
<h2>개인 소개</h2>
<textarea ${introduce} name="introduce" id="introducd_1" cols="30" rows="7"></textarea>
<h2>개인소개2</h2>
<textarea name="introduce" id="introducd_2" cols="30" rows="7"></textarea>
<div>
<h2>댓글</h2>
<input id="nickname" class="text-box" type="text" placeholder="닉네임">
<textarea id="comment-box" placeholder="내용을 입력해주세요." id="comment" cols="30" rows="10"></textarea>
<button onclick="comment_posting()" style="display: block;">댓글등록</button>
</div>
</div>`
$('#users').append(temp_html)
document.getElementById("image-box").style.backgroundImage= `url(${img_url})`
}
})
})
}
function show_comment() {
fetch("/comment").then(res => res.json()).then(data => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((a) => {
let nickname = a['nickname']
let comment = a['comment']
let _id = a['_id']
//temp_html로 댓글을 하나씩 html코드로 붙입니다.
let temp_html = `<div id =${_id} class="comment">
<p style="font-size: 20px; font-weight: bold;"><button onclick="modify_popup('${_id}')" class="UDBtn">수정</button><button class="UDBtn">삭제</button>${nickname}</p>
<h6>${comment}</h6>
</div>`
$('#comment-list').append(temp_html)
})
})
}
// 댓글등록 함수입니다.
function comment_posting() {
//입력한 댓글을 id값으로 찾아 밸류를 저장
let comment = $('#comment-box').val();
//입력한 닉네임을 id 값으로 찾아 밸류를 저장
let nickname = $('#nickname').val();
let formData = new FormData();
//가져온 댓글과 닉네임을 formData에 추가
formData.append("comment_give", comment);
formData.append("nickname_give", nickname);
//추가한 댓글과 닉네임을 넘겨준다.
//어떤 멤버의 댓글인지 확인 할 수 있게 나중에 html틀이 잡히면 상세페이지에서
//멤버의 이름의 value값을 받아올 수 있도록 수정해야할 것 같음.
fetch('/comment', {
method: "POST", body: formData
}).then((res) => res.json()).then((data) => {
alert(data['msg'])
window.location.reload();
})
}
// 댓글 업데이트 함수입니다.
function updating_comment() {
let nickname2 = $('#nickname_modify').val();
//닉네임을 id값으로 찾아 밸류를 저장
let comment2 = $('#comment-box_modify').val();
if (localStorage.getItem('modify_id')) {
_id = localStorage.getItem('modify_id')
}
//댓글을 id값으로 찾아 밸류를 저장
let id = _id;
let formData = new FormData();
//위 찾은 데이터들을 모두 formData에 append
formData.append("nickname2_update3", nickname2);
formData.append("comment2_update3", comment2);
formData.append("_id_update3", id);
//서버로 넘겨준다.
fetch('/comment', {
method: "PUT", body: formData
}).then((res) => res.json()).then((data) => {
alert(data['msg']) //완료시 alert로 메세지 출력
window.location.reload();//화면 새로고침 코드
})
}
// 수정하는 팝업이 열리는 함수 입니다. id를 받아와서 localStorage에 저장합니다.
function modify_popup(_id) {
document.getElementById("modify_popup").style.visibility = "visible"
document.getElementById("popup-back").style.visibility = "visible"
localStorage.setItem('modify_id', _id);
}
// 팝업이 닫히는 코드입니다.
function modify_popup_cls() {
document.getElementById("modify_popup").style.visibility = "hidden"
document.getElementById("popup-back").style.visibility = "hidden"
}
</script>
</head>
<body>
<!-- 배너부분입니다 -->
<div class="header">
<pre class="teamname">
Lucky
Sparta
</pre>
<img src="data:image/png;base64,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"
alt="스파르타">
</div>
<!-- 여기까지 배너부분 -->
<div id="users" class="wrap">
<!-- 여긴 팀원 사진과 이름이 들어가는 좌측 페이지 입니다. -->
<div class="left">
<div id="image-box" class="image-box"></div>
<div style="text-align: center;">
<h2>팀원 이름</h2>
<p style="font-size: 20px;">블로그 주소 : </p>
<button class="back-btn">홈으로 이동</button>
</div>
</div>
<!-- 여기까지 좌측페이지 -->
<!-- 여기부터 우측 팀원소개+댓글등록 html -->
<div class="right">
<h2>팀원소개</h2>
<textarea name="introduce" id="introducd_1" cols="30" rows="7"></textarea>
<h2>팀원소개2</h2>
<textarea name="introduce" id="introducd_2" cols="30" rows="7"></textarea>
<div>
<h2>댓글</h2>
<input id="nickname" class="text-box" type="text" placeholder="닉네임">
<textarea id="comment-box" placeholder="내용을 입력해주세요." id="comment" cols="30" rows="10"></textarea>
<button onclick="comment_posting()" style="display: block;">댓글등록</button>
</div>
</div>
<!-- 여기까지 detail 우측페이지 -->
</div>
<div id="comment-list" class="comment-list">
<!-- 여긴 코멘트들이 들어갑니다 GET요청! -->
</div>
<div onmousedown="modify_popup_cls()" id="popup-back" class="popup-back"></div>
<!-- 이 밑은 수정 팝업 html입니다! -->
<div id="modify_popup" class="modify_popup">
<h2>댓글 수정</h2>
<input id="nickname_modify" class="text-box" type="text" placeholder="수정할 닉네임">
<textarea id="comment-box_modify" placeholder="수정할 내용을 입력해주세요." id="comment" cols="30" rows="10"></textarea>
<button onclick="updating_comment()" style="display: block;">댓글 수정</button>
<button onclick="modify_popup_cls()" style="display: block;">닫기</button>
</div>
<!-- 여기까지 수정팝업 -->
</body>
</html>
app.py
from bson import ObjectId
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import certifi
ca = certifi.where()
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ehc0xum.mongodb.net/?retryWrites=true&w=majority' ,tlsCAFile = ca)
db = client.dbsparta
import logging #python에서 콜솔로그를 찍기위한 import라고한다.
import requests
from bs4 import BeautifulSoup
@app.route('/')
def home():
return render_template('index.html')
#detail페이지이동
@app.route('/detail')
def detail():
return render_template('detail.html')
@app.route('/addTeam')
def addTeam():
return render_template('addTeam.html')
#댓글 닉네임 등록
@app.route('/comment', methods=["POST"])
def comment_post():
nickname_receive = request.form['nickname_give']
#입력한 nickname 가져와서 저장
comment_receive = request.form['comment_give']
#입력한 코멘트 가져와서 저장
doc = {
'comment' : comment_receive,
'nickname' : nickname_receive
}
#dictionary형태로 저장
db.lucky_comment.insert_one(doc)
return jsonify({'msg' : '댓글 등록 완료!'})#성공시 메세지출력
#댓글 수정
@app.route('/comment', methods=["PUT"])
def update_comment():
#닉네임 받아오기
nickname2 = request.form['nickname2_update3']
#댓글 받아오기
comment2 = request.form['comment2_update3']
#id 받아오기
_id_receive = request.form['_id_update3']
_id = ObjectId(_id_receive)
#id가 string값이므로 다시한번 ObjectID로 바꿔주는 코드
db.lucky_comment.update_many({'_id':_id}, {'$set' : {'nickname' : nickname2,
'comment' : comment2}}, upsert=True)
return jsonify({'msg' : '댓글 수정 완료!'})
#댓글 가져오기
@app.route("/comment", methods=["GET"])
def comment_get():
all_comment = list(db.lucky_comment.find({},))
for con in all_comment:
con['_id'] = str(con['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': all_comment}) # 저장한 값 반환
#상세 페이지 이미지, 이름 내려주기
@app.route("/detail/get", methods=["GET"])
def get_users():
all_images = list(db.lucky_users.find({},))
for user in all_images:
user['_id'] = str(user['_id'])
# MongoDB의 find() 메서드를 사용하여 모든 문서를 조회하고, 결과로 반환되는 문서들 중에서 _id 필드는 제외하고 img_url, name 필드만 가져오도록 설정
return jsonify({'result': all_images})
#메인페이지 이미지 이름 가져오기
@app.route("/index", methods=["GET"])
def main_get():
all_users = list(db.lucky_users.find({},))
for user in all_users:
user['_id'] = str(user['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': all_users}) # 저장한 값 반환
#팀원 등록
@app.route('/introduction', methods=["POST"])
def post():
#이미지url 받아오기
img_url = request.form['img_url_give']
#이름 받아오기
name = request.form['name_give']
#소개1 받아오기
introduce_1 = request.form['introduce_1_give']
#소개2 받아오기
doc = {
'img_url' : img_url,
'name' : name,
'introduce': introduce_1
}
#dictionary형태로 저장
db.lucky_users.insert_one(doc)
return jsonify({'msg' : '팀원추가 완료!'})#성공시 메세지 출력
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)
새로운 페이지 팀원 등록 페이지이다.
addTeam.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Lucky Sparta</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
.body {
color: #333;
font-family: 'Dongle', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 0;
}
/* 헤더 */
.header {
position: sticky;
top: 0px;
background-color: white;
width: auto;
height: 150px;
display: flex;
justify-content: space-between;
align-items: top;
margin: 0px
auto
auto
auto;
}
.teamname {
background-color: white;
position: sticky;
align-items: top;
margin-left: 10px;
font-size: 50px;
overflow: hidden;
color: goldenrod;
}
/* 좌우측 통합구역 */
.wrap {
display: flex;
flex: auto;
}
/* 좌측 차지하는 div */
.left {
align-items: center;
width: 50%;
height: 100%;
margin: 0 0 auto 0;
display: flex;
flex-direction: column;
background-color: transparent;
justify-content: center;
}
.image-box {
width: 500px;
height: 500px;
margin-top: 40px;
border: solid 5px goldenrod;
background-image: url('https://pbs.twimg.com/media/Esq5WzJUUAIp1ZS?format=jpg&name=medium');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.nameurl {
width: 500px;
height: auto;
margin-top: 20px;
}
/* 우측 차지하는 div */
.right {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
margin: auto;
justify-content: center;
}
.introduce {
width: 500px;
height: auto;
margin-top: 10px;
}
/* 마지막 아래 Footer 막대 */
.footer {
position: sticky;
bottom: 0px;
width: auto;
height: 50px;
background-color: goldenrod;
margin-top: 100px;
display: flex;
flex-direction: row-reverse;
}
.footer>button {
color: #333;
background-color: goldenrod;
border-radius: 5%;
border-color: red;
}
.footer>button:hover {
background-color: red;
}
textarea{
resize: none;
}
</style>
<script>
function posting(){
//이름을 id값으로 찾아 밸류를 저장
let name = $('#name').val();
//이미지url을 id값으로 찾아 밸류를 저장
let img_url = $('#img_url').val();
//소개1을 id값으로 찾아 밸류를 저장
let introduce_1 = $('#exampleFormControlTextarea1').val();
let formData = new FormData();
//위 찾은 데이터들을 모두 formData에 append
formData.append("name_give", name);
formData.append("img_url_give", img_url);
formData.append("introduce_1_give", introduce_1);
//서버로 넘겨준다.
fetch('/introduction', {
method: "POST", body: formData
}).then((res) => res.json()).then((data) => {
alert(data['msg']) //완료시 alert로 메세지 출력
window.location.href='/';
// window.open('','_self').close();
})
}
</script>
</head>
<body>
<!-- 헤더 -->
<div class="header">
<div class="teamname">
Lucky<br>
Sparta
</div>
<img
src="data:image/png;base64,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"
alt="스파르타">
</div>
<!-- 여긴 팀원 사진과 이름이 들어가는 좌측 페이지 입니다. -->
<div class="wrap">
<div class="left">
<div class="image-box"> </div>
<!-- 이름, 이미지 -->
<div class="nameurl">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">이름</label>
<input id="name" type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">이미지 URL</label>
<textarea id="img_url" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
</div>
<!-- 여기까지 좌측페이지 -->
<!-- 여기부터 우측페이지-->
<div class="right">
<div class="introduce">
<div class="mb-5">
<label for="exampleFormControlTextarea1" class="form-label">소개글</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="25"
placeholder="MBTI 개인블로그 주소 자신에 대한 간단한 소개 객관적으로 살펴본 자신의 장점 자신의 협업스타일 등을 적어주세요"></textarea>
</div>
</div>
</div>
</div>
<!-- 여기까지 detail 우측페이지 -->
<div class="footer">
<button onclick="posting()">작성완료</button>
</div>
</body>
</html>