티스토리 뷰

Python

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) HTML으로 데이터 전달(Jinja2)

I like simple code 2020. 5. 21. 18:23
728x90

 

우리는 return hello world로 화면에 나타내는 것을 render_template에서 templates 폴더 안의 html에 파일을 나타 낼 수 있었습니다. 그리고 return hello {}.format(변수) 로 hello 변수가 나타나게 했습니다.

render_template 에서 데이터를 전달해서 html 내에서 전달된 데이터를 사용하는 방법에 대해 알아봅니다.

 

return render_template("view.html", data='전달데이터')

render_template 에 인수를 html 파일과 data=data 를 넘깁니다. data=data 는 키와 값으로 전달이 되면 html에서는 앞의 data 키 이름을 사용하면 '전달 데이터'를 나타 낼 수 있습니다.

Jinja2 에서 우리는 url_for 를 사용할 때 {{}} 이런 형식을 사용한다고 배웠습니다.

Jinja2 템플릿 작성하는 방법에 대해 간단히 알아보면

{% ... %} - 문장(Sentences)

{{  ...   }} - 표현식(Expressions)

{#  ...  #} - 주석

 # ... ##  - 라인문장

 

html 에서  {{ 전달변수(키) }} 이렇게 사용하면 됩니다.

위 예제를 화면에 출력을 한다면 

{{ data }}

이렇게 쓰면 전달 데이터라는 글자가 브라우저에 나타납니다.

예제를 사용해봅니다.

app.py 에는 아래와 같이 입력하고

@app.route('/senddata')
def senddata():
    name = 'world'
    return render_template('senddata.html', data=name)

senddata.html 파일을 templates 폴더에 생성 후 아래와 같이 작성합니다.

<!DOCTYPE html>
<html>
<body>
<h2>전달 데이터</h2>
hello {{ data }} !!

</body>
</html>

실행시켜 브라우저에 출력해보면

 

 {{ data }} 부분이 app.py 에서 정의된 name = 'world' 의 값이 나오는 것을 확인할 수 있습니다.

문자열뿐만 아니라 딕셔너리와 리스트 다른 자료형들도 전달이 가능합니다.

딕셔너리 타입을 전달하면 data = {a:1, b:2} 이런 데이터가 있다고 했을 때 data를 넘겨서 html Jinja2에서 받아 사용 할 때는 data.키 이렇게 나타 내면 됩니다.

{{ data.a }} 를 출력을 하면 1 이 나오게 되겠죠.

 

리스트를 전달 하면 여러 데이터를 담고 있기 때문에 반복문을 사용해야 되겠죠.

for 문을 사용할 때는 {{}} 이런 형식이 아닌

{% for 문 %}

    {{ 출력 변수 }}

{% endfor %}

이런 문법을 사용합니다.

 

listdata = [1, 2, 3] 이라는 데이터가 있으면 data=listdata 로 html 에 전달해서 html 파일에서는 

{% for i in data %}
    {{ i }}
{% endfor %}

123 이라는 결과가 나타나게 될 겁니다.

 

게임 예제를 예를 들면 save.txt 에 저장된 파일을 불러와서 아이템을 출력 한다고 하면

with open("save.txt", "r", encoding='utf-8') as f:
  data = f.read()
  character = json.loads(data)

저 character 딕셔너리에서 items 는 이런 리스트를 가지고 있습니다.

"items": [ "대나무헬리콥터", "빅라이트", "어디로든 문" ]

return render_template('view.html', items=character['items'])

이렇게 넘겨 주고 view.html 에서는 Jinja2 템플릿 문법으로

<!DOCTYPE html>
<html>
<body>
<h2>Stage 2</h2>
{% for i in items %}
    {{ loop.index }}.
    {{ i }}<br>
{% endfor %}

</body>
</html>

이렇게 출력 해주면 아이템 리스트가 출력이 됩니다.

위 코드에서 loop.index 는 반복문의 index. 즉, 카운터가 찍힙니다. 아래는 결과 화면 입니다.

 

'Python' 카테고리의 다른 글

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Request 데이터 DB 저장(SQLite3 사용)  (0) 2020.05.29
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Why DB? SQLite 사용  (0) 2020.05.29
[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 파일 입출력을 이용해서 데이터 저장(Json 사용)  (1) 2020.05.21
[웹 앱프로그래밍] Github 에 올린 Flask 소스 로컬 PC 에 다운 받아 개발 및 실행  (0) 2020.05.21
[웹 앱프로그래밍] Python Flask SQLAlchemy ORM  (0) 2020.05.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함