での場所編集

私は今週、マーク・ガードナーの読書を本当に楽しんだが、ある意味で少し悲しくなった.
多くのPerlウェブ開発が過去にどのように立ち往生するかについて考えさせられたので、それは私を悲しくしました.私は間違って取得しないでください-私は近代的なPerlのWebフレームワークを使用すると、ノードのような技術を行うことができる何かを行うことができます知っている.jsしかし、私は情報がどれくらい広く知られているかを知りません.あなたが多くの時間を読むならばPerl questions スタックオーバーフローでは、すぐにどのように多くのPerlのWeb開発はまだCGIのプログラムでは、ランプのスタックで実行を実現します.そこに助けを求めている人々の多くのために、あなたのコードからあなたのHTMLを切り離すためにテンプレートエンジンを使用しても、彼らがむしろ避けたい最先端技術であるようです.そして、それは他の現代のウェブ技術が完全にそれらを通過することを意味します.
しかし、それのための必要は全くありません.クールな近代的なWeb技術の多くは、フロントエンドでは、ブラウザで発生します.そして、ブラウザはあなたがバックエンドで使用している技術をすべて気にしない.ブラウザが有効なHTML、CSSとJavaScriptを使用して動作するように指定されている限り、Perl、ノードを使用して生成された場合は問題ではありません.JSまたは他の技術が今週トレンドです.
それで、私はあなたがバックエンドでPerlを使用していくつかの巧妙な近代的なWeb開発トリックを行うことがあります方法を示す記事の短いシリーズを書く価値があると思いました.まず、データの編集を開始します.

ダンサー2から始める
基本から始めましょうDancer2 アプリケーション.我々はいくつかの種類のフリーランスの開発者であると偽りましょう、我々は同時に進行中のさまざまなクライアントのための多くのプロジェクトがあります.基本的なレベルでは、あなたが現在取り組んでいるプロジェクトを見てみたい.役に立つウェブページは、このように見えるかもしれません.

ここでは、2つのクライアントがあります.
これは非常に基本的なダンサー2アプリケーションです.2つのテーブルがありますclient and project . 使いましたDancer2::Plugin::DBIC 私のアプリケーションから私のデータベースにアクセスしやすくするために.このページを表示する単一のルートがあり、ページを使用して合理的によく設計されて見えるように作られていますBootstrap .
ダンサーコードは些細なものです.

package APIDemo;
use Dancer2;
use Dancer2::Plugin::DBIC;

get '/' => sub {
  template 'index' => {
    title => 'APIDemo',
    clients => [ schema->resultset('Client')->all ],
  };
};

true;

そして、テンプレートの関連する部分は単純なループのカップルです.

<table class="table">
  <tr>
    <th>Code</th>
    <th>Name</th>
    <th>Email</th>
    <th>Projects</th>
  </tr>
<% FOR client IN clients -%>
  <tr>
    <td><% client.code %></td>
    <td><% client.name %></td>
    <td><% client.email %></td>
    <td>
      <ul>
<% FOR project IN client.projects -%>
        <li><% project.code %> / <% project.name %></li>
<% END -%>
      </ul>
    </td>
  </tr>
<% END -%>
</table>

現場編集
これまでのところ、私は良い.しかし、少し賢くなりましょう.私はあなたがすべてのページをクリックするだけでテキストを変更することができますテキストを変更し、変更を保存するためのダニボタンを押すことができますウェブページを見てきたことを確認します.その機能をこのページに加えましょう.
このようなシステムには2つのコンポーネントが必要です.

テキストをクリックして編集するときにユーザーに編集ボックスを与えるJavaScriptAJAX 変更を保存するバックエンドAPIへの呼び出し

Ajax呼び出しを処理し、新しいデータをデータベースに保存するバックエンドのコード

最初にバックエンドを見てみましょう.

バックエンドのPerl
これにはいくつかのアプローチがある.あなたならばREST API そして、このように更新されることができるすべてのリソースのためにパッチ終点を書きます.それは良い方法ですが、非常に似たようなコードの多くを書くことができます.私は別のアプローチを取った.
私は、更新されているオブジェクトのタイプを与えられることを期待するAPIエンドポイントを書きました.コードは次のようになります.

patch '/api/update_attribute' => sub {

  my $input = decode_json(request->content);

  my $rs = schema->resultset($input->{resultset});

  my $object = $rs->find($input->{id});

  if ($object) {
    $object->update($input->{update});
  }

  content_type('application/json');

  return 200;
};

生産システムでは、あなたのAPIをあなたのウェブサイトに別々のアプリケーションにしたいと思うでしょう.これが単純な例であるので、それらは両方とも同じアプリケーションにあります、そして、私はちょうど接頭辞を使いました/api API呼び出しの場合.
しかし、コードは複雑ではありません.私たちは私たちのパラメータへのアクセスを得るためにデコードできるJSONペイロードを期待します.つのパラメータは問い合わせに必要なResultSetの名前で、もう一つは我々が更新している実際のオブジェクトのIDです.それらをまとめて、結果セットを使うことができますfind() データベースからオブジェクトを取得する方法です.我々は期待するupdate パラメータをハッシュマップキーとして、オブジェクトに直接渡すことができる新しい値をキーとしますupdate() メソッド.我々の現在の例は一度に1つの属性を更新するだけです、しかし、我々は同時に複数の属性を扱うことができる将来の証明コードを書きました.
コードは賢くすることができます.オブジェクトを見つけることができない場合は、更新をスキップします.おそらくその時点で404を返すべきです.また、結果セットが不足している場合、パラメータの意味のあるセットを渡し、適切なアクションを取ることを確認する必要があります.しかし、これは概念の証明のために十分です.

フロントエンドのjQuery
現在、フロントエンドを見る時間です.私は以前に、ウェブページがブートストラップを使って設計されたと言いました.そして、bootstrapについての良いものの1つはそれが使うということですjQuery すべてのフロントエンドの賢さのために.したがって、bootstrapを使用しているページは既にjQueryのコアライブラリをロードします.我々は、アドインを探す必要があるだけで機能をサポートする必要があります.Googleとのカップルが私を導いたjQuery-editable それは、我々が必要とするすべてをします.
基本的に、jQuery編集可能なページをHTML要素に追加できます.ドキュメントで推奨されるアプローチは、編集可能な任意の要素に「編集可能」クラスを追加することです.その後、JavaScriptドキュメント準備イベントを使用してプラグインを設定できます.これはjQueryを使用する際にかなり標準的なアプローチです.私はファイルを作成しましたapidemo.js これはメインレイアウトテンプレートにロードされます.

$( document ).ready(function() {

  $('.editable').editable(function(value, settings) {
    var data = {
      resultset: this.dataset.resultset,
      id:        this.dataset.id
    };

    var update = {};
    update[this.dataset.attribute] = value;

    data.update = update;

    var url = '/api/update_attribute';

    $.ajax({
      url: url,
      type: 'PATCH',
      data: JSON.stringify(data),
      success: function(data) {
        console.log(data);
      }
    });

    return(value);
  }, {
    submit: '✓',
    cancel: 'X',
    showfn : function(elem) { elem.fadeIn('slow') },
    cancelcssclass : 'btn btn-danger',
    submitcssclass : 'btn btn-success'
  });
});

このほとんどは、設定を気にするeditable() ユーザーがHTML要素の値を編集するたびに呼び出される関数.
を作成することから始めますdata AJAXリクエストのペイロードとして渡されるオブジェクト.オブジェクトの最初の2つの属性は以下の通りですresultset and id Perlコードで見た通り、更新する正しいデータベース行を見つけます.これらの値をdataset 現在のHTML要素に関連付けられている属性.これらはdata-* 現代のHTMLで見たかもしれない属性.HTML要素に任意の属性を追加し、JavaScriptから値を読み取ることができます.つまり、この情報を追加するためにテンプレートを少し変更する必要があります.例えば、<td> クライアント名の要素は以下のようになります:

<td class="editable" data-resultset="Client"
    data-attribute="name" data-id="<% client.id %>">
  <% client.name %>
</td>

私たちはclass="editable" それで、我々は編集可能な要素としてこれを特定することができます.また、追加しましたdata-resultset , data-attribute and data-id 属性.これらの値のいくつかはハードコードですがdata-id 値はテーブルのこの行に表示しているクライアントオブジェクトから来ます.
そこで、結果セットとidをdata オブジェクト.次に、属性名を関数に渡した値(属性の新しい値になる)にマップする別のオブジェクトを作成します.このようなJavaScriptオブジェクトを作成することによって、私たちはPerlコードに直接update() (上記のように).では、このupdate オブジェクトを格納し、data .
次のステップは、実際にデータベースを更新するAjax呼び出しを行うことです.使用するJSON.stringify() エンコードするdata オブジェクトがJSONに( PerlコードがJSONをPerlデータ構造にデコードできるようにする).私たちは基本的にAjax呼び出しから返される値を無視します(ちょうどコンソールにそれを書いてください).しかし、このコードのより厳密なバージョンはどんなエラー応答も探して、扱いたいです.
セットアップの残りの部分は化粧品です.「送信」ボタンと「キャンセル」ボタンのラベルを設定し、「Cookie」オプションを使用してブートストラップが認識するボタンクラスを指定します.最後に、編集ボックスが徐々にフェードアウトすることを意味する関数を書きました.
そしてそれです.すべてのファイルを保存、あなたのダンサーのアプリを再起動し、それを再読み込みします.何も違って見えるでしょうが、クライアント名をクリックすると、これが表示されます.

その後、名前を編集することができますし、変更を提出すると、データベースに保存されます.
このアプローチについての良いことは、それをすべて設定して、それは本当にそれがページ上に表示される他のデータ項目のために動作するように簡単です.あなただけを追加する必要がありますeditable クラスと関連data-* 属性.
The code for this demo app is available on GitHub そして、そのバージョンでは、プロジェクト名と一緒にクライアント名とメールアドレスを編集することができます.
私はこれがどのようにPerlを期待して使用するすべての鐘と口笛を持っているWebアプリを構築するために使用できる方法をお見せし始めることを願っています.あなたが私がこのシリーズで探検するのを見たいと思っている特定の現代のウェブ機能があるならば、コメントで私に知らせてください、そして、私は私が何をすることができるかについて見ます.