2-3플라스크로 멀티페이지 사이트 만들기 - 응용

Jinja2 템플릿 언어 이용하기 응용편

Jinja를 본격적으로 쓰기에 앞서, 원래 ajax 요청을 보내 html을 완성할 때는 어떻게 했었는지 살펴봅시다. 서울시 Open API에서 정보를 받아와 현재 미세먼지 수치가 50 이상인 구만 페이지에 나타내볼까요?

• ajax 요청준비

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        get_list()
    })

    function get_list() {
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            data: {},
            success: function (response) {
                let rows = response["RealtimeCityAir"]["row"];
                console.log(rows)
            }
        })
    }
</script>

• 미세먼지 정보가 들어갈 ul 태그 만들기

<ul id="gu-list"> </ul>

• 각 구에 대해서 구 이름과 미세먼지 수치를 변수에 저장하기

for (let i=0;i<rows.length;i++) {

let gu_name = rows[i]["MSRSTE_NM"]

let gu_mise = rows[i]["IDEX_MVL"]

console.log(gu_name, gu_mise) }

• 미세먼지 수치가 50 이상일 때만 태그 추가하기

if (gu_mise >= 50) {

let html_temp = `<li>${gu_name}: ${gu_mise}</li>`

$("#gu-list").append(html_temp)

}

이번에는 같은 일을 jinja2로 해보겠습니다.

• requests 요청 보내기

@app.route('/detail')
def detail():
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    return render_template("detail.html",rows=rows)

<ul id="gu-list">
    {#int는 소수점을 안보이게 하는 역할#}
    <li>{{ rows[0]['MSRSTE_NM'] }} : {{ rows[0]['IDEX_MVL'] | int }}</li>
</ul>

※rows의 s만 빼먹어도 서버가 막힘

<ul id="gu-list">
    {% set gu_name = rows[0]['MSRSTE_NM'] %}
    {% set gu_mise = rows[0]['IDEX_MVL'] %}

    <li>{{ gu_name }} : {{ gu_mise | int }}</li>
    {#int는 소수점을 안보이게 하는 역할#}
</ul>

jinja2의 변수 입력 방법 {% set = 변수값 %}

<ul id="gu-list">
    {% for row in rows %}
        {% set gu_name = row['MSRSTE_NM'] %}
        {% set gu_mise = row['IDEX_MVL'] %}
        <li>{{ gu_name }} : {{ gu_mise | int }}</li>
        {#int는 소수점을 안보이게 하는 역할#}
    {% endfor %}
</ul>

반복문 특히 조심 뒤에 endfor 항상 적고 rows가 row로 바뀐 거 주의!!

<ul id="gu-list">
    {% for row in rows %}
        {% set gu_name = row['MSRSTE_NM'] %}
        {% set gu_mise = row['IDEX_MVL'] %}
        {% if gu_mise>60 %}
            <li>{{ gu_name }} : {{ gu_mise | int }}</li>
            {#int는 소수점을 안보이게 하는 역할#}
        {% endif %}
    {% endfor %}
</ul>

if문은 반복문과 사용법이 거의 동일

 

http://localhost:5000/detail?여기에 적는 단어를 html에 넣는방법

@app.route('/detail')
def detail():
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    word_receive = request.args.get("word_give")
    print(word_receive)
    return render_template("detail.html", rows=rows)

이 방식으로 html에 넣어줄 수도 있음

@app.route('/detail')
def detail():
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    word_receive = request.args.get("word_give")
    print(word_receive)
    return render_template("detail.html", rows=rows, word=word_receive)

<h1>상세페이지</h1>
<button onclick="window.location.href='/'">메인으로 돌아가기</button>
<h3>받은 단어는 {{ word }}</h3>
<ul id="gu-list">
    {% for row in rows %}
        {% set gu_name = row['MSRSTE_NM'] %}
        {% set gu_mise = row['IDEX_MVL'] %}
        {% if gu_mise>60 %}
            <li>{{ gu_name }} : {{ gu_mise | int }}</li>
            {#int는 소수점을 안보이게 하는 역할#}
        {% endif %}
    {% endfor %}
</ul>

주소창은 ?뒤에 사용하는 방법말고 아예 주소를 이용하는 방법

@app.route('/detail/<keyword>')
def detail(keyword):
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    word_receive = request.args.get("word_give")
    print(word_receive)
    return render_template("detail.html", rows=rows, word=keyword)