🍘 🦀 👎 Phalcon PHP + AngularJSの1ページショップ。エラー処理 👨🏽‍🤝‍👨🏻 🦃 ✨

はじめに

みなさんこんにちは！少し前まで、「Phalcon + AngularJS + Zurb Foundationにバスケットのある1ページショップ」という出版物を書きましたが、控えめに言ってもあいまいな効果がありました。むしろ、私は多くの否定的なコメントを受け取りました。一部は客観的で建設的で、一部はそうではありませんでした。そして、私と他の人がAngularJSで書き始めるのに役立つ便利なマニュアルを作りたかったので、なぜそれが起こったのかと思いました

告白

はい、マニュアルは私にとって有用でした、私にとっては、2009年に地元のウェブスタジオでの仕事を拒否された古いもので、今日まで彼はチームで働いたことはなく、雇われた仕事で働いたことはありませんが、プロジェクトの実装の有効性の主な基準は1つでした。これが有効な主なものです。しかし、これは私です。古い記事で、その記事を書いた後、たくさんのコメントを書いた後、まずは趣味のためだけに、趣味のルールに従ってすべてをやろうと決めました。

参照資料

通常、参照のリストは最後にありますが、一方で、記事が書かれているように、なぜそのような実装が選ばれたのか疑問が生じます。そして、あなたの質問への答えなしであなたを去らないために、私は括弧で示されます[？]それが取られたソース。だから、ここに私が頼った文献があり、私の間違いを修正しています。

エラー処理

1ページの食料品店のプロジェクトの実施中に、次の欠点が意図せずに行われました。

phpを使用して、すべての製品を一度に1ページにアップロードします
統一されたコーディングスタイルの欠如
EugeneOZによるAngularJSコントローラーでのロジックの使用[1]
ごみ箱をjsオブジェクトに保存します。これは、 hVosttによってページのリロード[1]後にリセットされました
steppefoxからインラインPHPスクリプト[1]を挿入してバスケットに追加する
新しいカテゴリをロードする際のインターフェースの応答性

この記事では、私が解決策を探した方法と、その結果を共有したいと思います。それでは、各項目を見ていきましょう。

phpを使用して、すべての製品を一度に1ページにアップロードします

計算されたよりも少し多くの商品が店にあり、私たちのカムチャッカインターネットを考えると、我々は計算しました

100個の製品（画像）、各画像は100〜300 kb、最終的には、商品だけが10 mbの量の顧客の貴重なトラフィックを消費し、さらにサイト自体の重量は約10 mb（画像、スタイル、スクリプト）でした。今ではすべてを最適化することができました。ブラウザーは必要なものをすべてキャッシュするため、サイトの重量は最初のダウンロード時に3.9 mb、後続のダウンロードでは1 mb以下です。

このような最適化は、品質を損なうことなく大きな背景画像を圧縮することで達成され、アイコンや小さなグラフィックスのスプライト、ページで重要な役割を果たさなかったブロックも削除されました（レビュー、パートナー、証明書、なぜ私たち、オープンフィードバックフォームjivositeに置き換えられた通信）。それでも、食べ物のあるサイトのダウンロード速度は、誰も必要としない栄冠や賞よりもはるかに重要です。

そしてもちろん、最適化はphpを使用してすべての製品を一度にページにレンダリングすることを拒否したためであり、/＃！/ Menu / 7のようなリンクをクリックしてjsonデータを読み込むajaxに置き換えられましたが、angularjsでルーティングがどのように機能するかを学ぶ機会がありました残念なことに、それ以前はjsルーティングで作業したことがありませんでした。

そして、思ったほど難しくないことが判明しました。実際、ルートは1つしかありませんでした。

function config($routeProvider, $locationProvider) { $routeProvider .when('/menu/:id', {templateUrl: '/app/views/products.html', controller: ProductsController}); $locationProvider.hashPrefix('!'); $locationProvider.html5Mode(true); } angular.module('rollShop').config(config);

次に、サーバーからjsonデータをロードし、テンプレートにレンダリングしました。

 <div class="large-12 columns" ng-view></div>

一般に、このアプローチのインデックス作成のために、サーバーはjsonではなくhtmlを返す必要があると聞きましたが、PHPスクリプトのインライン挿入を回避する方法は明確ではありませんか？この質問は私にとって謎のままです。そして、このアプローチは別の問題を引き起こしました。ユーザーが＃＃/ menu / 7リンクをクリックすると、ページの更新ボタンをクリックすると、 ~~彼の目はjsonデータの形式の血液で満たされ~~ 、通常のページではなくjsonデータだけが表示されます。そして、ここでPhalcon PHP Frameworkが助けになります。実際、それなしでも可能ですが、私はそれを使って作業しているので、そのスタイルですべてを行います。このエラーを修正するために、ajaxリクエストでのみjsonデータを提供し、通常のリクエストではユーザーをlink /＃！/ Menu / $ idにリダイレクトすることにしました。

 public function menuAction($id) { if($id != 'undefined') { if ($this->request->isAjax() == true) { //   $category = Category::findFirst($id); //    $sub_category = Category::find("pid = '" . $id . "'"); if (count($sub_category) > 0) { $products['category'] = $category->name; foreach ($sub_category as $key => $val) { $products['subcategory'][$key] = array( 'name' => $val->name, 'products' => Products::find("category = '" . $val->id . "'")->toArray() ); } } else { $products = array( 'category' => $category->name, 'products' => Products::find("category = '" . $category->id . "'")->toArray() ); } $this->response->setContent(json_encode($products)); return $this->response->send(); } else { $this->response->redirect('/#!/menu/' . $id); return false; } } else { return false; } }

PhalconでのAJAXリクエストのチェックは、次の条件を使用して行われます。

 if ($this->request->isAjax() == true) { //This is Ajax }

しかし、問題があります。AngularJSはデフォルトで特別なX-Requested-Withヘッダーをサーバーに送信しません[6]。つまり、AngularJSの助けがなければこの関数は機能しないため、angular configに1行追加する必要がありました。

 var app = angular.module('rollShop', ['ngRoute', 'mm.foundation'], function ($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }

これですべてが機能し、ユーザーには裸のJSONが表示されなくなります。

ところで、インデックス作成のために、ボットをチェックし、ボットにきれいなhtmlを、jsコードなしで、ボタンなしで、製品だけで提供できると思いました。真実は、これがうまくいくのか、それとも正しいのかわからないということです。誰かがコメントで教えてくれますか。

インラインPHPスクリプトを挿入してバスケットに追加する

前のバグの修正のおかげで、バグはjs関数にインラインPHPスクリプトを挿入することで自動的に修正されました。製品が以前にバスケットに追加された方法と、現在の状態を比較してみましょう。

（fu）へ：

 <div class="add-cart"> <input type="number" ng-model="num<?=$p['id']?> value="1" min="1" max="50"> <button type="button" ng-click="addCart(<?=$p['id']?>, num<?=$p['id']?>, '<?=$p['title']?>', <?=$p['price']?>)"></button> </div>

 $scope.addCart = function(id, num, title, price) { var nums = num || 1; $scope.carts.push({ id : id, num : nums, title : title, price : price }); };

後：

 <div class="add-cart"> <input type="number" ng-model="item.quality" min="1" max="50" placeholder="1"> <button type="button" ng-click="addCart(item)"></button> </div>

 $scope.addCart = function (item) { CartsService.addCart(item); };

正直なところ、このアプローチは顧客が高く評価せず、それ以上支払うこともありませんが、このアプローチがより気に入っています。しかし、どういうわけか私は自分自身を誇りに思い、心から喜んでいます。

統一されたコーディングスタイルの欠如

前の2つの欠点を修正しながら、さらに2つを修正する必要がありました。「コントローラーでロジックを使用する」ことで、サービスがすべてを実行できることと、「単一スタイルのコード作成の欠如」を確認できます。

これは私の永遠の問題ですが、繰り返しますが、経済学と「主なものが機能している」アプローチの観点から見ると、スタイルガイドに煩わされることなく、すべてがここで非常に効果的です。私は多くの時間とお金を節約しました。ちなみに、私のクライアントの予算は5万から10万ルーブルであり、コードの記述方法は気にしません。しかし、これはすべて正当化です。状況を修正し、コードを美しく、読みやすく、論理的にしたいのです。これは、Habré[2]と[3]に関する2つの記事によって助けられました。

その結果、2つのコントローラー、3つの工場、1つのビュー、1つの一般的なapp.jsを取得しました。これは次のようになります。

実際、これらのスタイルガイドで推奨されているとおりです。それでは、コントローラーを見てみましょう。以前の記事と比較できます。

ProductsController.js

 function ProductsController($scope, $routeParams, ProductsService, CartsService) { $scope.items = ''; ProductsService.getData($routeParams.id).success(function(data){ $scope.items = data; }); $scope.addCart = function (item) { CartsService.addCart(item); }; } angular.module('rollShop').controller('ProductsController', ProductsController);

CartsController.js

 function CartController($scope, CartsService) { $scope.carts = CartsService.getItemsCart(); $scope.total = function(){ return CartsService.summary($scope.delivery) }; $scope.removeItem = function (carts, item) { CartsService.removeItem(carts, item); }; } angular.module('rollShop').controller('CartController', CartController);

私にとっては、すべてがクールなようです。私自身も、以前よりも、むしろコントローラーで以前に起こったことよりも気に入っています。

ページのリロード後にリセットされたjsオブジェクトにごみ箱を保存する

読者がまず気づいた次の欠点は、jsオブジェクトにバスケット商品を保管することです。このアプローチを選んだ理由は、ストアが単一ページであるため、前の記事で説明しました。いずれにせよ、localStorageにストレージを実装することは難しくなく、将来的には役に立つと思います。

localStorageで動作するAngularJSの便利なモジュールを探し始めましたが、同時にシンプルで簡単なはずです。いくつかの実装オプションを見つけましたが、私の意見では複雑で大きなものでした。残念なことに今はリンクを覚えていません。そして、私だけのオプションに出会いました[5]。

 angular.module('ionic.utils', []) .factory('$localstorage', ['$window', function($window) { return { set: function(key, value) { $window.localStorage[key] = value; }, get: function(key, defaultValue) { return $window.localStorage[key] || defaultValue; }, setObject: function(key, value) { $window.localStorage[key] = JSON.stringify(value); }, getObject: function(key) { return JSON.parse($window.localStorage[key] || '{}'); } } }]);

確かに、この形式で使用しても、100％の正常な順序は得られませんでした。 1つの製品をバスケットに追加するとき、すべては問題ありませんでしたが、2番目の他の製品または別のカテゴリーの製品が到着するとすぐに、ng-repeatはバスケット内の製品の表示を停止し、コンソールにエラーが表示されました：

リピーターでの複製は許可されていません。「トラック単位」式を使用して、一意のキーを指定します。

ソース[4]でこのエラーの解決策を見つけました。この問題は、$$配列にhashKeyが追加されたためです。それが何で、どこで、なぜかはまだわかりませんが、すべてを機能させるためにそれを取り除く必要があり、localStorageで動作するファクトリの最終バージョンは次のようになります：

 function LocalStorageFactory($window) { return { set: function(key, value) { $window.localStorage[key] = value; }, get: function(key, defaultValue) { return $window.localStorage[key] || defaultValue; }, setObject: function(key, value) { $window.localStorage[key] = JSON.stringify(value, function (key, val) { if (key == '$$hashKey') { return undefined; } return val; }); }, getObject: function(key) { return JSON.parse($window.localStorage[key] || '{}'); }, remove: function(key){ $window.localStorage.removeItem(key); }, clear : function() { $window.localStorage.clear(); } } } angular.module('rollShop').factory('LocalStorageFactory', LocalStorageFactory);

コードは小さく、2つの違いを見つけることは難しくないと思います。$$ hashKeyを確認することで、重複エラーを修正できました。これで、バスケットサービスは適切に機能し、位置を記憶したり、金額を再計算したりすることができました。私は以下のコードを与えます：

 function CartsService(LocalStorageFactory) { var CartsService = {}; var CartData; if(LocalStorageFactory.getObject('carts').length > 0) { CartData = LocalStorageFactory.getObject('carts'); } else { CartData = []; } CartsService.addCart = function (item) { CartData.push({ id: item.id, num: item.quality || 1, title: item.title, price: item.price }); CartsService.update(); }; CartsService.update = function() { if(LocalStorageFactory.getObject('carts').length > 0) { LocalStorageFactory.remove('carts'); } LocalStorageFactory.setObject('carts',CartData); }; CartsService.getItemsCart = function () { return CartData; }; CartsService.removeItem = function (items, id) { items.splice(id, 1); CartsService.update(); }; CartsService.summary = function(dispatch) { var total = 0; var delivery = 0; angular.forEach(CartsService.getItemsCart(), function (item) { total += item.num * item.price; }); //      return total + delivery; }; return CartsService; } angular.module('rollShop').factory('CartsService', CartsService);

完璧ではありませんが、それでも以前よりも優れています。

新しいカテゴリをロードする際のインターフェースの応答性

サーバーから送信されるJSONデータの重量は10 kb以下であり、サーバーによる応答時間と応答時間jsは一般に、巨大なpingを使用するすばらしいカムチャッカインターネットの場合、すべてのリクエストでユーザープリローダーを表示するのが理にかなっています。。

もちろん、これをコントローラーに渡すこともできますが、もっと普遍的なソリューションが必要でした。また、シンプルで簡単なものが必要でした。最初は、AngularJS用のnProgress liteプラグインを使用することを考えましたが、さらに簡単にすることを決定し、例を見つけました[7]。

 function run($rootScope, $timeout) { $rootScope.layout = {}; $rootScope.layout.loading = false; $rootScope.$on('$routeChangeStart', function () { $timeout(function(){ $rootScope.layout.loading = true; }); }); $rootScope.$on('$routeChangeSuccess', function () { $timeout(function(){ $rootScope.layout.loading = false; }, 500); }); $rootScope.$on('$routeChangeError', function () { $timeout(function(){ $rootScope.layout.loading = false; }, 500); }); } angular.module('rollShop').run(run);

これで、イベントの1つが発生すると（イベントの名前からはすべて明らかだと思います）、プリローダーが表示/非表示になります。

 <div class="large-12 columns" ng-hide="!layout.loading"> <!--  ,  gif ,    ,     --> </div>

これで、クライアントはカテゴリがロードされているかどうかを認識せずに、カテゴリを5回クリックしなくなりました。

おわりに

開発中に生じた欠点を修正しようとしましたが、主な目標は、チームがなくても、技術の有能な使用に慣れることでした。正直なところ、私は多くの仕事に時間を費やしましたが、それに対するいかなる報酬も受け取りませんでしたが、私は多くの喜びを受け取りました。私自身は、このプロジェクトで受け取ったお金だけでなく、作業中に得た知識と経験も高く評価できるため、後続のすべてのプロジェクトをより有能なアプローチで行うと結論付けました。経験と知識は彼らの仕事に誇りを与え、仕事の質を向上させ、あなたがすることへの愛を与えます。そして、これらすべてがあなたのポケットにお金なしであなたを残すことはありません。

Phalcon PHP + AngularJSの1ページショップ。 エラー処理