스파르타 코딩 플러스 2주차 3강

• Ajax로 긁어왔던  json ,jinja2로 구현하기

전에 웹개발 종합반 수강했을 때 html에서 ajax GET방식으로 긁어와서 데이터를 사용하는 방식을 배웠었다.

$(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"];
            for (let i = 0; i < rows.length; i++) {
                let gu_name = rows[i]["MSRSTE_NM"]
                let gu_mise = rows[i]["IDEX_MVL"]
                if (gu_mise >= 50) {
                    let html_temp = `<li>${gu_name}: ${gu_mise}</li>`
                    $("#gu-list").append(html_temp)
                }
            }
        }
    })
}

 

전에 배웠던 방식

 

오늘은 조금 더 간단한 방식으로 불러올 수 있는 jinja2를 배웠다.
크롤링방식의 jinja2는 script 방식을 이용하지않았다 (아직 이용하지 않은 것 같다.).

---

단, 얘는 파이썬파일에서 크롤링해온 사이트를 requests로 get해와서 json형식으로 나타낸 후

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
response = r.json()

json파일에 있는 데이터에서 필요한 부분을 가져와 rows로 정의한후

rows = response['RealtimeCityAir']['row']

detail.html파일에 넘겨준다.

return render_template("detail.html", rows=rows)

그리고 detail.html 파일로 넘어가서 head가 아닌 body쪽에서 구현을 시작한다!

얘는 원래 for문으로

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

이렇게 리스트를 쭉 나열하는 걸 안해도 되는것 같다.

{% for row in rows %}
<li>{{ rows[0].MSRSTE_NM }}: {{ rows[0].IDEX_MVL }}</li>
    
{% endfor %}

이건 rows라고 정의된 (app.py에서 정의함 ) 데이터에서 0번째 자료값의 구이름과 미세먼지 수치값을 표현하라 라는 뜻이다. jinja2의 모양이니까 잘 기억해두자. for문 들어가면 끝에 endfor 붙이기

 

이제 위에서 원래 했던것 처럼 리스트로 나열해 보자

{% for row in rows %}
    {% set gu_name = row["MSRSTE_NM"] %}
    {% set gu_mise = row["IDEX_MVL"] %}
    <li> {{ gu_name }} : {{ gu_mise|int }}</li>
{% endfor %}

구 이름과 구의 미세먼지 수치를 set으로 정의해준다. let아니네? 그리고 리스트 형태로 나타내! 라는뜻 |int는 소수점 제거해주는 코드. (integer(정수)) 

마지막으로 if구문을 넣어서 미세먼지 수치가 지정숫자 이상일때만 나타나게 해보자.

 

{% for row in rows %}
    {% if gu_mise>= 60 %}
    {% set gu_name = row["MSRSTE_NM"] %}
    {% set gu_mise = row["IDEX_MVL"] %}
    <li> {{ gu_name }} : {{ gu_mise|int }}</li>
    {% endif %}
{% endfor %}

if구문은 endif를 넣는거 말고는 다를바가 없는것 같다. 다만 원래 ajax 로 temp_html 붙였을 때 보다 훨씬 깔끔한것 같긴 하다! 

 

다음으로는 간단하게 localhost:5000/detail/단어 로 입력했을때 화면에 나타나게 하는 작업을 진행해 봤다.

@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 )

@app.route 코드 치면서 최근에 알게 된건데 @app.route() 괄호 속에는 메인 페이지 에서 /내가지정한이름 으로 URL을 지정하는 것이다. 나는 db저장 폴더 이름인줄..9-9//

 

@app.route('/detail/<keyword>')

의 경우  localhost:5000/detail/단어 를 입력! <>뾰족 괄호 안에 있으면 변수 취급인가??????????

def detail(keyword):

이게 전에 했던거랑 조금 다름. 이건 더 해봐야 확실히 알듯

 

return render_template("detail.html", rows=rows, word =keyword )

더 간단하게 플라스크 프레임워크에서는 URL의 일부를 변수로 받는 방법.

가져온 keyword변수를 word라고 정의!!!!!!!!!!!!!!

 

-----------------다른방법!-----------------------

word_receive = request.args.get("word_give")

word_receive를 request로 get해옴 request는 flask자체함수로 request와 다르게 임포트 해오는 것임(내가 직접입력한거 가져오는거...?) 둘다 사용시 둘다 임포트 해와야함. 얘는  localhost:5000/detail?word_give=단어 일 때 사용하요 이땐 return도 word=word_give임

 

 

이제 detail페이지에서 내가 주소창에 적은 localhost:5000/detail/단어 에서 단어가 화면에 나타나도록 해보자

<h3> 받은 단어는 {{ word }}</h3>

 

그럼이제 단어자리에 원하는 단어를 넣으면 단어를 keyword로 변수취급해서 엔터 누를때마다 내가 입력한 단어가 화면에 노출된다. 왠지 로그인 같은 화면이나 마이페이지에서 /뒤에 내 닉네임이 있으면 자동으로 내이름이 화면에 노출되는거 ? 그거에 사용되는것 같다. 재밌네!!!! 아직은....