大致思路也就是下面,由于最近在学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框架
分享到:
相关推荐
2、前端页面采用流行的bootstrap、 angularjs 等流行的前端技术,通过本项目可以掌握 angularjs 的前端的MVC分层设计理念。 3、该项目采用了struts2 hibernate spring和 spring data jpa 开源框架完成,并融入了...
Laravel+vue+admin 实现了JWT鉴权,动态路由菜单管理,角色管理,权限管理,数据字典,一键生成一个模块代码(包括crud代码,包括VUE+JS代码),RESTful API风格,Laravel ORM,更多功能正在实现中, 欢迎各位PR和issue...
Jersey2.18 angularjs
Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务;SwaggerUI+SpringMVC构建RestFulAPI的可视化界面
前端使用Ionic+ AngularJS、后端使用SpringMVC,教你如何开发RESTful风格的接口。
Spring MVC Restful web service的实例,前端采用AngularJS. 采用Spring boot 进行项目构建
豆瓣电影基于Mongodb + Express + Angularjs + Nodejs的单页Web应用程序后退: 提供RESTful API 基于Express框架正面: 显示电影信息和热门评论通过Ajax从后面获取Json数据基于Angularjs框架部署在Heroku.com中网址...
Flask-RESTful Flask-SQLAlchemy Server 先执行db_sync.py python db_sync.py 开启server python runserver.py Client 在22kjobs/client 下输入 python -m SimpleHTTPServer 用浏览器打开
Laravel API 和 AngularJS 前端 - 样板测试版使用作为 RESTful API 后端,使用作为前端来创建一个非常简单的单页密码应用程序。 这个样板使用和以及 、 和 。 ###包括什么处理 CRUD 的 RESTful Laravel API 角度前端...
通过播种器脚本用示例数据填充联系人表。 公开一个RESTful API,以在联系人表上执行列表和CRUD操作。 当联系人被删除到可配置的电子邮件地址时发送电子邮件通知。 强制操作只能由具有某些角色的经过身份验证的用户...
过期的 Token 可请求一次接口,正常返回数据,并在响应头信息返回新的 Token,同时旧的 Token 失效。可通过配置文件修改 Token 过期时间。 小程序二维码 更新日志 2018年05月27日 增加敏感词过滤
Spring Data REST + AngularJS 示例 此示例使用通过编写模型和存储库(接口)轻松创建 RESTful Web 服务。 在前端,此应用程序使用 AngularJS 和来处理 Spring HATEOAS 响应。 确保您按照创建这样的应用程序。
Laravel / RESTful交流群:216721539 有用的链接 laravel,dingo / api,jwt,fractal的文档。 dingo / api dingo api中文文档 jwt(json-web-token) 变压器 apidoc生成在线文档 rest api参考规范 api调试...
Laravel开发-laravel-restful 在Laravel中创建自己的RESTAPI。支持JSON和XML输出。
使用Sequelize js的PostgreSQL或PostgreSQLAngular js应用程序如何将Angular JS应用与PostgreSQL或MySQL连接用法$ npm install sequelize pg mysql运行应用$ node app.js阅读完整教程
本科毕业设计+利用springboot+mybatis打造一个简易的客户管理系统,前后端分离 开发环境 操作系统:Windows 10 IDE工具:IDEA JDK:JDK1.8 数据库:MySQL 5.7 构建工具:Maven 框架:Springboot+Mybatis 相关技术...
Laravel开发-restful Laravel4的RESTful、命名和嵌套路由
Elasticsearch Elasticsearch 是一个基于 Apache ...Elasticsearch 也是使用 Java 编写并使用 Lucene 来建立索引并实现搜索功能,但是它的目的是通过简单连贯的 RESTful API 让全文搜索变得简单并隐藏 Lucene 的复杂性
Laravel开发-restfulapi 此包利用OAuth2服务器Laravel和Laravel CORS包,并添加版本控制和路由,以实现所有包以具有完全功能的API。
laravel-restful-api-starter, 使用 Laravel 和MongoDB构建一个 RESTful API #Laravel Restful API启动程序现在查看一下 WIKI !欢迎捐赠对于代码和 doc: ) !是什么?这里启动器基于以下功能:Laravel 4.2: 使用轻...