WEB/python

[python] 플라스크 서버 만들기/ 포스팅, 리스팅 기능/POST, GET ajax코드와 api연결 (스파르타 나홀로 일기장 실습)

자바칩 프라푸치노 2021. 6. 8. 12:29

2021.06.08 - [WEB/python] - [python] pycharm 프로젝트 만들기 flask, pymongo, pyjwt설치 jinja2

 

[python] pycharm 프로젝트 만들기 flask, pymongo, pyjwt설치 jinja2

file-- newproject를 만든다 Create a main.py welocome script해제 하고 create file-settings에 가서 interperter을 검색하고 플러스 버튼을 누른다 flask pymongo pyjwt 를 설치한다. static, templates폴더..

sso-feeling.tistory.com

 

기본 플라스크 코드를 app.py에 넣는다

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

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

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

전체 코드

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

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


@app.route('/diary', methods=['GET'])
def show_diary():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'GET 연결 완료!'})

@app.route('/diary', methods=['POST'])
def save_diary():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 요청 완료!'})


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



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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"></script>

  <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

  <style>
    *{
      font-family: 'Do Hyeon', sans-serif;
    }
    .posting-box{
      width: 500px;
      margin-top: 20px;
    }
    .wrap{
      width: 900px;
      margin: auto;
    }
    .container{
      padding-left: 50px;
    }
  </style>
  <script>
    $(document).ready(function () {
      listing()
    })

    function listing(){
      $.ajax({
        type: "GET",
        url: "/diary?sample_give=샘플데이터",
        data: {},
        success: function(response){
          alert(response['msg'])
        }
      })
    }
    function posting(){
      $.ajax({
        type: "POST",
        url: "/diary",
        data: { sample_give:'샘플데이터' },
        success: function(response){
          alert(response['msg'])
        }
      })
    }

  </script>
</head>

<body>
<div class="wrap">
  <div class="jumbotron">
    <div class="container">
      <h1>나홀로 일기장</h1>
      <div class="posting-box">
        <div class="form-group">
          <label for="exampleFormControlInput1"></label>
          <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="사진 제목">
        </div>
        <div class="form-group">
          <label for="exampleFormControlTextarea1"></label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="내용 입력"></textarea>
        </div>
        <button onclick="posting()" type="button" class="btn btn-primary">저장하기</button>
      </div>
    </div>
  </div>
  <div class="card-columns">
    <div class="card">
      <!--    <img class="card-img-top" src="..." alt="Card image cap">-->
      <div class="card-body">
        <h5 class="card-title">창덕궁</h5>
        <p class="card-text">날씨가 참 좋았다</p>
      </div>
    </div>
    <div class="card">
      <!--    <img class="card-img-top" src="..." alt="Card image cap">-->
      <div class="card-body">
        <h5 class="card-title">창덕궁</h5>
        <p class="card-text">날씨가 참 좋았다</p>
      </div>
    </div>
    <div class="card">
      <!--    <img class="card-img-top" src="..." alt="Card image cap">-->
      <div class="card-body">
        <h5 class="card-title">창덕궁</h5>
        <p class="card-text">날씨가 참 좋았다</p>
      </div>
    </div>
    <div class="card">
      <!--    <img class="card-img-top" src="..." alt="Card image cap">-->
      <div class="card-body">
        <h5 class="card-title">창덕궁</h5>
        <p class="card-text">날씨가 참 좋았다</p>
      </div>
    </div>
    <div class="card">
      <!--    <img class="card-img-top" src="..." alt="Card image cap">-->
      <div class="card-body">
        <h5 class="card-title">창덕궁</h5>
        <p class="card-text">날씨가 참 좋았다</p>
      </div>
    </div>
  </div>
</div>

</body>

</html>

 

우리 페이지에서만 보는게 아니라 플라스크 서버를 만들어서

localhost에서 볼 수 있게 만든다

남들도 똑같이 local에서 볼 수 있도록

크롬에서 localhost:5000을 치면 나온다.

기본 플라스크 서버에서 포트번호를 5000번으로 했기 때문

 

 

로딩이 되자마자 저장되어있는 글들이 나와야한다.

이 코드를 통해 로딩이 되자마자 listing이라는 함수를 불러온다.

 

listing()이다.

ajax코드를 넣는다.

get요청을 한다.

data줄것은 없으니 비워놓고

success가 되면 reponse에 메세지를 넣어서 alert하라고 했다.

API와 연결을 해야한다.

 

포스팅하는 기능

버튼을 누르면 posting함수가 실행된다.

POST요청을 한다.

data로 sample_give를 보낸다.

app.py에 API코드를 연결한다.

728x90
저작자표시 비영리 변경금지

'WEB > python' 카테고리의 다른 글

[python] 사진 업로드 되고 그것을 바로 보여주게 하는 법  (0) 2021.06.08
[python] 리스팅api만들기/ 제목과 내용을 써서 저장하면 바로 나타나게 하기  (0) 2021.06.08
[python] 포스팅api만들기/ 제목과 내용이 db에 저장되게 하기  (0) 2021.06.08
회원가입 로그인이 유지되는 원리  (0) 2021.06.08
[python] pycharm 프로젝트 만들기 flask, pymongo, pyjwt설치 jinja2  (0) 2021.06.08

'WEB/python'의 다른글

  • 현재글[python] 플라스크 서버 만들기/ 포스팅, 리스팅 기능/POST, GET ajax코드와 api연결 (스파르타 나홀로 일기장 실습)

관련글

티스토리툴바