Back/Python

Flask jinja2, requests - args 활용 예제

Flask jinja2 활용 예제

 

HTML

            <div>              {# 모두 똑같음. result값에 있는 word를 가지고 오는 것. result.word , result["word"]#}
                <h1 id="word" style="display: inline;">{{ word }}</h1>

                {#        None이 아닐 경우에만 표시 #}
                {% if result.pronunciation != None %}
                    <h5 id="pronunciation" style="display: inline;">/{{ result.pronunciation }}/</h5>
                {% endif %}

            </div>
            {% if status=="new" %}
                <button id="btn-save" class="btn btn-outline-sparta btn-lg" onclick="save_word()"><i
                        class="far fa-save"></i></button>
            {% else %}
                <button id="btn-delete" class="btn btn-sparta btn-lg" onclick="delete_word()"><i
                        class="far fa-trash-alt"></i></button>
            {% endif %}
        </div>
        <hr>
        <div id="definitions">
            {% for definition in result.definitions %}
                <div style="padding:10px">
                    <i>{{ definition.type }}</i>
                    <br>{{ definition.definition.encode('ascii','ignore').decode('utf-8') }}<br>
                    {% if definition.example != None %}
                        <span class="example">{{ definition.example.encode('ascii','ignore').decode('utf-8') }}</span>
                        {#                definition.example | safe 이렇게 하면 태그를 태그대로 작동시킨다. jinja2에서는 태그를 무시하기떄문에#}
                        {#                definition.example | int 이렇게 하면 정수값으로 들어와라 #}
                        {#                definition.example.encode('ascii','ignore').decode('utf-8') 이렇게하면 잘못 가지고 온 이상한 스트링들 모두 무시#}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>

{% if status=="old" %}
<div id="examples" class="container">
    <h3 style="text-align: center;margin-bottom:1rem">Write your own sentences!</h3>
    <ul id="example-list">
        <li id="ex-0">This sentence contains the word <a href="javascript:delete_ex(0)">delete</a></li>
    </ul>

    <div class="d-flex justify-content-between" style="margin-left:20px;">
        <input id="new-example" class="form-control form-control-sm" style="margin-right: 0.5rem">
        <button class="btn btn-outline-secondary btn-sm" onclick="add_ex()">add</button>
    </div>
 </div>
    {% endif %}
</div>

 

jinja2는 flask 내장

ajax로 api값을 받아 온 후 temp_hteml로 붙여넣는 식이 아니라 html에서 바로 작동할 수 있게 해줌.

 

 

진자2 쓸때는 {% %} 안에 쓸 것.

if문을 쓸때도 {% endif %} 끝냄.

 

Python

@app.route('/detail/<keyword>')
def detail(keyword):
    # API에서 단어 뜻 찾아서 결과 보내기
    # 플라스크 안에 있는 함수를 써야하기 때문에 request 를 써야함 . jinja2는 플라스크에서 작동하기 때문에
    # args 는 파라미터 값을 가지고 오는 것. ex) ?name=kim
    status_receive = request.args.get("status_give")
    r = requests.get(f"https://owlbot.info/api/v4/dictionary/{keyword}", headers={"Authorization": "Token 47bcc6f03f7baa8e7648e789366cedd41de4c43b"})

    if r.status_code != 200: #정상적으로 들어오는 값은 200임
        return redirect(url_for("main", msg="단어가 이상해용 ㅠㅠ "))    # 다시 돌려보내는 것. redirect는 flask 내장 함수

    result = r.json()
    return render_template("detail.html", word=keyword, result=result, status=status_receive)
# 여기 있는 word는 html에서 {{ word }} 이런 식으로 사용 가능

 

requests에서 form이 아닌 args를 활용하면 파라미터를 받아올 수 있게 된다.

( developerty.com/tj/?name=아이유)

status_receive = request.args.get("name")

이럴 경우 뒤의 아이유를 가지고 오게 됨

 

app.route에서 뒤에 / < A >라고 했을 경우 하나의 문법인 듯 함.

/detail/A

이런 구조.

이렇게 A의 값을 가지고 와서 코딩 가능