팀프로젝트(팀 소개페이지)
팀명 : C.A.I(Comic Artificial Intelligence)
내일배움캠프가 AI 웹개발 기수라서 붙인 AI와 관심사별 팀 분배에서 우리팀이 만화로 나왔기 때문에 만화를 붙힌 합성어로 팀명을 정했다.
와이어프레임
기본적으로 메인페이지와 상세 프로필창으로 구성되며 메인페이지의 각 구역을 마우스로 호버하면 슬라이딩이 되는 기능을 구현할 예정
상세프로필의 경우 오른쪽의 기밀문서 이미지를 오마주할 예정이다.
각자 역할 배분을 마치고 나는 "상세프로필 데이터 표시" 업무를 맡게 되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>C.A.I info</title>
<link rel="stylesheet" href="../static/main.css">
<script>
$(document).ready(function () {
listing();
});
function listing() {
fetch('/profile/kim').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#김태연').empty()
rows.forEach((a) => {
let name = a['name']
let age = a['age']
let gender = a['gender']
let mbti = a['mbti']
let tmi = a['tmi']
let temp_html = `<div>
<p>이름: ${name}</p>
<p>나이: ${age}</p>
<p>성별: ${gender}</p>
<p>MBTI: ${mbti}</p>
<p>TMI: ${tmi}</p>
</div>`
$('#김태연').append(temp_html)
console.log(temp_html)
})
})
fetch('/profile/choi').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#최창수').empty()
rows.forEach((a) => {
let name = a['name']
let age = a['age']
let gender = a['gender']
let mbti = a['mbti']
let tmi = a['tmi']
let temp_html = `<div>
<p>이름: ${name}</p>
<p>나이: ${age}</p>
<p>성별: ${gender}</p>
<p>MBTI: ${mbti}</p>
<p>TMI: ${tmi}</p>
</div>`
$('#최창수').append(temp_html)
console.log(temp_html)
})
})
fetch('/profile/yeon').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#연제건').empty()
rows.forEach((a) => {
let name = a['name']
let age = a['age']
let gender = a['gender']
let mbti = a['mbti']
let tmi = a['tmi']
let temp_html = `<div>
<p>이름: ${name}</p>
<p>나이: ${age}</p>
<p>성별: ${gender}</p>
<p>MBTI: ${mbti}</p>
<p>TMI: ${tmi}</p>
</div>`
$('#연제건').append(temp_html)
console.log(temp_html)
})
})
fetch('/profile/jang').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#장우석').empty()
rows.forEach((a) => {
let name = a['name']
let age = a['age']
let gender = a['gender']
let mbti = a['mbti']
let tmi = a['tmi']
let temp_html = `<div>
<p>이름: ${name}</p>
<p>나이: ${age}</p>
<p>성별: ${gender}</p>
<p>MBTI: ${mbti}</p>
<p>TMI: ${tmi}</p>
</div>`
$('#장우석').append(temp_html)
console.log(temp_html)
})
})
fetch('/profile/leader').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#최재영').empty()
rows.forEach((a) => {
let name = a['name']
let age = a['age']
let gender = a['gender']
let mbti = a['mbti']
let tmi = a['tmi']
let temp_html = `<div>
<p>이름: ${name}</p>
<p>나이: ${age}</p>
<p>성별: ${gender}</p>
<p>MBTI: ${mbti}</p>
<p>TMI: ${tmi}</p>
</div>`
$('#최재영').append(temp_html)
console.log(temp_html)
})
})
}
</script>
</head>
<body>
<div class= "bubble">
제목을 입력합니다
</div>
<div class = "box1", id="최재영">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box2", id="최창수">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box3", id="장우석">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box4", id="연제건">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box5", id="김태연">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box6", id="teamdesc">
<p> 이미지를 삽입합니다. </p>
</div>
<div class = "box7", id="teamimg">
<p> 이미지를 삽입합니다. </p>
</div>
</body>
</html>from flask import Flask, render_template, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://animal:test@tiger.5x89iox.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('main.html')
@app.route("/profile/kim", methods=["GET"])
def profile_get_kim():
kim_profiles = list(db.profile.find({"name": "김태연"},{'_id':False}))
return jsonify({'result':kim_profiles})
@app.route("/profile/choi", methods=["GET"])
def profile_get_choi():
choi_profiles = list(db.profile.find({"name": "최창수"},{'_id':False}))
return jsonify({'result':choi_profiles})
@app.route("/profile/yeon", methods=["GET"])
def profile_get_yeon():
yeon_profiles = list(db.profile.find({"name": "연제건"},{'_id':False}))
return jsonify({'result':yeon_profiles})
@app.route("/profile/jang", methods=["GET"])
def profile_get_jang():
jang_profiles = list(db.profile.find({"name": "장우석"},{'_id':False}))
return jsonify({'result':jang_profiles})
@app.route("/profile/leader", methods=["GET"])
def profile_get_leader():
leader_profiles = list(db.profile.find({"name": "최재영"},{'_id':False}))
return jsonify({'result':leader_profiles})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)데이터베이스에 있는 내용을 페이지에 가져오기 위한 API를 만들었다. 본 계획은 하나의 API로 모든 데이터를 넣은 뒤 HTML문서에서 DIV에 할당된 ID에 데이터베이스에 있는 name의 값을 집어넣어 JavaScript로 데이터를 가져올때 해당 ID를 가진 DIV로 들어가게 만들고자 하였다.
그러나 아쉽게도 좋은 방안을 찾지못해 일단 구현한 모습을 보고자 깡코딩으로 밀어넣게 되었다. 종료회의 결과 팀원 한분과 함께 라이브쉐어 라는 프로그래밍으로 함께 구현하기로 하였다.
이제 막 개발 배우는 코린이