DjangoでミリオンライブキャラクターDBを作成 ~メインページ初期表示の作成~
メインページのViewの説明
def index(request): idols = Idol.objects.all() //1 return render(request, 'mysite/index.html', {'idols' : idols} )
1. 現状は初期表示に全件取得するだけを記述
この後検索処理用にPOSTメソッドと分ける必要があります。
メインページのテンプレートの説明
{% extends 'mysite/base.html' %} {% block style %} <style> .img-over{ <!-- 1 --> transition: 0.3s; } .img-over:hover{ transform: scale(2.2); } </style> {% endblock style %} {% block content %} <form> <!-- 2 --> <label>名前:</label> <input type="text" name="name" /> <button type="submit">検索</button> </form> <div class="col-md-12"> {% for idol in idols %} <div class="col-md-1"> <a href="{% url 'mysite:detail' pk=idol.pk %}"><img src="{{ idol.image.url }}" class="img-responsive img-circle img-over"/></a> <!-- 3 --> </div> {% endfor %} </div> {% endblock content %}
1.画像の背景が白なのでマウスオーバーしたときにわかりにくすぎたのでCSSでマウスオーバー用に書いています。
マウスオーバーしたときに画像が拡大されて表示されるようになっています。
2.今回は初期表示だけなので検索はべた書きしています。
実際は検索処理用にDjangoのforms.pyを利用していくことになると思います。
3.今回urlを渡すのに mysite:detailを利用しています。
最初のmysiteは
プロジェクトの方のurls.pyのnamespaceで指定したものです。
最初この指定してある値を間違えてて無駄に時間を取ってしまいました。
urlpatterns = [ url(r'^admin/', include(admin.site.urls)), url(r'^', include('mysite.urls', namespace='mysite')), ]
こうして書いておくことでどのアプリケーションのどのViewを渡しているのかわかりやすくなっていいですね。
次やること
検索フォームの実装に入ります。