Google Maps API와 같은 JavaScript 라이브러리에서 사용하기 위해 내 뷰 템플릿에서 Flask 애플리케이션의 데이터를 JavaScript로 전달하려면 어떻게 해야 합니까?
- Susan Sarandon원래의
- 2024-10-27 08:07:30143검색
Flask에서 템플릿의 JavaScript로 데이터 전달
Flask 애플리케이션으로 작업할 때 Flask 애플리케이션에서 데이터를 전달해야 하는 상황에 직면할 수 있습니다. 뷰 템플릿의 JavaScript에 대한 Python 사전입니다. 이 데이터는 Google Maps API와 같은 JavaScript 라이브러리에서 활용될 수 있습니다. 이 글은 Flask에서 JavaScript로 데이터를 효과적으로 전달하는 과정을 안내합니다.
이러한 변수를 JavaScript로 전달하려면 Flask의 render_template 기능을 활용할 수 있습니다. Flask의 템플릿 엔진인 Jinja2를 사용하면 {{variable }} 구문을 사용하여 데이터 변수에 액세스할 수 있습니다. 즉, 템플릿 내의 적절한 위치에 {{ 변수 }}를 사용하기만 하면 Python 사전 데이터를 JavaScript 스크립트에 전달할 수 있습니다.
예를 들어 다음 예를 고려해 보겠습니다.
<code class="python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def get_data():
events = {'latitude': 40.7128, 'longitude': -74.0059}
geocode = events['latitude'], events['longitude']
return render_template('get_data.html', geocode=geocode)</code>
이 예에는 위도와 경도 정보가 포함된 'events'라는 Python 사전이 있습니다. 우리는 이 데이터를 'geocode'라는 튜플로 추출합니다. render_template 함수를 사용하면 'geocode' 변수를 'get_data.html' 템플릿에 전달할 수 있습니다.
이제 HTML 템플릿 내에서 Jinja2의 구문을 사용하여 데이터에 액세스할 수 있습니다. 이를 JavaScript 스크립트에 통합하는 방법은 다음과 같습니다.
<code class="html"><head>
<script>
var geocode = '{{ geocode[1] }}';
</script>
</head></code>
이 코드는 JavaScript의 지오코드 변수에 경도 값을 할당합니다.
또는 'geocode'를 템플릿 출력에서 배열 정의를 생성하여 JavaScript 내에서 배열을 생성합니다.
<code class="html"><head>
<script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script>
</head></code>
이 접근 방식은 JavaScript 논리로 쉽게 액세스하고 조작할 수 있는 배열을 생성합니다.
Jinja2는 포괄적인 세트를 제공합니다. 출력을 조작하고 사용자 정의할 수 있는 구성 요소입니다. 예를 들어 for 루프를 사용하여 이전 예제를 단축할 수 있습니다.
<code class="html"><head>
<script>
var myGeocode = [{% for value in geocode %}{{ value }}, {% endfor %}];
</script>
</head></code>
Jinja2의 tojson 필터를 사용하여 Python 개체를 JSON(JavaScript Object Notation) 문자열로 변환할 수도 있습니다.
<code class="html"><head>
<script>
var myGeocode = {{ geocode | tojson }};
</script>
</head></code>
이러한 기술을 사용하면 Flask에서 JavaScript로 데이터를 효과적으로 전달할 수 있어 Python과 JavaScript 구성 요소 간의 원활한 통신이 가능해집니다.
위 내용은 Google Maps API와 같은 JavaScript 라이브러리에서 사용하기 위해 내 뷰 템플릿에서 Flask 애플리케이션의 데이터를 JavaScript로 전달하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!