미니 프로젝트 하는중에 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

미니 프로젝트 하는중에

undefined주차

이*완

・

추천

・

조회수

답변 완료

제가 html을 만들고 그걸 플라스크에 넣어서 app.py로 해서 실해한후 localhost5000 으로 띄울려고 하는데 이런 페이지가 나오네요

app.py  코드 입니다 이건 아직 다 완성된게 아니라 화면이 나오는지 확인할려고 수럽중에 있던 코드복붙한거에요


from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('write.html')

@app.route("/bucket", methods=["POST"])
def bucket_post():
        sample_receive = request.form['sample_give']
        print(sample_receive)
        return jsonify({'msg': 'POST(기록) 연결 완료!'})

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(완료) 연결 완료!'})

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

이건 제가 작성한 html 코드인데 여기서 오류가 난거 같은데 어느부분인지 잘 모르겠네요

<!doctype html>
<html lang="en">

<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>writing</title>
    <link href="https: //fonts.googleapis.com/css2? family= 노토+산스+KR:wght@100;300 &family= Noto+Serif & display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif', serif;
        }

        .write_title {

            max-width: 2000px;
            width: 100%;
            height: 150px;

            background-image: url("data:image/jpeg;base64,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");
            background-position: center;
            background-size: cover;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .write_box {
            max-width: 1200px;
            width: 95%;
            width: 500px;

            margin: 100px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;
        }

        .preview{
           width: 460px;
            height: 200px;
            margin: 10px 0px 10px 0px;
        }
        .btn{
           text-align: center;
        }
    </style>
<script src="http://madalla.kr/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#myFile").on('change', function(){
    readURL(this);
    });
});
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#View').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

</head>

<body>
<div class="write_title">
    <h1>Instargram</h1>
</div>
<div class="write_box">

    <div id="imgForm" >
    <input type='file' id="myFile" />
    <img id="View" src="#" alt="이미지 미리보기" class="preview" />
  </div>

    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2"></label>
    </div>
    <div class="btn">
        <a href="" type="button" class="btn btn-light">저장하기</a>
    </div>

</div>

</body>

</html>

댓글 알림