팬명록 응용 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

팬명록 응용

undefined주차

김*석

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

추가하기 버튼 누르면 콘솔에 아래와 같이 나오면서 진행이 안 됩니다

import certifi

from pymongo import MongoClient

from flask import Flask, render_template, request, jsonify

application = app = Flask(__name__)

ca = certifi.where()

client = MongoClient(

'mongodb+srv://sparta:test@cluster0.rvfdb4x.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)

db = client.dbsparta

@app.route("/guestbook", methods=["POST"])

def guestbook_post():

name_receive = request.form['name_give']

pros_receive = request.form['pros_give']

blog_receive = request.form['blog_give']

mbti_receive = request.form['mbti_give']

selso_receive = request.form['selso_give']

coworkst_receive = request.form['coworkst_give']

doc = {

'name': name_receive,

'pros': pros_receive,

'blog': blog_receive,

'mbti': mbti_receive,

'selso': selso_receive,

'coworkst': coworkst_receive

}

db.members.insert_one(doc)

return jsonify({'msg': '저장 완료!'})

@app.route("/guestbook", methods=["GET"])

def guestbook_get():

all_members = list(db.members.find({}, {'_id': False}))

return jsonify({'result': all_members})

if __name__ == '__main__':

app.run()

<!DOCTYPE html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="

crossorigin="anonymous" referrerpolicy="no-referrer" />

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">

</script>

<style>

body {

margin: 0;

background-color: #E9EDF1;

}

.title {

text-align: center;

/* border: 1px solid black; */

height: 300px;

background: linear-gradient(to right, #0F2027, #203A43, #2C5364);

}

.title>h1 {

line-height: 300px;

color: white

}

.container {

padding: 30px;

box-sizing: border-box;

/* border: 1px solid black; */

height: 1500px

}

.container>.info-box {

/* border: 1px solid black; */

height: 320px;

display: flex;

justify-content: space-between;

}

.container>.info-box>.img-card {

display: inline-block;

/* border: 1px solid black; */

width: 50%;

height: 320px;

background-image: url('https://sitem.ssgcdn.com/99/25/28/item/1000053282599_i1_1100.jpg');

background-size: cover;

background-position: center;

}

.container>.info-box>.info-card {

/* border: 1px solid black; */

height: inherit;

width: 50%;

display: inline-block;

margin: 0;

box-sizing: border-box;

padding: 25px;

}

.container>.info-box>.info-card>div:nth-child(1) {

display: flex;

align-items: center;

}

.container>.info-box>.info-card>div:nth-child(1)>.team-icon {

font-size: 30px;

}

.container>.info-box>.info-card>div:nth-child(1)>h3 {

margin-bottom: 0;

margin-left: 10px;

}

.container>.info-box>.info-card>.box-br {

border: 0.1px solid rgba(155, 149, 149, 0.822);

/* height: 1px; */

}

.container>.add-box {

/* border: 1px solid black; */

height: 100px;

display: flex;

align-items: center;

align-content: center;

justify-content: space-evenly;

}

.container>.add-box>.line {

width: 30rem;

border: 1px solid black;

}

.container>.add-box>.circle-in-button {

width: 50px;

height: 50px;

text-align: center;

line-height: 50px;

border-radius: 70%;

}

.container>.add-box>.plus-button {

font-size: 35px;

cursor: pointer;

}

.container>.add-box>.plus-button:hover {

font-size: 35px;

color: white;

cursor: pointer;

}

.container>.input-container {

display: none;

justify-content: center;

margin-bottom: 30px;

/* transition: 1s; */

transition: smooth;

}

.container>.input-container>.input-box {

display: block;

border: 1px solid black;

width: 500px;

/* height: 300px; */

border-radius: 10px;

padding: 20px;

box-sizing: border-box;

}

.container>.input-container>.input-box>.input-list {

margin-top: 1rem;

display: flex;

flex-direction: column;

justify-content: space-around;

}

.container>.input-container>.input-box>.input-list>.button {

margin-top: 1rem;

text-align: center;

}

.member-box {

margin-top: 10px;

/* border: 1px solid black; */

}

.member-box>div:nth-child(1) {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.member-box>div:nth-child(1)>.icon {

font-size: 30px;

margin-right: 10px;

margin-left: 10px;

}

.member-box>div:nth-child(1)>h3 {

margin: 0;

}

.member-box>.member-list {

display: flex;

flex-wrap: wrap;

flex-direction: row;

justify-content: space-between;

/* align-content: space-between; */

}

.member-box>.member-list>.card {

margin-bottom: 20px;

cursor: pointer;

}

.box-padding {

padding: 20px;

box-sizing: border-box;

}

</style>

function showAddBox() {

$('.input-container').fadeToggle().css('display', 'flex');

}

function addMember() {

let name = $('#name').val()

let pros = $('#pros').val()

let blog = $('#blog').val()

let mbti = $('#mbti').val()

let selso = $('#selso').val()

let coworkst = $('#coworkst').val()

let formData = new FormData();

formData.append("name_give", name);

formData.append("pros_give", pros);

formData.append("blog_give", blog);

formData.append("mbti_give", mbti);

formData.append("selso_give", selso);

formData.append("coworkst_give", coworkst);

fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {

alert(data["msg"]);

window.location.reload()

});

}

function show_member() {

fetch('/guestbook').then((res) => res.json()).then((data) => {

let rows = data['result']

$('#member-lists').empty()

rows.forEach((a) => {

let name = a['name']

let pros = a['pros']

let blog = a['blog']

let mbti = a['mbti']

let selso = a['selso']

let coworkst = a['coworkst']

let temp_html = `<div class="card" style="width: 20rem;">

<p class="card-text">${selso}</p>

<p>${coworkst}</p>

</div>

</div>`

$('#member-lists').append(temp_html)

});

})

}

</script>

</head>

<body>

</div>

</div>

<div>

</div>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ullam non sunt fugiat, quia

facilis officiis porro beatae, optio cupiditate labore voluptas cumque necessitatibus culpa?

Doloribus aperiam itaque facilis placeat.

</p>

<el>

</el>

</div>

</div>

<h4>새 멤버추가하기!</h4>

<input type="text" class="form-control" aria-label="Sizing example input"

aria-describedby="inputGroup-sizing-default">

</div>

</div>

<P></P>

<input type="text" class="form-control" aria-label="Sizing example input"

aria-describedby="inputGroup-sizing-default">

</div>

<input type="text" class="form-control" aria-label="Sizing example input"

aria-describedby="inputGroup-sizing-default">

</div>

<input type="text" class="form-control" aria-label="Sizing example input"

aria-describedby="inputGroup-sizing-default">

</div>

<input type="text" class="form-control" aria-label="Sizing example input"

aria-describedby="inputGroup-sizing-default">

</div>

</div>

<br>

<div>

<h3>우리 멤버 보고가세요~</h3>

</div>

<img src="https://cat-lab.co.kr/data/editor/2208/44260b1422d6d1c37cb8924eda0ff0da_1660874550_4264.jpg"

class="card-img-top" alt="...">

<p class="card-text">Some quick example text to build on the card title and make up the bulk of

the card's content.</p>

</div>

<img src="https://cat-lab.co.kr/data/editor/2208/44260b1422d6d1c37cb8924eda0ff0da_1660874550_4264.jpg"

class="card-img-top" alt="...">

<p class="card-text">Some quick example text to build on the card title and make up the bulk of

the card's content.</p>

<p>coworkst</p>

</div>

<img src="https://cat-lab.co.kr/data/editor/2208/44260b1422d6d1c37cb8924eda0ff0da_1660874550_4264.jpg"

class="card-img-top" alt="...">

<p class="card-text">Some quick example text to build on the card title and make up the bulk of

the card's content.</p>

</div>

<img src="https://cat-lab.co.kr/data/editor/2208/44260b1422d6d1c37cb8924eda0ff0da_1660874550_4264.jpg"

class="card-img-top" alt="...">

<p class="card-text">Some quick example text to build on the card title and make up the bulk of

the card's content.</p>

</div>

<img src="https://cat-lab.co.kr/data/editor/2208/44260b1422d6d1c37cb8924eda0ff0da_1660874550_4264.jpg"

class="card-img-top" alt="...">

<p class="card-text">Some quick example text to build on the card title and make up the bulk of

the card's content.</p>

</div>

</body>

</html>

댓글 알림