【转】Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax

http://897371388.iteye.com/blog/1975351

大致思路也就是下面，由于最近在学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来完成了。

Html代码  收藏代码
  1. php artisan migrate:make create_athomes_table  

打开对就的table进行修改，代码大致如下

Php代码  收藏代码
  1. <?php  
  2.   
  3. use IlluminateDatabaseSchemaBlueprint;  
  4. use IlluminateDatabaseMigrationsMigration;  
  5.   
  6. class CreateAthomesTable extends Migration {  
  7.   
  8.     /** 
  9.      * Run the migrations. 
  10.      * 
  11.      * @return void 
  12.      */  
  13.     public function up()  
  14.     {  
  15.         Schema::create('athomes', function(Blueprint $table)  
  16.         {  
  17.             $table->increments('id');  
  18.             $table->float('temperature');  
  19.             $table->float('sensors1');  
  20.             $table->float('sensors2');  
  21.             $table->boolean('led1');  
  22.             $table->timestamps();  
  23.         });  
  24.     }  
  25.   
  26.     /** 
  27.      * Reverse the migrations. 
  28.      * 
  29.      * @return void 
  30.      */  
  31.     public function down()  
  32.     {  
  33.         Schema::drop('athomes');  
  34.     }  
  35.   
  36. }  

还需要在models下添加一个class
Html代码  收藏代码
  1. <?php  
  2.   
  3. class Athomes extends Eloquent {  
  4.   
  5.     protected $table = 'athomes';  
  6.   
  7. }  

添加到routes.php
Html代码  收藏代码
  1. Route::get('/athome/{atid}',function($atid){  
  2.     $atdata=Athomes::where('id','=',$atid)  
  3.                         ->select('id','temperature','sensors1','sensors2','led1')  
  4.                         ->get();  
  5.     return Response::json($atdata);  
  6. });  

再为其创建一个页面
Html代码  收藏代码
  1. Route::get('/athome',function(){  
  2.     $maxid=Athomes::max('id');  
  3.     return View::make('athome')->with('maxid',$maxid);  
  4. });  

添加两个seeds
Php代码  收藏代码
  1. class AthomesTableSeeder extends Seeder  
  2. {  
  3.     public function run()  
  4.     {  
  5.         Athomes::create(array(  
  6.             'temperature'=>'19.8',  
  7.             'sensors1'=>'22.2',  
  8.             'sensors2'=>'7.5',  
  9.             'led1'=>False  
  10.         ));  
  11.         Athomes::create(array(  
  12.             'temperature'=>'18.8',  
  13.             'sensors1'=>'22.0',  
  14.             'sensors2'=>'7.6',  
  15.             'led1'=>False  
  16.         ));  
  17.     }  
  18. }  

然后，
Html代码  收藏代码
  1. php artisan migrate  
  2. php artisan db:seed  

这样我们就完成了REST的创建

打开/athome/1看有没有出现相应的json数据

添加Angularjs

开始之前我们需要修改angularjs，默认的｛｛我选择了喜欢的<%，修改代码如下

Html代码  收藏代码
  1. var myApp = angular.module('myApp', [], function($interpolateProvider) {  
  2.     $interpolateProvider.startSymbol('<%');  
  3.     $interpolateProvider.endSymbol('%>');  
  4. });  

让我们用一个简单的例子来测试下是否工作。
Javascript代码  收藏代码
  1. function FetchCtrl($scope, $http, $templateCache) {  
  2.       $scope.method = 'GET';  
  3.       $scope.url = '<?= url('/athome/1') ?>';  
  4.   
  5.       $scope.code = null;  
  6.       $scope.response = null;  
  7.        
  8.       $http({method: $scope.method, url: $scope.url, cache: $templateCache}).  
  9.         success(function(data, status) {  
  10.             $scope.status = status;  
  11.             $scope.data = data;  
  12.             $.each(data,function(key,val){  
  13.                 sensorsData.push(val.sensors1);  
  14.             })  
  15.         }).  
  16.         error(function(data, status) {  
  17.             $scope.data = data || "Request failed";  
  18.             $scope.status = status;  
  19.             log.l("Request Failed");  
  20.         });  
  21.     }  

HTML代码
Html代码  收藏代码
  1. <div id="App1" ng-app="myApp" ng-controller="FetchCtrl">  
  2.   <pre>http status code: <%status%></pre>  
  3.   <pre>http response data: <%data%></pre>  
  4. </div>  
至于为什么会写一个id="App1"是因为会出现一个id="App2"，也就是两个angularjs的App，需要在第二个下面添加：
Javascript代码  收藏代码
  1. 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 这个库。
故而比较简单
Javascript代码  收藏代码
  1. var app = angular.module('chartApp', ['n3-charts.linechart']);  
  2. app.controller('MainCtrl', function($scope, $http, $templateCache) {  
  3.     $scope.click=function(){  
  4.         $scope.options = {lineMode: 'cardinal',series: [{y: 'value', label: '温度', color: 'steelblue'}]};  
  5.         $scope.data=[{x:0,value:12}];  
  6.         $scope.url = '<?= url('/athome') ?>';  
  7.            $scope.url=$scope.url+'/'+{{$maxid}};  
  8.         log.l($scope.url);  
  9.   
  10.         $scope.method = 'GET';  
  11.            
  12.         $http({method: $scope.method, url: $scope.url, cache: $templateCache}).  
  13.             success(function(data, status) {  
  14.                 $.each(data,function(key,val){  
  15.                     $scope.data.push({x:1,value:val.sensors1});  
  16.                     $scope.data.push({x:2,value:val.sensors2});  
  17.                     log.l($scope.data);  
  18.                 })  
  19.             }).  
  20.             error(function(data, status) {  
  21.                 $scope.data = data || "Request failed";  
  22.                 log.l("Request Failed");  
  23.             });  
  24.     }  
  25. });  

HTML代码如下:
Html代码  收藏代码
  1.                     <div id="App2" ng-controller="MainCtrl">  
  2.                         <button ng-click="click()" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> Star  
  3. 获取数据</button>  
  4.                         <linechart data='data' options='options'></linechart>  
  5.                     </div>  
补充:里面使用了bootstrap框架
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mimime/p/5927621.html