Laravel+Angularjs+D3打造可視化數據,RESTful+Ajax

大體思路也就是下面，因爲最近在學Laravel也在學Angularjs，加上以前作的項目用到了d3。

原來的方案以下:

jQuery+highchart.js+Django

jQuery主要於ajax，以及Json解析 詳情可見:http://api.phodal.com

如今的方案就變成了

Laravel+Angularjs+D3+Bootstrap

效果可見:www.xianuniversity.com/athome

最後效果圖以下所示:

代碼可見：https://github.com/gmszone/learingphp

框架簡介

Laravel

Laravel是一套簡潔、優雅的PHP Web開發框架(PHP Web Framework)。它可讓你從麪條同樣雜亂的代碼中解脫出來；它能夠幫你構建一個完美的網絡APP，並且每行代碼均可以簡潔、富於表達力。

開發應該是一個創造性的過程, 讓你你享受，而不是讓你很痛苦的事情。

Angular

AngularJS 是一個爲動態WEB應用設計的結構框架。它能讓你使用HTML做爲模板語言，經過擴展HTML的語法，讓你能更清楚、簡潔地構建你的應用組件。它的創新點在於，利用 數據綁定 和 依賴注入，它使你不用再寫大量的代碼了。這些全都是經過瀏覽器端的Javascript實現，這也使得它可以完美地和任何服務器端技術結合。

不過，一開始是考慮ember js，不喜歡谷歌學術化的東西。只是ember js的體積暫時讓我失去了興趣。。

D3

D3 是最流行的可視化庫之一，它被不少其餘的表格插件所使用。它容許綁定任意數據到DOM，而後將數據驅動轉換應用到Document中。你可使用它用一個數組建立基本的HMTL表格，或是利用它的流體過分和交互，用類似的數據建立驚人的SVG條形圖。

Bootstrap

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。

一個又一個的開源組合起來，造成了巨大的優點。就是對熱門的技術感興趣。。。(轉載自Phodal's Blog)

建立RESTful

這個也就是由Lavarel來完成了。

php artisan migrate:make create_athomes_table

打開對就的table進行修改，代碼大體以下

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateAthomesTable extends Migration {

	/**
	 * Run the migrations.
	 *
	 * @return void
	 */
	public function up()
	{
		Schema::create('athomes', function(Blueprint $table)
		{
			$table->increments('id');
			$table->float('temperature');
			$table->float('sensors1');
			$table->float('sensors2');
			$table->boolean('led1');
			$table->timestamps();
		});
	}

	/**
	 * Reverse the migrations.
	 *
	 * @return void
	 */
	public function down()
	{
		Schema::drop('athomes');
	}

}

還須要在models下添加一個class

<?php

class Athomes extends Eloquent {

	protected $table = 'athomes';

}

添加到routes.php

Route::get('/athome/{atid}',function($atid){
	$atdata=Athomes::where('id','=',$atid)
						->select('id','temperature','sensors1','sensors2','led1')
						->get();
	return Response::json($atdata);
});

再爲其建立一個頁面

Route::get('/athome',function(){
	$maxid=Athomes::max('id');
	return View::make('athome')->with('maxid',$maxid);
});

添加兩個seeds

class AthomesTableSeeder extends Seeder
{
	public function run()
	{
		Athomes::create(array(
			'temperature'=>'19.8',
			'sensors1'=>'22.2',
			'sensors2'=>'7.5',
			'led1'=>False
		));
		Athomes::create(array(
			'temperature'=>'18.8',
			'sensors1'=>'22.0',
			'sensors2'=>'7.6',
			'led1'=>False
		));
	}
}

而後，

php artisan migrate
php artisan db:seed

這樣咱們就完成了REST的建立

打開/athome/1看有沒有出現相應的json數據

添加Angularjs

開始以前咱們須要修改angularjs，默認的｛｛我選擇了喜歡的<%，修改代碼以下

var myApp = angular.module('myApp', [], function($interpolateProvider) {
	    $interpolateProvider.startSymbol('<%');
	    $interpolateProvider.endSymbol('%>');
	});

讓咱們用一個簡單的例子來測試下是否工做。

function FetchCtrl($scope, $http, $templateCache) {
	  $scope.method = 'GET';
	  $scope.url = '<?= url('/athome/1') ?>';

	  $scope.code = null;
	  $scope.response = null;
	 
	  $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
	    success(function(data, status) {
	        $scope.status = status;
	        $scope.data = data;
	        $.each(data,function(key,val){
	        	sensorsData.push(val.sensors1);
	        })
	    }).
	    error(function(data, status) {
	        $scope.data = data || "Request failed";
	        $scope.status = status;
	        log.l("Request Failed");
	    });
	}

HTML代碼

<div id="App1" ng-app="myApp" ng-controller="FetchCtrl">
				      <pre>http status code: <%status%></pre>
				      <pre>http response data: <%data%></pre>
				    </div>

至於爲何會寫一個id="App1"是由於會出現一個id="App2"，也就是兩個angularjs的App，須要在第二個下面添加：

angular.bootstrap(document.getElementById("App2"),['chartApp']);

那麼效果應該以下所示:

http status code: 200

http response data: [{"id":1,"temperature":19.799999237061,"sensors1":22.200000762939,"sensors2":7.5,"led1":0}]

或以下圖所示

D3

咱們最後用來產生數據的部分。

這裏依賴於 https://github.com/n3-charts/line-chart 這個庫。

故而比較簡單

var app = angular.module('chartApp', ['n3-charts.linechart']);
	app.controller('MainCtrl', function($scope, $http, $templateCache) {
		$scope.click=function(){
			$scope.options = {lineMode: 'cardinal',series: [{y: 'value', label: '溫度', color: 'steelblue'}]};
			$scope.data=[{x:0,value:12}];
	        $scope.url = '<?= url('/athome') ?>';
            $scope.url=$scope.url+'/'+{{$maxid}};
			log.l($scope.url);

			$scope.method = 'GET';
			 
			$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
			    success(function(data, status) {
			        $.each(data,function(key,val){
			        	$scope.data.push({x:1,value:val.sensors1});
			        	$scope.data.push({x:2,value:val.sensors2});
			        	log.l($scope.data);
			        })
			    }).
			    error(function(data, status) {
			        $scope.data = data || "Request failed";
			        log.l("Request Failed");
			    });
		}
	});

HTML代碼以下:

<div id="App2" ng-controller="MainCtrl">
				        <button ng-click="click()" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Star
獲取數據</button>
					    <linechart data='data' options='options'></linechart>
					</div>

補充:裏面使用了bootstrap框架