오늘만든 팀프로젝트
기본적으로 디자인의 경우 부트스트랩을 이용하여 만들어 졌고
main.css, main.js 이런 식으로 파일분리를 했다.
여기서 한 가지 이슈가 있었는데
Flask 서버는
app = Flask(__name__,static_folder="templates", static_url_path='')
여기서 static_folder를 기준으로 파일을 인식하기 때문에 서버로 파일을 열었을때
각종 CSS들을 불러오지 못하는 상황이 발생하였다. 처음에는 HTML에서 url_for 을 사용해서 절대경로로 바꾸어 주는
진자 문법을 사용하였는데 하나하나 바꾸기가 너무 힘들고 그래서 위 코드에서 스태틱 폴더를 바꾸어 문제를 해결 하였다.
먼저 페이지가 어떻게 구성이 되어 있는지 설명을 하겠다.
구성품
html 파일은 index.html, profile_detail.html, profile_detail_input.html , user_profile.html
로 구성이 되어 있다.
아, 그리고 fixed_detail 이란 파일도 있는데 그냥 정크파일이다. (수정의 흔적들...)
이건 다음부터는 바로바로 지워야 겟다.
서버는 app.py 파일로 flask를 이용하여 구동한다.
먼저 서버가 열리면 메인페이지와 코멘트를 불러온다.
@app.route('/')
def home():
comments = list(userComment.find({},{'_id':False}))
return render_template('index.html',comments=comments)
메인 페이지(index.html)에서 각각의 멤버카드를 누르면 디테일페이지로 이동하는데
여기서 디테일 페이지의 주소는 /profile + /1~5까지의 숫자이다.
여기서 멤버별로 각각 고유번호가 할당되어 있어서
주소에 따라서 각 멤버의 디테일을 서버에 호출한다.
@app.route('/profile/<usernum>',methods=["GET"])
def profile(usernum):
user = db.user_info.find_one({'usernum':int(usernum)},{'_id':False})
print(user)
modify = url_for('input',usernum=usernum)
return render_template('user_profile.html',user=user,modify=modify)
여기서 usernum 이 멤버의 식별번호이다.
@app.route('/profile/<usernum>',methods=["GET"])
@app.route
는 app.route뒤에 주소로 요청이 들어오면 다음 함수를 실행시키는 함수이다.
profile 함수는 usernum 이라는 str을 (사실은 숫자) 인풋으로 받는다.
그 다음 db에서 usernum(유저의 식별번호)가 {'usernum':int(usernum)}
인 유저의 모든 정보를 딕션너리 형태로 user 에 저장한다. .
modify = url_for('input',usernum=usernum)
이건 수정페이지를 열기 위한 url 주소를 생성하는 코드다
url_for이 진자 문법에도 있어서 햇갈렸는데 flask의 함수인 url_for 은 다른 문제이다.
return render_template('user_profile.html',user=user,modify=modify)
user_profile.html이랑 user 정보, 그리고 수정페이지 url주소 생성한것 을 리턴한다.
user_profile.html 페이지는
이런 식으로 진자 문법을 사용하여 받아온 유저데이터를 html로 출력한다.
@app.route('/profile/<usernum>/input',methods=["GET","POST"])
def input(usernum):
if request.method == "GET":
user = db.user_info.find_one({'usernum':int(usernum)},{'_id':False})
return render_template('profile_detail_input.html',user=user)
elif request.method == "POST":
form = request.form
doc = {
'mbti': form['mbti'],
'email':form['email'],
'photo_url':form['photo_url'],
'blog_url':form['blog_url'],
'interest':form['interest'],
'aboutme':form['aboutme'],
'javascript':form['Javascript'],
'HTML':form['HTML'],
'CSS':form['CSS'],
'Python':form['Python'],
'Promise':form['Promise']
}
db.user_info.update_one({"usernum": int(usernum)}, {"$set": doc})
print(doc)
return redirect(url_for('profile', usernum=int(usernum)))
이건 input 페이지에서 유저정보를 수정할때 입력쓴 코드이다.
get 요청과 post 요청을 받고있고 요청마다 if 문을 사용하여 구분 하였다.
요청이 get이면 db에서 usernum 에 해당하는 사람의 정보를 가져오고 profile_detail_input 창을 연다.
요청이 post이면 mbti, 이메일주소, 사진정보 등의 데이터를 받아 db에 업데이트 시킨다.
그리고 위 코드들에서 print문은 확인하기위한 코드로 실제 홈페이지 구동과는 상관이 없다.
url_for 의 경우 여기서는 진자 문법이 아닌 Flask 에서 제공하는 함수로 라우트된 함수의 Url 경로를 반환단다.
return redirect(url_for('profile', usernum=int(usernum)))
즉, 이 함수는 profile 함수에 usernum 값을 전달하는 url 주소를 반환한다.
팀플 코드의 백엔드 부분은 이런 식으로 구성되어 있다.
마음에 드는 코드
function moveback() {
window.location.href = "profile_detail.html"
}
function save_info() {
let user_num = $('#user_num').val()
let name = $('#input_name').val()
let mbti = $('#mbti').val()
let email = $('#email').val()
let photo_url = $('#photo_url').val()
let blog_url = $('#blog_url').val()
let interest = $('#interest').val()
let aboutme = $('#aboutme').val()
let javascript = $('#javascript').val()
let CSS = $('#CSS').val()
let HTML = $('#HTML').val()
let Python = $('#Python').val()
let Promise = $('#Promise').val()
console.log(1)
let formData = new FormData();
formData.append("user_num_give", user_num);
formData.append("user_name_give", name);
formData.append("mbti_give", mbti);
formData.append("email_give", email);
formData.append("photo_url_give", photo_url);
formData.append("blog_url_give", blog_url);
formData.append("interest_give", interest);
formData.append("aboutme_give", aboutme);
formData.append("javascript_give", javascript);
formData.append("CSS_give", CSS);
formData.append("HTML_give", HTML);
formData.append("Python_give", Python);
formData.append("Promise_give", Promise);
fetch('/write_post', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
console.log(data)
alert(data["msg"])
window.location.reload()
});
}
입력된 정보를 저장하는 코드이다. 내가 맘에 드는 코드 잘 만들었다곤 생각 안하지만 내가 만든것이기 때문
일단 코드가 너무 길다. 내가 좀더 생각해서 썻다면 좀 짧게 쓸수 있었을 텐데 라는 생각을 한다.
그리고 확인용으로 넣은 console 메세지들도 지우지 않았다. 왜 지우지 않았는지... 그냥 완성하고 제출하고 보니
남아있었다.