Self Code Review/(sparta) WEB plus - 나만의 단어장

[나만의 단어장] 8. 목록페이지 - 단어 목록 가져오기

밍굥잉 2022. 5. 4. 14:24

jinja2로 단어 목록 테이블

  • DB에 저장된 단어 목록을 가져와 테이블을 채움.

 

app.py - words 컬렉션의 단어들을 가져와 넘겨줌.

@app.route('/')
def main():
    # DB에서 저장된 단어 찾아서 HTML에 나타내기
    words = list(db.words.find({}, {"_id": False}))
    # list 안에 db.words.find로 조건 없는 모든 단어 {}를 찾음. 즉, words는 내 db에 저장된 모든 단어들의 리스트.
    # _id는 mongodb에서 자동으로 만들어주는 id인데 자료형이 특이해서 _id가 들어있는 리스트를 render_template에 넣으면 에러 발생하기 때문에 False.

    return render_template("index.html", words=words)

✅ index.html - 각 단어마다 테이블의 한 줄이 되도록 넣어줌

<tbody id="tbody-box">
    {% for word in words %} <!--하나의 단어에 대해서 tr 하나를 만들기 때문에 for 반복문 사용-->
    <tr id="word-{{ word.word }}">
        <td><a href="/detail/{{ word.word }}?status_give=old">{{ word.word }}</a></td> 
        <!-- 목록의 단어를 클릭하면 해당하는 상세 페이지로 이동, 단어장에 저장되어 있는 단어이므로 status는 old -->
        <td>
            {{ word.definition|safe }} <!-- word 리스트의 definition key -->
        </td>
    </tr>
    {% endfor %}
</tbody>

  • words 딕셔너리 안에 word 리스트 안에 word, definition의 key가 있음.
  • {{ word.word }} : word 리스트 안의 word 키를 가리킴
  • 예를 들어,
  • words = [{ “word” : “good” , “definition” : “to be desired or approved of.” }] 라면,
  • 아이디 word-{{ word.word }} 는 word-good 이 아이디가 됨.