Python: Flask, JavaScript에서 사용할 준비가 된 JSON 개체로서의 사전.

서버에 Python 사전이 있고 이 사전을 페이지에 JSON 개체로 작성하여 클라이언트측 Javascript 코드에 사용할 수 있도록 하려고 합니다. 모든 Flask 템플릿 기능이 생각대로 작동하는 것은 아닙니다. 이 게시물에서 내 실험을 문서화하고 있습니다.

먼저 짧은 토론으로 바로 이동하겠습니다. 충분하길 바랍니다. 독자는 다른 게시물의 기존 코드를 기반으로 구축된 코드로 시연하는 다음 섹션으로 이동할 필요가 없습니다.

Python 사전을 JSON으로 변환하는 것은 매우 간단합니다.

import simplejson as json

data = { ... }

print( json.dumps(data) )

json.dumps( obj: dict )의 반환 값은 유효한 JSON 개체이며 클라이언트 측 JavaScript에서 즉시 사용할 수 있습니다. 이 반환된 값을 페이지로 가져오기 위해 다음을 시도했습니다.

...
def json_dumps( obj: dict ):
    return json.dumps( obj )

@app.context_processor
def json_dumps_context_processor():
    def __json_dumps_context_processor( obj: dict ):
        return json_dumps( obj )

    return dict( json_dumps_context_processor=__json_dumps_context_processor )

@app.template_global()
def json_dumps_template_global( obj: dict ):
    return json_dumps( obj )

@app.template_filter()
def json_dumps_decorator_filter( obj: dict ):
    return json_dumps( obj )

"""
This registration gets executed automatically by the import 
statement, thereby enabling json_dumps_jinja_filter available
to template rendering function.
"""
app.jinja_env.filters[ 'json_dumps_jinja_filter' ] = json_dumps

참고: 4가지 방법이 있지만 모두 동일한 기능을 호출하여 작업을 수행합니다.

템플릿을 렌더링하는 코드:

data = { ... }
return render_template( 'some_template_file.html', json_obj=data )

some_template_file.html 내에서 그림과 같이 위의 네 가지( 4 ) 템플릿 함수를 호출합니다.

<script>
var jsonObj1 = {{ json_dumps_context_processor(json_obj) }};
var jsonObj2 = {{ json_dumps_template_global(json_obj) }};
var jsonObj3 = {{ json_obj|json_dumps_decorator_filter|safe }};
var jsonObj4 = {{ json_obj|json_dumps_jinja_filter|safe }};
</script>

최종 HTML은 처음 두 줄(2)로 인해 런타임 오류가 발생합니다. 큰따옴표(")는 이스케이프 코드로 출력됩니다."

@app.template_filter() 및 app.jinja_env.filters는 예상대로 작동합니다. 개인적으로 저는 @app.template_filter()를 훨씬 더 좋아합니다. 이 작업에 사용하고 있습니다.

이 경우 @app.context_processor 및 @app.template_global()이 작동하지 않는 이유를 조사하지 않았습니다(이미 준비된 솔루션이 있기 때문).

@app.template_global()의 경우 을 참조하세요. https://flask.palletsprojects.com/en/2.2.x/api/ -- template_global을 검색해야 합니다. 기타에 대해서는 https://flask.palletsprojects.com/en/2.2.x/templating/ 을 참조하십시오.

이 게시물의 데모 코드는 다음을 통해 다운로드할 수 있습니다.

git clone -b v1.0.5 https://github.com/behai-nguyen/app-demo.git

태그는 v1.0.5입니다. 모든 Docker 관련 파일을 무시하십시오.

✿✿✿

이전에 Python: pytest and Flask template context processor functions.에서 @app.context_processor에 대해 논의한 적이 있습니다. 이 게시물의 데모 코드는 방금 언급한 게시물의 기존 코드를 기반으로 합니다.

아래 다이어그램은 완료된 프로젝트 레이아웃을 보여줍니다. ★은 새 파일을 나타내고 ☆은 수정된 파일을 나타냅니다.

D:\app_demo\
|
|-- .env
|-- app.py
|-- setup.py ☆
|-- pytest.ini
|
|-- src\
|   |
|   |-- app_demo\
|       |   
|       |-- __init__.py
|       |-- config.py
|       |-- urls.py ☆
|       |
|       |-- controllers\
|       |   |
|       |   |-- __init__.py ☆
|       |   |-- echo.py
|       |   |-- json_dumps.py ★
|       |   
|       |-- utils\
|       |   |
|       |   |-- __init__.py 
|       |   |-- context_processor.py ☆
|       |   |-- functions.py
|       |
|       |-- templates\
|       |   |
|       |   |-- base_template.html
|       |   |-- echo\
|       |   |   |
|       |   |   |--echo.html
|       |   |
|       |   |-- json\
|       |   |   |
|       |   |   |--json_dumps.html ★
|       
|-- tests
|   ...
|
|-- venv\

코드는 매우 간단하며 대부분은 하나의 라이너입니다. 아래에서 변경 사항을 간략하게 살펴보겠습니다.

❶ setup.py -- 새 패키지 simplejson을 포함합니다. 설치하려면 다음을 실행하십시오.

(venv) D:\app_demo>venv\Scripts\pip.exe install -e .
(venv) behai@omphalos-nas-01:/volume1/web/app_demo$ sudo venv/bin/pip install -e .

❷ src/app_demo/utils/context_processor.py -- 위에서 설명한 새 템플릿 처리 기능을 추가했습니다.

def json_dumps_context_processor():
def json_dumps_template_global( obj: dict ):
def json_dumps_decorator_filter( obj: dict ):
app.jinja_env.filters[ 'json_dumps_jinja_filter' ] = json_dumps

❸ src/app_demo/controllers/__init__.py -- 새 청사진 추가: json_blueprint.

❹ src/app_demo/controllers/json_dumps.py -- 새 경로/json에 대한 정적 응답을 제공하는 컨트롤러 코드입니다. 하드 코딩된 사전은 현재 작업 중인 프로젝트의 실제 데이터입니다.

❺ src/app_demo/templates/json/json_dumps.html -- 새 경로/json에 대한 데모 템플릿입니다. 첫 번째 섹션에서 이 템플릿에 대해 논의했습니다.

새 경로 http://localhost:5000/json -- 이 템플릿의 최종 콘텐츠를 제공합니다. 정적 콘텐츠입니다. 실제 출력을 보려면 브라우저의 페이지 소스 보기를 수행해야 합니다.

❻ src/app_demo/urls.py -- 위에서 설명한 새 Blueprint: json_blueprint 및 새 경로/json을 등록합니다.

요약하면 이 게시물의 코드는 다음을 사용하여 다운로드할 수 있습니다.

git clone -b v1.0.5 https://github.com/behai-nguyen/app-demo.git

태그는 v1.0.5입니다. 모든 Docker 관련 파일을 무시하십시오.

이 게시물이 도움이 되셨기를 바랍니다... 읽어 주셔서 감사합니다. 안전을 유지하세요.