前書き
前回で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 }}">«</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 }}">»</a>
</li>
{% endif %}
</ul>
</div>
</div>
<!-- /.row -->
if文やfor文が入ってますが、内容は
- 現在のページ = 1ページ目 なら ページ戻るボタンを隠す。
- 現在のページ番号の色を変える。
- ページ番号のページに遷移する。
- 現在のページ = ページ合計 なら ページ進むボタンを隠す。
です。下記の画像で、②にカーソルを合わせたときに現在のパラメータを保持しつつ、ページ数を表す pageNum パラメータが追加されていることがわかります。
見た目
BootStrapを使うだけで、見た目が大分よくなりました。
まだ色々と検証中ですが、ある程度フロントとAPI間の機能を完成させることができたら、今後は細かな技術にも触れていきたいなと思っています。