業務に役立つPerl 12章 WebフレームワークMojolicious ・・・のちょっと改造
いきなり12章?
JQueryを使った方法だった
- ソースを写経してみたけど動かず。
- 本に掲載されていた頃のMojoliciousと、自分のPCに入れていたMojoliciousのバージョン違いによるものだった
- 著者の方のブログで報告があった。
- [業務に役立つPerlが増刷されました。Mojoliciousがバージョン6に対応しています。 - サンプルコードによるPerl入門] (http://d.hatena.ne.jp/perlcodesample/20150527/1432685095)
- そして、当時はさっぱりわからなくて挫折した
- そりゃそうだ、フロントエンドのJavascriptにサーバー側で動くPerlなりPHPなりを知らないといけなかったんだもの
- 無謀すぎる
- それだけに、今、自分の端末で動いてうれしい
でも、これを「自在に」となるとJavascriptとJQueryの勉強もしなきゃならんのよねー
せっかくなので、最近勉強していまいちなクロージャを組み合わせてカウンタを実装してみた。
- クロージャ:例)カウンタを作ろう!みたいなの多いんで
- カウンタつくってもなー、とかおもってたけど、いざ動かしたらすごい感動した。何だこの感動
use strict; use warnings; use Mojolicious::Lite; require 'counter.pl'; # クロージャの変数セッティング my $count = 0; { sub count {++$count}; sub count_now {$count}; } # トップページ get '/' => 'index'; # 「Hello World」というデータを取得するためのURL get '/api/hello' => sub { my $self = shift; # クロージャ呼び出してカウント足す count(); # 現時点のカウントを変数に入れる my $count_now = count_now(); # JSONとしてデータを描画 $self->render( json => { message => 'Hello World', counter => "$count_now" } ); } => 'apihello'; # アプリケーションの開始 app->start; __DATA__ # トップページのHTML @@ index.html.ep <html> <head> <title>ajax application</title> <!-- 4-1.JQueryの読み込み --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"> </script> </head> <body> <script type="text/javascript"> // 4-2.ページを読み込んだときに実行する関数の登録 $(document).ready(function(){ // 4-3.ボタンをクリックしたときに実行する関数の登録 $('input[name="get"]').click(function() { // 4-4.Webサーバにリクエストを送信 $.ajax({ type : "get", url : "<%= url_for 'apihello' %>", success : function(result){ // 4-5. Ajax通信が成功した場合にデータを描画 $("#display").text(result.message); $("#counter").text(result.counter); }, dataType : "json" }); }); }); </script> <style type="text/css"> #display { font-size:200% } </style> <h1>Ajax application</h1> <!-- 4-6.ボタン --> <input type="button" name="get" value="Get Data"> <!-- 4-7.文字が描画される場所 --> <div id="display"></div> <div id="counter"></div> </body> </html>