[python] DJangoでAPI的なものを作る その6 Webページを作る

前回まででAPIを作る+PySideを使用したアプリから呼び出す をやったので、今度はWebページを作るのをやってみました。
おおむね参考にしたサイトをなぞってるだけなので、詳細は省いて躓いたところ等をメモっておきます。

ページの作成方法は、

Python Django入門 (1)

のページを参考にしました。
全コードは、 GitHubにアップしてあります。

View周り

まず、Webページを表示するためのView周り。

関数を使用するやりかたもありますが、今回はページャーも作成したかったので
クラスを使用してVIEWを作成しました。

LISTVIEWクラスを継承したクラスを作成すると、ページャー機能がついた状態でVIEWを作成することができます。
オーバーライドする関数は get と put なのは、APIのときと同様です。

  1. paginate_by で、1ページに表示する要素数を指定する
  2. context_object_name に、Template内で要素を呼び出すための名前を指定する
  3. template_name に、表示する内容のテンプレート(HTML)を指定する

ページャーを使用する場合は、とりあえずこの3つを指定します。
ページャーで表示したい要素は、 self.object_list に入れてあげることでTemplate内でcontext_object_nameで指定した名前で使用できるようになります。
それ以外で、テンプレート内の要素をセットしたい場合は get_context_dataの引数として(変数名=値,…)のように書きます。
上のサンプルの場合、Template内で {{test_view}} は Hello World!! に置き換えてくれます。

Template周り

Template内では {{% command %}} 形式でLoopやらIfの処理 {{name}} で、Viewから受け取ったContextを表示したりすることができます。
そして、Templateを作成する場合は、共通で使用するhtmlを作成して、
それを継承して各ページのテンプレートを作成するのがスタンダードのようです。

継承して作成する際は、 {{% block ~ %}} というタグ?を使用すると良いようです。
これは、継承元(base.html) にある {{% block name %}} を、継承先の {{% block name %}} ~~内容~~ {{% endblock %}}で置き換えてくれます。

継承元が↑のようになっていたら、

継承先で、置き換える要素を書いてあげればOKです。

1行目のこれが、継承元のファイルを指定しているのですが、このファイルのパスは、templatesフォルダからのパスでの指定になります。
おなじフォルダにあるからといって↑のように書くとエラーになってしまうので注意が必要です。

ページャーで表示したいものを実際に表示するときは、for を使用します。

context_object_name で指定した名前を for で使用すると、
要素の数だけ要素を取り出して、行を追加していけます。
元が dict の場合は args.val のようにして、dict内の要素を取り出すことが出来ます。

TwitterBootstrapまわり

表示用のTemplateを作成する際にはTwitterBootstrapを使用しています。
コレを使用すると、わりと簡単に見た目がおしゃれなUIが作れるのが良いですね。
おおむね悩まず出来たのですが、モーダルを表示する部分が上手くいかずにしばらく悩んでしましました。
modal

モーダルというのは、↑のような確認画面の事です。
上手くいかなかったのは,JQueryのjsをダウンロードし忘れていたからだったのですが
その過程で JQuery について少し覚えたのでメモ。

このモーダルを表示するときの中身は JQuery を使用した書き換えをを使用しています。
(はじめは引数を渡すような感じなのか?と思ってました)

JQueryで書き換えをしているのは、このJavaScripts部分です。
del_confirm クラスを指定してるボタンをクリックすると、ファンクションが呼ばれ
ファンクション内で書き換えを行う…という処理が書かれています。
mel使いの私には、この $ は変数定義に見えて仕方が無いのですが、この $ は、JQuery の変数であるというのを見て
目玉が飛び出ました。なんという気持ち悪さwwwww

たとえばコレは、 id=del_pk となっているテキストを、タグのpk要素で書き換える という文章になります。

ボタンが↑

<span id=”del_pk”></span>

モーダル内に、↑のように変更するための要素を準備しておきます。

いままでJQueryがいまいち理解出来なかったのですが、おかげでなんとなく効能が分かってきました(わぁい

そんなこんなで、土台はDjangoをPythonを使用して書いているものの、Webページを作成使用とすると
問答無用でHTML+JavaScriptを扱わないといけないのが少々骨が折れるのがでメリットですが
ブラウザがあれば手軽に見れるツールが作れる・exe作らないでも良い というメリットがあるのが良いですね。

まだ基本を覚えたぐらいですが、それでも出来ることがどんどん思いついてきて夢がひろがりんぐ!!

ページを作ってたらJQueryやらAjaxやらに興味がわいたので
しばらくはWeb周りの勉強をしようかなーと思います。

がんばるぞい

コメントを残す

メールアドレスが公開されることはありません。


*