커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
질문
undefined주차
북마크
임*빈
댓글
4
・
추천
0
・
조회수
13
조회수
13
답변 완료

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

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



스파르타피디아 응용해서 다른 페이지 만들고 있는데

몽고디비 연결도 되고 코드도 잘 수정한 것 같은데

데이터 입력이 안됩니다 ㅠ

홈페이지창에도 undefined라고 나오고요

스파르타 즉문즉답






작성한 코드 및 에러 메세지

<!DOCTYPE html>

<html lang="ko">


<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>


<title>Who Am I</title>


<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />


<style>

* {

font-family: "Gowun Dodum", sans-serif;

}


.tit-wrap {

margin: 0 auto;

max-width: 1200px;

}


.title {

display: block;

padding-top: 1.6rem;

padding-right: 1.6rem;

font-size: 1.5rem;

color: #ff792a;

line-height: 1.35em;

text-align: left;

}


.mytitle {

width: 100%;

height: 450px;


background-image: linear-gradient(0deg,

rgba(0, 0, 0, 0.5),

rgba(0, 0, 0, 0.5)),

url("https://play-lh.googleusercontent.com/proxy/QlnZEErEiSRuYbM1bNcoAxJHL2xbWcgsXDLkCqOZCW8kMymhlbYWmhU4diLoe0wyZ7mTZ3TjnDXjnoM2us3Zpo38Bxw1H7MMpB-MjAej63GH4BGmH4iXSABN1DhVovc7kG045qfrRt103vFGLIx17-0yc5DSKlgnnc6cCw=s1920-w1920-h1080");

background-position: 10% 30%;

background-size: cover;


color: white;


display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}


.mytitle>button {

width: 150px;

height: 50px;


background-color: transparent;

color: white;


border-radius: 50px;

border: 1px solid white;


margin-top: 10px;

}


.mytitle>button:hover {

border: 2px solid white;

}


.mycomment {

color: gray;

}


.mycards {

margin: 20px auto 0px auto;

width: 95%;

max-width: 1200px;

}


.mypost {

width: 95%;

max-width: 500px;

margin: 20px auto 15px auto;

padding: 20px;

}


.mybtns {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;


margin-top: 20px;

}


.mybtns>button {

margin-right: 10px;

}


.modal {

background: rgb(0, 0, 0, 0.7);

}


.modal-dialog {

top: 39.5%;

margin-top: -50px;

}


.card-name {

display: -webkit-box;

height: 75px;

word-wrap: break-word;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

overflow: hidden;

}


.card-text {

display: -webkit-box;

min-height: 100px;

max-height: 150px;

word-wrap: break-word;

-webkit-line-clamp: 7;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

overflow: hidden;

}


.card-img,

.card-img-bottom,

.card-img-top {

height: 200px;

object-fit: cover;

}

</style>

<script>

$(document).ready(function () {

listing();

});


function listing() {

fetch("/introduce")

.then((res) => res.json())

.then((data) => {

//console.log(data);

//alert(data["msg"]);

let rows = data["result"];

//console.log(rows)

$("#cards-box").empty();

rows.forEach((a) => {

let image = a["image"];

let name = a["name"];

let age = a["age"];

let resident = a["resident"];

let major = a["major"];

let hobby = a["hobby"];

let comment = a["comment"];




let temp_html = `<div class="col">

<div class="card h-100">

<img

src="${image}"

class="card-img-top"

/>

<div class="card-body">

<h5 class="card-name">${name}/h5>

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

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

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

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

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

</div>

</div>

</div>`;


$("#cards-box").append(temp_html);

});

});

}


function posting() {

let url = $("#url").val();

let name = $("#name").val();

let age = $("#age").val();

let resident = $("#resident").val();

let major = $("#major").val();

let hobby = $("#hobby").val();

let comment = $("#comment").val();



let formData = new FormData();

formData.append("url_give", url);

formData.append("name_give", name);

formData.append("age_give", age);

formData.append("resident_give", resident);

formData.append("major_give", major);

formData.append("hobby_give", hobby);

formData.append("comment_give", comment);



fetch("/introduce", { method: "POST", body: formData })

.then((res) => res.json())

.then((data) => {

//console.log(data);

alert(data["msg"]);

window.location.reload(); //새로고침

});

}


const myModal = document.getElementById('myModal')

const myInput = document.getElementById('myInput')


myModal.addEventListener('shown.bs.modal', () => {

myInput.focus()

})



function open_box() {

$(".modal").show();

}

function close_box() {

$(".modal").hide();

}


</script>

</head>


<body>


<div class="mytitle">

<h1>Who M I</h1>

<button onclick="open_box()">입력하기</button>

</div>

</div>


<div class="tit-wrap">

<h2 class="title">나를 소개합니다&#x1F601;</h2>


</div>


<div class="mycards">

<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" />

<div class="card-body">

<h5 class="card-name">이름</h5>

<p class="card-text">내용0</p>

<p class="card-text">내용1</p>

<p class="card-text">내용2</p>

<p class="card-text">내용3</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" />

<div class="card-body">

<h5 class="card-name">이름</h5>

<p class="card-text">내용0</p>

<p class="card-text">내용1</p>

<p class="card-text">내용2</p>

<p class="card-text">내용3</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" />

<div class="card-body">

<h5 class="card-name">이름</h5>

<p class="card-text">내용0</p>

<p class="card-text">내용1</p>

<p class="card-text">내용2</p>

<p class="card-text">내용3</p>

</div>

</div>

</div>

<div class="col">

<div class="card h-100">

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" />

<div class="card-body">

<h5 class="card-name">이름</h5>

<p class="card-text">내용0</p>

<p class="card-text">내용1</p>

<p class="card-text">내용2</p>

<p class="card-text">내용3</p>

</div>

</div>

</div>

</div>

</div>



<div class="modal" tabindex="-1">

<div class="modal-dialog">

<div class="modal-content">


<div class="mypost" id="post-box">

<div class="form-floating mb-3">

<input id="url" type="email" class="form-control" placeholder="name@example.com" />

<label>사진 URL</label>

</div>

<div class="input-group mb-3">

<span class="input-group-text" id="name">이름</span>

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

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

</div>

<div class="input-group mb-3">

<span class="input-group-text" id="inputGroup-sizing-default">나이</span>

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

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

</div>

<div class="input-group mb-3">

<span class="input-group-text" id="inputGroup-sizing-default">거주 지역</span>

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

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

</div>

<div class="input-group mb-3">

<span class="input-group-text" id="inputGroup-sizing-default">전공</span>

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

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

</div>

<div class="input-group mb-3">

<span class="input-group-text" id="inputGroup-sizing-default">취미</span>

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

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

</div>

<div class="form-floating">

<textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>

<label for="floatingTextarea2">코멘트</label>

</div>

<div class="mybtns">

<button onclick="posting()" type="button" class="btn btn-dark">

등록하기

</button>

<button onclick="close_box()" type="button" class="btn btn-outline-dark">

닫기

</button>

</div>

</div>

</div>

</div>

</div>

</body>


</html>


# 크롤링 기본 코드

import certifi

from pymongo import MongoClient

import requests

from bs4 import BeautifulSoup


# flask 서버

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


# mongo DB


ca = certifi.where()


client = MongoClient(

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

db = client.dbsparta



@app.route('/')

def home():

return render_template('index.html')



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

def introduce_post():

url_receive = request.form['url_give']

name_receive = request.form['name_give']

age_receive = request.form['age_give']

resident_receive = request.form['resident_give']

major_receive = request.form['major_give']

hobby_receive = request.form['hobby_give']

comment_receive = request.form['comment_give']


doc = {

'image': url_receive,

'name': name_receive,

'age': age_receive,

'resident': resident_receive,

'major': major_receive,

'hobby': hobby_receive,

'comment': comment_receive

}

db.introduce.insert_one(doc)


# print(urk_receive)

return jsonify({'msg': 'POST 연결 완료!'})



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

def introduce_get():

all_introduce = list(db.introduce.find({}, {'_id': False}))

return jsonify({'result': all_introduce})



if __name__ == '__main__':

app.run('0.0.0.0', port=5001, debug=True)


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴