01.Flask 기초 - Vue & Falsk & Bootstrap

ID짱재·2021년 4월 26일

Flask

목록 보기

6/8

🌈

🔥 부트스트랩과 CDN

🔥 Vue와 CDN

🔥 REST API method 정의하기

1. 부트스트랩과 CDN

CDN(Contents Delivery Network)은 지리적, 물리적으로 거리가 있는 사용자에게 서버의 컨텐츠를 더 빠르게 제공할 수 있는 기술
사용자가 멀리있는 서버로부터 컨텐츠를 다운 받으면 시간이 소요되기 때문에, 사용자와 가까운 곳에 위치한 Cashe Server에 해당 컨텐츠를 제공해 놓고, 요청하는 경우 서버가 아닌 Cache Server가 응답함
부트스트랩과 같은 라이브러리를 사용할 때, 파일을 다운 받아 작업 경로에 파일을 위치시켜놓고 사용할 수도 있으나, 이런 CDN 기술을 이용하여 경로(css, javascript)를 지정해 놓고도 사용하는 방법도 있음
이렇게 다운로드 방법과, CDN방법을 모두 제공하는 경우가 많음
부트스트랩 CDN 사용하는 방법 : https://getbootstrap.com/docs/5.0/getting-started/introduction/

2. Vue와 CDN

Vue를 CDN 방식으로 html에 가져오는 방법은 아래 코드 body 아랫 부분에 추가
첫번째 <script src>가 Vue를 CDN 방식으로 연결해주는 것이고, 두번째 <script src>는 axios 방식으로 통신하기 위해 추가된 것

✍🏻 html에서 Vue를 CDN으로 연결

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue를 통해 html을 제어하기 위한 영역을 지정하기 위해서는 제어하고 싶은 위치를 div로 감싸고, id값을 세팅
제어 범위를 지정하였으면, 범위 내 필요한 곳에 event 넣어줌
🔍 v-on:click="axios_test" : 클릭 event가 발생하면 "axios_text"를 실행

✍🏻 html요소를 Vue로 제어하는 방법 : <div id=""></div>

    <div id="test_vue">
      <center>
        <button type="button" class="btn btn-primary" v-on:click="axios_test">
          GET
        </button>
        <button type="button" class="btn btn-secondary">POST</button>
        <button type="button" class="btn btn-success">PUT</button>
        <button type="button" class="btn btn-danger">DELETE</button>
      </center>
    </div>

event 발생되었을 때, 실행될 기능을 객체로 생성
el은 Vue 범위를 지정할 때 사용한 id값 입력
mthods는 구체적인 행위에 대해 함수로 지정
Vue를 CDN으로 가져올 때, axios도 CDN으로 연결해주었기 때문에 axios함수로 flask와 연결

✍🏻 객체 생성 방법

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      const app = new Vue({
        el: "#test_vue",
        methods: {
          axios_test() {
            axios("http://localhost:8082/test", {
              method: "get",
            })
              .then((response) => {
                console.log(response.data);
              })
              .catch((error) => {
                console.log(error);
              });
          },
        },
      });
    </script>

CROS(cross origin Resourc Sharing)를 이용하여 웹에서 사용하는 HTTP request는 다른 도메인의 데이터를 요청할 수 있음
설치 방법 : pip3 install flask_cors
<script></script> 안에 코드에서 실행되는 HTTP request는 다른 서버로 요청할 수 있게 해주는 것이 CROS임
이를 사용하기 위해서는 설치 후, Flask 객체를 CROS()의 파마리터로 전달하면 됨

✍🏻 python

from flask import Flask, request, make_response, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/test", methods=['GET'])
def test():
    return make_response(jsonify(success=True), 200)
if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8082")

3. REST API method 정의하기

flask API 정의 시, route에 어떤 method를 지원해줄 지 methods 속성으로 지정해주면됨
GET/PUT/DELETE는 파라미터값을 추출하는 방식이 갖으나, POST는 파라미터값을 추출하는 방식이 다름

✍🏻 4가지 버튼 생성 후 Vue로 click event 걸어주기

  <body>
    <div id="app">
      <br />
      <center>
        <button type="button" class="btn btn-primary" v-on:click="test_get">
          GET
        </button>
        <button type="button" class="btn btn-secondary" v-on:click="test_post">
          POST
        </button>
        <button type="button" class="btn btn-success" v-on:click="test_put">
          PUT
        </button>
        <button type="button" class="btn btn-danger" v-on:click="test_delete">
          DELETE
        </button>
      </center>
    </div>
  </body>

✍🏻 각 버튼마다 click 발생 시, 작동하는 객체 생성

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        methods: {
          test_get: () => {
            axios("http://localhost:8082/test", {
              method: "get",
              params: {
                email: "test@test.com",
              },
            })
              .then((response) => {
                console.log(response.data["status"]);
              })
              .catch((error) => {
                console.log(error);
              });
          },
          test_post: () => {
            axios("http://localhost:8082/test", {
              method: "post",
              data: {
                email: "test@test.com",
              },
            })
              .then((response) => {
                console.log(response.data["status"]);
              })
              .catch((error) => {
                console.log(error);
              });
          },
          test_put: () => {
            axios("http://localhost:8082/test", {
              method: "put",
              params: {
                email: "test@test.com",
              },
            })
              .then((response) => {
                console.log(response.data["status"]);
              })
              .catch((error) => {
                console.log(error);
              });
          },
          test_delete: () => {
            axios("http://localhost:8082/test", {
              method: "delete",
              params: {
                email: "test@test.com",
              },
            })
              .then((response) => {
                console.log(response.data["status"]);
              })
              .catch((error) => {
                console.log(error);
              });
          },
        },
      });
    </script>

@app.route("/test", methods=['GET', 'POST', 'PUT', 'DELETE']) : route 경로(/test의)에 지원하는 methods를 제한할 수 있음(methods를 별도로 적어주지 않으면 get를 지원)
get 방식 : request.args.get('key 이름') ⇢ key에 해당하는 value값 호출
post 방식 : request.get_json() ⇢ {'key':'velue'}로 가져옴

✍🏻 python

from flask import Flask, request, make_response, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # CORS에 app 객체를 넣어줌
# method 방식별 추출 방법(post만 다름)
@app.route("/test", methods=['GET', 'POST', 'PUT', 'DELETE'])
def test():
    if request.method == 'POST':
        print('POST')
        data = request.get_json()
        print(data)
        print(data['email'])
    if request.method == 'GET':
        print('GET')
        user = request.args.get('email')
        print(user)
    if request.method == 'PUT':
        print('PUT')
        user = request.args.get('email')
        print(user)
    if request.method == 'DELETE':
        print('DELETE')
        user = request.args.get('email')
        print(user)
    return make_response(jsonify({'status': True}), 200)
if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8082")

ID짱재

Keep Going, Keep Coding!

이전 포스트

01.Flask 기초 - flask 에러 다루기

다음 포스트

01.Flask 기초 - Vue & Falsk & Bootstrap

Flask

🌈

🔥 부트스트랩과 CDN

🔥 Vue와 CDN

🔥 REST API method 정의하기

1. 부트스트랩과 CDN

2. Vue와 CDN

3. REST API method 정의하기

01.Flask 기초 - flask 에러 다루기

01.Flask 기초 - 간단 DB 사용법

0개의 댓글