mbti별 TIL을 작성하는 웹서비스를 팀원들과 구현해 보았다!
익숙하지 않은 python 언어를 사용하는데에 어려움이 참 많았는데 팀원들과 협력하며 천천히 해결해 나갈 수 있었다. 구글링해가며 오류를 해결해 나갈때의 쾌감이 정말 좋았음!!
진행중에 특히나 클라이언트와 서버간의 데이터 전달에 어려움을 많이 겪었는데 아래의 예시를 첨부한다
$(document).ready(function () {
listing();
});
function listing() {
$.ajax({
type: 'GET',
url: '/posts',
data: {},
success: function (response) {
console.log(response['post'])
let rows = response['post']
for(let i = 0; i<rows.length;i++) {
let mbti =rows[i]['mbti']
let title= rows[i]['title']
let contents = rows[i]['contents']
let writer = rows[i]['userid']
let postnum = rows[i]['num']
let temp_html = `<div class="col">
<div class="card h-100" onclick="move(${postnum})">
<h6 class="card-mbti" id="mbti">게시글번호:${postnum} / MBTI: ${mbti}</h6>
<img src="https://cdn.pixabay.com/photo/2015/07/17/22/43/student-849825_960_720.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" id="title">${title}</h5>
<h6 class="card-title" id="">${writer}님의 글</h6>
<p class="card-text" id="contents">
${contents}
</p>
<button onclick="move(${postnum})">글로이동</button>
</div>
</div>
</div>`
$('#post-box').append(temp_html)
}
}
})
}
메인페이지에서 서버로 게시글 전체 목록을 요청하는함수이다
@app.route("/posts", methods=["GET"])
def posts_get():
posts_list = list(db.post.find({},{'_id':False}))
return jsonify({'post':posts_list})
서버에선 데이터베이스에 모든 게시글을 담아 클라이언트로 전송하여준다
function move(postnum) {
$.ajax({
type: "POST",
url: "/index",
data: {
postnum_give: postnum
},
success: function (response) {
let rows = response['postinfo']
console.log(rows['num'])
let postnum = rows['num']
window.location.href='/index?postnum='+postnum;
}
})
}
메인페이지에서 특정 게시글을 클릭하였을때 서버로 요청하는 코드이다
서버로 해당게시글 번호를 데이터로 같이 넘겨 준다
<button onclick="move(${postnum})">글로이동</button>
위처럼 게시글 목록을 받아올때 게시글 번호가 전달되어 버튼이 생성되는걸 확인하자!
@app.route("/index", methods=["POST"])
def contents_get():
postnum_receive = request.form['postnum_give']
print(postnum_receive)
# ok
content = db.post.find_one({'num':int(postnum_receive)},{'_id':False})
print(content)
return jsonify({'postinfo':content})
이후 서버는 전달받은 게시글 번호로 데이터베이스에 게시글을 찾은 후 클라이언트로 전달 해준다!
$(document).ready(function () {
show_mbti();
});
function show_mbti() {
let hashes = window.location.href.slice(window.location.href.indexOf('?') + 9)
console.log(hashes)
console.log(hashes)
console.log(hashes)
$('#mbti-writing').empty()
$.ajax({
type: "POST",
url: "/api/index",
data: { postnum_give : hashes},
success: function (response) {
console.log(response['post'])
let row = response['post']
let title = row['title']
let mbti = row['mbti']
let contents = row['contents']
let user = row['userid']
let num = row['num']
let temp_html = `<h1>${title}</h1>
<p>작성자: ${user} //게시물 번호: ${num}</p>
<div id="align_body">
<div id="mbti_check">
${mbti}
</div>
</div>
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">${contents}</textarea>
</div>`
$('#mbti-writing').append(temp_html)
}
});
}
이후 게시글 조회 페이지의 자바스크립트 코드이다 쿼리파라미터로 전달해준 postnum의 값을
let hashes = window.location.href.slice(window.location.href.indexOf('?') + 9)
로 가져와서 사용해준다!
@app.route("/api/index", methods=["POST"])
def post_get():
post_receive = request.form['postnum_give']
post = db.post.find_one({'num':int(post_receive)},{'_id':False})
return jsonify({'post':post})
이후 서버에서 클라이언트로부터 받은 게시글번호를 통하여 db검색 후 클라이언트로 반환해준다!
아마 좀더 생략가능하고 간략하게 줄일 수 있는 부분이 많을거라 생각하지만 오류없이 작성 완료 했다는것에 크게 뿌듯함을 느낄수 있었다 :)