jinja2로 검색 구현하기

Flask의 서버 사이드 랜더링 템플릿인 jinja2는 ajax로 서버와 통신할 필요를 줄여준다.

페이지가 로딩될 때 동적으로 필요한 데이터를 받아와서 뿌려주기 때문에 페이지 로딩 시 ajax로 서버를 호출할 필요가 없다.

그래서 페이지를 이동하여 검색을 할 경우에도 복잡하지 않게 처리할 수 있다.

 

function search(){
    let search = $('#search').val()
        console.log(search)
    if(search==''){
        alert('값을 입력해주세요')
    } else {
        window.location.href = `/searching/${search}`
    }
}

위 코드는 id가 search인 input의 값을 찾아서, /searching 하위의 검색어로 보내고 있다.

 

@app.route('/searching/<keyword>')
def search(keyword):
    boards = db.board.find({'dog_name':keyword}, {'_id':False})

    result = checklogin()
    if result == 'logout':
        return render_template("searching.html", msg="logout", board=boards)
    else:
        return render_template("searching.html", userid=result, board=boards)

그리고 서버에서는 db에서 dog_name이 검색어와 같은 게시물을 찾아 boards로 반환한다.

이때, 몽고db에서 _id값은 특이한 자료형을 가지고 있기 때문에 False를 적어주지 않으면 값을 뽑아낼 수 없다.

 

그 아래 코드는 로그인 여부를 체크해서 logout 상태면 logout 문자열을, 아니면 userid 값을 반환해주는 코드인데,

이렇게 적절한 코드인지 잘 모르겠다. 일단 지저분해 보이고, 더 효율적인 방법이 있을 것만 같다.

 

로그인 여부와 상관없이 boards는 항상 전달한다.

render_template 내에 인자값으로 전달하면, 클라이언트에서 board라는 키워드로 해당 값을 그대로 사용할 수 있다.

몽고db에서 find로 찾은 결과물은 pymongo.cursor.Cursor, find_one으로 찾은 결과물은 딕셔너리로 반환된다.

 

<div class="row row-cols-1 row-cols-md-3 g-4">
    {% for doglist in board %}
        {% set name = doglist['dog_name'] %}
        {% set img = doglist['img1'] %}
        {% set comment = doglist['comment'] %}
        {% set like = doglist['likes_cnt'] %}
        <div class="col">
            <div class="card h-100">
                <img src="{{ img }}" class="card-img-top" alt="귀여운 강아지 이미지">
                <div class="card-body">
                    <h5 class="card-title">{{ name }} (하트)X{{ like }}</h5>
                    <p class="card-text">{{ comment }}</p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

jinja2는 {% %}를 사용하여 html에서 자바스크립트를 사용할 수 있게 해준다.

변수는 {{ name }} 와 같이 사용할 수 있다.