[항해99] 웹개발 플러스 2주차 (작성중)

[항해99] 웹개발 플러스 2주차 (작성중)

 

웹개발 플러스 2주차 Jinja

Flask의 더 많은 기능 배우기

API에 보안 키 전달

멀티페이지 사이트 만들기

 

• 동적 웹페이지의 종류

 

 

API 키를 1) 플라스크 서버에서 API로 요청을 보낼 때, 2) 클라이언트에서 API로 요청을 보낼 때 어떻게 같이 보내줘야하는지

 

 

Jinja 사용하기

 

app.py에서, 

 

@app.route('/detail')

def detail():

    r = requests.get('')

    response = r.json()

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

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

 

detail.html에서, 

<li>{{ rows[0]["MSRSTE_NM"] }}: {{ rows[0]["IDEX_MVL"]|int }}</li>

 

=> 숫자가 00.0 으로 표기되는데, 정수로 표기하고 싶으면, 

|int 

사용

 

변수로 받으려면, 

{%  set gu_name = rows[0]["MSRSTE_NM"] %}

{%  set gu_mise = rows[0]["IDEX_MVL"] %}

<li>{{ gu_name }}: {{ gu_mise|int }}</li>

 

반복문 적용하면, 

 

{% for row in rows %}

    {%  set gu_name = row["MSRSTE_NM"] %}

    {%  set gu_mise = row["IDEX_MVL"] %}

    <li>{{ gu_name }}: {{ gu_mise|int }}</li>

{% endfor %}

 

 

일정 수치 이상 선별 적용하려면, 

{% 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>

    {% endif %}

{% endfor %}

 

 

——URL의 일부를 변수로 받기

 

• 브라우저에 HTML을 띄우는 것은 GET 요청이기 때문에, 주소 뒤에 ?를 붙여 파라미터를 넘겨줄 수 있습니다.

@app.route('/detail')

def detail():

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

    return render_template("detail.html", word=word_receive)

 

 

• 플라스크 프레임워크에서는 URL의 일부를 변수로 받는 방법도 사용할 수 있습니다.

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

def detail(keyword):

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

 

——-사전 API 사용하기

https://owlbot.info/

Owlbot English Dictionary API

Owlbot API 요청 파이썬

r = requests.get("https://owlbot.info/api/v4/dictionary/owl", headers={"Authorization": "Token [내토큰]"})

result = r.json()

print(result)

 

Owlbot API 요청 Ajax

$.ajax({

    type: "GET",

    url: "https://owlbot.info/api/v4/dictionary/owl",

    beforeSend: function (xhr) {

        xhr.setRequestHeader("Authorization", "Token [내토큰]");

    },

    data: {},

    error: function (xhr, status, error) {

        alert("에러 발생!");

    },

    success: function (response) {

        console.log(response)

    }

})

 

특정 단어 검색, 

Let word = xx

 

"https://owlbot.info/api/v4/dictionary/owl" => `https://owlbot.info/api/v4/dictionary/${word}`

 

Jinja2

 

2-9

 

<div id="definitions">

    {% for definition in result.definitions %}

    <div style="padding:10px">

        <i>{{ definition.type }}</i>

        <br>{{ definition.definition }}<br>

        <span class="example">{{ definition['example'] }}</span>

    </div>

    {% endfor %}

</div>

 

발음이 있는 경우에만 보여주도록 예외처리를 해줍니다.

{% if result.pronunciation %}

    <h5 id="pronunciation" style="display: inline;">/{{ result.pronunciation }}/</h5>

{% endif %}

 

예문에 HTML 태그 쓰는 것을 허용 |safe

<span class="example">{{ definition.example|safe }}</span>

 

정의와 예문에서 깨진 글자를 없앱니다. .encode('ascii', 'ignore').decode('utf-8') 

<br>{{ definition.definition.encode('ascii', 'ignore').decode('utf-8') }}<br>

{% if definition.example %}

    <span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8') }}</span>

{% endif %}