jinja2テンプレートを使ってみる

前書き

前回でPythonモジュール と API の連携はできたので機能追加をしてみました。

追加機能

• BootStrapを用いたUI
• 検索機能
• ソート機能
• Pagination機能

　

内容

検索機能

検索機能に関してはただの「 form 」です。

APIに searchBy と query でパラメータ指定をすればその条件でデータを返してくるのでフロントでは表示するだけです。

返却されたホテルリストを for文 を使って表示します。

APIにページング機能をつけてあるので、最大でも10件のホテルのリストが返却されます。

ソース

        {% for hotel in data.hotels %}
        <div class="row">
            <div class="col-md-5">
                <a href="#">
                    <img class="img-responsive" src="{{ hotel.imagePath }}" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>{{ hotel.name }}</h3><br>
                <div align="left" >
                  <span class="rate rate{{ hotel.grade }}"></span>
                </div>
                <h4> City Code : {{ hotel.cityCode }}</h4>
                <h4>{{ hotel.address }}</h4>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        {% endfor %}

　

ソート機能

検索パラメータの保持をどうしようか、結構悩んだ末にPython側からレスポンスを返す際に、検索パラメータも返却することにしました。

ソート自体も「form」でAPIにパラメータを渡せば、ソートされたリストが返却されるので、またそれを for文 を用いて表示します。

ソース

        <form action="/hotel">
                <input type="hidden" name="query" value={{ data.query }}>
                <input type="hidden" name="searchBy" value={{ data.searchBy }}>
                <select class="span1" name="sortBy">
                    <option value="name">Hotel Name</option>
                    <option value="cityCode">City Code</option>
                    <option value="grade">Hotel grade</option>
                </select>
            <button type="submit" class="btn btn-primary btn-sm"> Sort </button>
        </form>

Pagination機能

Spring に備わった機能で、簡単にPagination機能をAPI側につけることができました。

上記については、また気が向けば記事を書こうかと思っています。

よってフロント側からは、ページを指定してあげるだけで大丈夫です。

ソース

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                {% set backPage = data.pagination.pageNum - 1 %}
                {% set advancePage = data.pagination.pageNum + 1 %}
                    {% if data.pagination.pageNum != 1%}
                    <li>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ backPage }}">&laquo;</a>
                    </li>
                    {% endif %}
                    {% for current in range(1, data.pagination.totalPageCount + 1) %}
                    <li {% if current == data.pagination.pageNum %}class="active"{% endif %}>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ current }}">{{ current }}</a>
                    </li>
                    {% endfor %}
                    {% if data.pagination.pageNum != data.pagination.totalPageCount%}
                    <li>
                        <a href="http://0.0.0.0:50001/hotel/?query={{ data.query }}&searchBy={{ data.searchBy }}&sortBy={{ data.sortBy }}&pageNum={{ advancePage }}">&raquo;</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <!-- /.row -->

　

if文やfor文が入ってますが、内容は

• 現在のページ = 1ページ目 なら ページ戻るボタンを隠す。
• 現在のページ番号の色を変える。
• ページ番号のページに遷移する。
• 現在のページ = ページ合計 なら ページ進むボタンを隠す。

です。下記の画像で、②にカーソルを合わせたときに現在のパラメータを保持しつつ、ページ数を表す pageNum パラメータが追加されていることがわかります。

見た目

BootStrapを使うだけで、見た目が大分よくなりました。
　

まだ色々と検証中ですが、ある程度フロントとAPI間の機能を完成させることができたら、今後は細かな技術にも触れていきたいなと思っています。