목차
[Python]vue, axios란?
Vue.js는 사용자 인터페이스를 구축하기 위한 framework입니다. 즉, 작은 부분부터 점진적으로 도입하고 복잡한 웹 애플리케이션까지 구축할 수 있습니다. Vue.js는 화면을 구성하는 데 사용되며, 데이터 바인딩, 컴포넌트 기반 아키텍처, 라우팅, 상태 관리 등을 지원합니다. Vue는 프런트엔드 개발을 간소화하고 높은 가독성과 유연성을 제공하는데 사용됩니다.
Axios는 웹 브라우저 및 Node.js 환경에서 HTTP 요청을 수행하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 서버와 통신하거나 API 요청을 수행할 수 있습니다. Axios는 XMLHttpRequest 또는 Fetch API와 비교해 더 간단하고 강력한 기능을 제공합니다. 주로 데이터를 서버로 보내거나 서버로부터 데이터를 받아오는 데 사용됩니다.
간단하게 정리하면 vue와 axios는 자바스크립트 언어로 구성된 라이브러리라고 생각할 수 있습니다. 그리고 vue는 프론트엔드(frontend)를 구성해서 서버에 접속할 필요없이 프론트 단에서 함수 구현 등을 쉽게 처리 할 수 있습니다. 그리고 axios는 프론트 단에서 다른 서버로 접속을 도와 주는 통신 프로토콜과 같은 동작을 합니다. 해당 내용은 제가 경험하면서 생각한 내용을 정리한 것이라 틀린 부분이 있을 수 있지만 아래 예제 코드를 통해 이해해보시면 쉽게 이해할 수 있습니다.
간단한 console 출력 vue, axios 예제 실습
예제 코드 app.py>>
from flask import Flask, request, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/api/data', methods=['POST'])
def get_data():
data = request.json # 클라이언트로부터 받은 JSON 데이터
return jsonify(data)
if __name__ == '__main__':
app.run(host="0.0.0.0", port="5000")flask_cors는 해킹을 방지하기 위해 cross xml을 막는 것을 피하기 위해 사용합니다. 간단하게 설명 드리면 아래 html 코드에서 axios를 사용해서 다른 서버로 접속할 것인데 이때 cors를 설정하지 않으면 에러가 발생하게 됩니다. 이를 막기 위해 2번과 5번 라인 처럼 정의 해줍니다.
7~10번 라인은 post로 받은 값을 다시 json 형태로 return 해줍니다.
예제 코드 index.html>>
<!DOCTYPE html>
<html>
<head>
<title>Axios Console Log Example</title>
</head>
<body>
<button id="getDataButton">Get Data from Flask</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const getDataButton = document.getElementById('getDataButton');
getDataButton.addEventListener('click', async () => {
try {
const response = await axios.post("http://localhost:5000/api/data", { message: 'Hello from Axios!' });
console.log('Response from Flask:', response.data);
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>9번 라인: axios를 사용하기 위해 cdn으로 불러옵니다.
13~20번 라인: 버튼 클릭시 함수가 실행됩니다.
해당 html은 go live로 다른 서버로 동작 시키고 app.py는 flask로 5000포트에서 동작 시킵니다.
15번 라인: 버튼을 클릭하게 되면 5000포트의 서버에 접속해서 post 형식으로 메세지를 전달 합니다.
16번 라인: 그리고 응답으로 받은 값을 console.log로 출력 해줍니다.
결과>>
vue, axios 예제 실습 코드 다운로드
'파이썬(Python) > Flask' 카테고리의 다른 글
| [Python]flask의 errorhandler와 Exception 예제로 이해하기(파이썬) (0) | 2023.08.23 |
|---|---|
| [Python]flask의 cors란? 예제를 통해 차이점 이해하기(flask_cors, 파이썬) (0) | 2023.08.21 |
| [Python] flask Jinja2 for문, if문, 리스트 출력 예제 실습 및 풀이 (0) | 2023.08.17 |
| [Python]flask와 Jinja2 사용해서 변수 출력하기 예제(Variable) (0) | 2023.08.16 |
| [HTTP]GET과 POST차이, 장단점, flask로 예제 실습(Python) (0) | 2023.08.11 |