CS/Web

[BE-Flask] 3. 플라스크 템플릿

뚱요 2021. 11. 8. 14:59
반응형

Flask는 마이크로 서비스 프레임워크이기 때문에 프론트, 백을 동시 처리하지 못한다.

따라서 프론트로 렌더링 해야함

(1) HTML 생성

문자열을 그냥 리턴하면 기본값으로 <body> </body>  태그내에 반영된다.

from flask import Flask 

app=Flask(__name__)    

@app.route('/')         
def function():
	return "HTML"
 
if __name__=="__main__":
 	app.run()

웹 브라우저에서 도구>개발자도구 (F12) 에서 Elements에서 확인 가능

HTML Tag

따옴표 내에 HTML태그를 형식에 맞게 입력하면 적용된다.

" <태그> </태그> "

Body태그 내에 header2 태그가 적용됬다.

from flask import Flask 

app=Flask(__name__)    

@app.route('/')         
def function():
	return "<h2>HTML</h2>"
 
if __name__=="__main__":
 	app.run()

 

태그를 변수에 할당하여 적용도 가능

from flask import Flask 

app=Flask(__name__)    

@app.route('/')         
def function():
	html_tag="<h2>HTML</h2>"
	return html_tag
 
if __name__=="__main__":
 	app.run()

 

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
	html = """\
	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8"> 
		<title>HTML in Flask/title>
	</head>
	<body>
	<form>
		<p>PWD : <input type="password" id="input" placeholder='Type here'></p>
		<p><input type="button" value="Submit" onclick="alert('Submitted')" /></p>
	</form>
	</body>
	"""
	return html

if __name__ == "__main__":
		app.run()

 

서버 요청에 응답하는 방식은 크게 두 가지
-  HTML 페이지를 돌려주는 응답
- json형태와 같은 data를 돌려주는 응답

(2) HTML rendering 

render_template 모듈

  • render_template( HTML파일명 ) 함수를 이용해서 HTML 을 전달하는 역할
  • render_template() 함수 내의 html 파일 이름은 templates 폴더 내의 html의 동일해야 자동으로 연결
    • template/ .html
  • HTML을 별도의 파일에 관리하여 유지보수 용이해진다.
  • 따로 import 해야 한다.
from flask import Flask, render_template
...
return render_template('파일명.html')

 

app.py

@app.route("/")
def hello():
	return render_template('user.html')

user.html

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8"> 
		<title>HTML for python flask</title>
	</head>
	<body>
      <form>
          <p>PWD : <input type="password" id="input" placeholder='Type here'></p>
          <p> <input type="button" value="Submit" onclick="alert('Submitted')"/></p>
      </form>
	</body>

HTML파일에 데이터도 출력 가능

return render_template('파일명.html',data=data명)

 

 

(3) 데이터 전달하기

JSON 포맷의 데이터

jsonify 모듈

from flask import Flask ,jsonify

app=Flask(__name__)     
@app.route('/')           
def function():
	dict = [{"key1":"value1"},{"key2":"value2"}]
	return jsonify(dict)  #JSON데이터를 화면에 리턴

if __name__=="__main__":
 	app.run()

Jinja Template

  • 뷰에서 단순히 html 파일만 반환한다면 정적이게  되므로 정적인 HTML 파일에서 동적으로 보여주기 위한 템플릿 엔진
  • 서버에서 받아온 데이터를 효과적으로 보여줌
  • 파이썬 문법과 유사한 문법으로 간략한 표현으로 데이터 가공
    • 특수 문자 처리

https://jinja.palletsprojects.com/en/3.0.x/

 

Jinja — Jinja Documentation (3.0.x)

 

jinja.palletsprojects.com

다운로드

파이썬 3.6+이상

디펜던시 문제로 가상환경에 설치하는 것을 권장

pip install Jinja2

template 문법

+ 태그 앞 공백 제거

- 시작, 끝 공백 제거

특징

escaping(이스케이핑)

{}을 사용하여 변수나 구문 구분 

변수

  • {{ 변수/표현식 }}

구문

  • {% 반복문,제어문 %}
    •  
      변수 설명
      loop.index for 구문이 현재 반복한 회수 (1부터)
      loop.index() for 구문이 현재 반복한 회수 (0부터)
      loop.revindex for 구문이 역순 반복 회수 (1부터)
      loop.revindex() for 구문이 역순 반복 회수 (0부터)
      loop.first 반복이 처음 실행되면 True, 아니면 False
      loop.last 반복이 마지막이면 True, 아니면 False
      loop.length 전체 반복 횟수
      loop.cycle loop.cycle() 함수의 인자로 넘기는 리스트 항목 순서대로 전달 
{% for <요소> in <리스트 형태 > %}
  <코드>
<% endfor %}
{% if <조건> %}
	<코드>
{% elseif <조건> %}
	<코드>
<% else %}
	<코드>
<% endif %}


{% <코드> if <조건> else <거짓시 코드> %}

주석

  • {# 주석 #}  
    • 코드에 영향을 끼치지 않고 코드를 설명하는데에 이용

리스트, 딕셔너리 출력 예시

jinja 템플릿 이용해서 사용자 입력값 출력

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

u_var='Kim'
u_list = ['Kim','Park']
u_dict=[{'last':'Park', 'first':'공원'},
        {'last':'Kim', 'first':'chi'}]

@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == 'POST':
        first = request.form['name']
        last = request.form['last']
        
        u_list.append(last)
        u_dict.append({'first': first, 'last': last})

        return redirect('/')
    # 매개변수로 넘겨주세요.
    return render_template("index.html",  u_list=u_list, u_dict=u_dict)


if __name__ == "__main__":
    app.run(debug=True)

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JINJA Practice</title>
</head>

<body>
    <h2>유저 정보</h2>
    <form action="/" method="POST">
        <p>성
            <input name='last'>
        </p>
        <p> 이름
            <input name='name'>
        </p>

        <button type="submit">입력</button>
    </form>
    <hr>
    
    <!-- 한 번에 값을 출력하는 코드를 작성하세요. -->
        <p>{{ u_list }}</p>

        <p>{{ u_dict }}</p>
    <hr>

    <h5>한 엘리먼트 씩 출력하기</h5>
    {% for board in u_list %}
        <p>{{ board }}</p>
    {% endfor %}
    <hr>
    
    <h5>조건에 따라 값을 출력하는 코드 출력하기
    </h5>
    <p>성이 Park 씨인 사람의 이름 찾기</p>
    {% for board in u_dict %}
        {% if board['last']=='Park' %}
            <p>{{board['first']}}</p>
        {% endif %}
    {% endfor %}
        
</body>

</html>

기본

Oh lala 입력

Park Jay 입력

 

 

반응형

'CS > Web' 카테고리의 다른 글

[BE-Django] model  (0) 2021.12.06
[BE-Flask] 4. HTTP  (0) 2021.11.09
[BE-Flask] JWT(Json Web Token)  (0) 2021.11.05
[BE - Flask] 2. 라우팅(Routing)  (0) 2021.11.04
[BE - Flask] 1 Flask 시작하기: 다운로드, 실행  (0) 2021.11.03

'CS/Web'의 다른글

  • 현재글[BE-Flask] 3. 플라스크 템플릿

관련글

댓글

티스토리툴바