코드는 가장 아래에...
새로운 팀원들과 팀원들을 소개하는 미니프로젝트를 만들었다.
나의 담당은 POST 데이터를 등록하거나 댓글을 달 때 db에 저장해주는 기능이다.
데이터를 꺼내오는 GET기능이나 UPDATE, DELETE같은 다른기능들은 다른 분들이 맡아주시고 프론트 쪽도 한분이 맡아주셨다.
오늘은 OT다 GIT특강이다 서로 소개하고, 와이어 프레임, 역할분담 정신이 없었는데, 댓글등록 기능과 팀원을 추가하는 포스트기능을 만들었다. 화면에 프론트적으로 아직 나오게는 못 만들었지만 db에 착실이 쌓이는걸 확인했다.
POST기능을 맡아서 해본건 처음이었지만 생각보다 간단했다.
큰 틀은 위와같은 모양새로
request로 받아오고 ▶︎ dictionary형태로 db에 저장 ▶︎ 완료시 메세지 출력.
의 모양을 띄고 있었다.
javascript또한 비슷한 모양새 였는데
위와 같이 id값을 찾아 밸류를 갖고와서 서버로 넘겨주는 일이 전부였다.
위와같이 id값을 지정하고 버튼을 누를 시 함수를 호출해준다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestPage</title>
<style>
.text-box{
display: block;
font-size: 20px;
width: 255px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border: solid 1px gray;
}
textarea{
resize: none;
/* textarea 크기가 변경되는걸 고정시켜주는 코드입니다. */
}
</style>
<script>
// function newTab(id){
// window.open(id,"_blank");
// }
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('/introduce/comment', {method: "POST", body: formData
}).then((res) => res.json()).then((data) =>{
alert(data['msg'])
window.location.reload();
})
}
function posting(){
//이름을 id값으로 찾아 밸류를 저장
let name = $('#name').val();
//이미지url을 id값으로 찾아 밸류를 저장
let img_url = $('#img_url').val();
//소개1을 id값으로 찾아 밸류를 저장
let introduce_1 = $('#introduce_1').val();
//소개2를 id값으로 찾아 밸류를 저장
let introduce_2 = $('#introduce_2').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);
formData.append("introduce_2_give",introduce_2);
//서버로 넘겨준다.
fetch('/introduce/detail/new', {method: "POST", body: formData
}).then((res) => res.json()).then((data) =>{
alert(data['msg']) //완료시 alert로 메세지 출력
window.location.reload();//화면 새로고침 코드
})
}
</script>
</head>
<body>
<h1 >테스트용 Main 페이지 입니다.</h1>
<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>
<h2>팀원 추가</h2>
<input id="name" class="text-box" type="text" placeholder="이름">
<input id="img_url" class="text-box" type="text" placeholder="이미지url">
<textarea id="introduce_1" placeholder="팀원소개 1" id="comment" cols="30" rows="10"></textarea>
<textarea id="introduce_2" placeholder="팀원소개 2" id="comment" cols="30" rows="10"></textarea>
<button onclick="posting()" style="display: block;">팀원추가</button>
</div>
<!-- 이름, 코멘트, 사진이미지 -->
</body>
</html>
app.py
mac기준 코드이므로 앞 import부분에 추가된것이 있고, port번호도 5000번이 아닌 5001번이다.
mongoClient 끝도 확인하자
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')
@app.route('/introduce/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.luckey_comment.insert_one(doc)
return jsonify({'msg' : '댓글 등록 완료!'})#성공시 메세지출력
@app.route('/introduce/detail/new', 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 받아오기
introduce_2 = request.form['introduce_2_give']
doc = {
'img_url' : img_url,
'name' : name,
'introduce_1': introduce_1,
'introduce_2': introduce_2
}
#dictionary형태로 저장
db.luckey_users.insert_one(doc)
return jsonify({'msg' : '팀원추가 완료!'})#성공시 메세지 출력
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)