备案控制台
探索云世界
开发者社区 物联网 文章 正文

物联网学习笔记——构建RESTFul平台1

2014-12-02 1588
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 0.前言     前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。

0.前言

    前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。但是由于没有WEB前端，所以只能使用cURL工具或直接修改数据库的方式改变LED状态， 体验非常差。
    REST API入门体验可参考
    受到【 开源IOT——一个最小的物联网系统设计方案及源码】一文的影响。我决定除了服务器和嵌入式侧之外，我应该再多做一些。
    WEB前端涉及到非常多的知识，下面提供一些学习资料。下面各种技术您可能不知道但是您一定用过。
    【HTML】——超文本标记语言
    【CSS】——级联样式表，能够对网页中的对象的位置排版进行像素级的精确控制
    【Javascript】——网络的脚本语言
    【Jquery】——JavaScript 库，极大地简化了 JavaScript 编程
    【Ajax】——异步的 JavaScript 和 XML，与服务器交换数据并更新部分网页的艺术
     本例部分源代码——【 HTML代码】

1.前端框架——Bootstrap

    由于前端的内容太多了，需要学习很长的时间（技术可学习，但是审美我真学不来）。还好各路高手开发了前端框架可以让我们方便而美观的实现网页开发，而把精力放在真正的idea上。推荐使用Bootstrap框架，Bootstrap是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架。
    学习资料
    【 Bootstrap中文网】
    【 Bootstrap 教程】
 

2.简单例子

    下面一个简单的例子来自于Bootstrap中文网，仅修改了title和h1元素中等内容。
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>LED Remote Control Template</title>  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <!-- Bootstrap -->  
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">  
  8.     </head>  
  9.   <body>  
  10.     <h1>LED Remote Control using REST API!</h1>  
  11.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
  12.     <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  
  13.     <!-- Include all compiled plugins (below), or include individual files as needed -->  
  14.     <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  15.   </body>  
  16. </html>  
图1 简单例子

    【若干说明】

    【CDN】在这里并没有把Bootstrap框架放置于本地服务器，而是使用了CDN服务。CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
    【JQuery】Bootstrap需要JQuery的支持
    【CSS和JS】先载入Bootscript的CSS样式，然后载入Bootscript的JS包。
 

3.加个表格

    【设计思路】

    上面的例子未免有些单薄，可再加入一些表格和DIV块。基本思路——网页分为3个部分，一个部分为Header，包含一些作者信息；第二部分为主要内容——表格，表格中包含LED设备的编号、描述和当前状态(打开或关闭)等，该部分内容和数据库中的表结构对应。最后一部分为footer，可包含一些其他的信息例如我的邮箱等。

    【HTML】

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <body>  
  2.   <div class="container">  
  3.     <div class="row">  
  4.       <div class="span12">  
  5.         <p class="lead">徐凯经验分享小站</p>  
  6.       </div>  
  7.     </div>  
  8.     <div class="row">  
  9.       <div class="span12">  
  10.         <table class="table table-hover">  
  11.           <thead>  
  12.             <tr>  
  13.               <th>编号 ID</th>  
  14.               <th>描述 DESC</th>  
  15.               <th>状态 STATUS</th>  
  16.               <th>动作 ACTION</th>  
  17.             </tr>  
  18.           </thead>  
  19.           <tbody>  
  20.             <tr>  
  21.               <td>1</td>  
  22.               <td>RPi.PCF8574.IO0</td>  
  23.               <td>ON</td>  
  24.               <td>ACTION</td>  
  25.             </tr>  
  26.             <tr>  
  27.               <td>2</td>  
  28.               <td>RPi.PCF8574.IO1</td>  
  29.               <td>OFF</td>  
  30.               <td>ACTION</td>  
  31.             </tr>  
  32.           </tbody>  
  33.         </table>  
  34.       </div>  
  35.     </div>  
  36.     <div class="row">  
  37.       <div class="span12">  
  38.         <p class="text-right lead">如果有问题请邮件我，别客气</p>  
  39.         <p class="text-right lead">  
  40.           <em>Email:xukai19871105@126.com</em>  
  41.         </p>  
  42.       </div>  
  43.     </div>  
  44.   </div>  
 
 
图2 加入表格后的效果

    【几点说明】

    【container】 <div class="container"> container可理解为一个容器，该容器包裹了页面上的所有内容。
    【网格布局】 bootstrap采用网格布局，<div class="row"> <div class="span12">row代表一行，span代表一行中的内容。在一行中最多可分为12个单元，最小单元用span1标记，最大单元用span12标记。举个例子<div class="span6">占用该行的6个单元，占用该行的一半。
    【table】在bootstrap中可选择表格的风格， <table class="table table-hover">本例选择了hover形式，当鼠标移动到某一行时，该行的背景会变得灰色一些。这种简单的动态效果给用户更好的体验。
    【thead tbody tr  td】thead为表头标签，tbody为表格内容标签，tr为表格行标签，td为表格中的具体单元标签。
 

4.按钮热身

    【设计思路】

    在表格每行最后一个td标签中加入一个Button，点击该Button可以翻转stauts。例如点击Button，同行的Status会从ON变为OFF，再次点击从ON变为OFF。为了实现这种对应关系的操作，在tr标签中加入一个设备编号取名为dev_id。

    【HTML】

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <table class="table table-hover">  
  2.     <thead>  
  3.       <tr>  
  4.         <th>编号 ID</th>  
  5.         <th>描述 DESC</th>  
  6.         <th>状态 STATUS</th>  
  7.         <th>动作 ACTION</th>  
  8.       </tr>  
  9.     </thead>  
  10.     <tbody>  
  11.       <tr dev_id="1">  
  12.         <td>1</td>  
  13.         <td>RPi.PCF8574.IO0</td>  
  14.         <td >off</td>  
  15.         <td>  
  16.           <button type="button" class="btn btn-primary btn-xs">Toggle</button>  
  17.         </td>  
  18.       </tr>  
  19.       <tr dev_id="2">  
  20.         <td>2</td>  
  21.         <td>RPi.PCF8574.IO1</td>  
  22.         <td>off</td>  
  23.         <td>  
  24.           <button type="button" class="btn btn-primary btn-xs">Toggle</button>  
  25.         </td>  
  26.       </tr>  
  27.     </tbody>  
  28.   </table>  
图3 加入按钮后的效果

    【几点说明】

    【tr编号】 <tr dev_id="1"> 给每一行加入一个编号，1、2、3以此类推逐个排列。
    【Button】<button type="button" class="btn btn-primary btn-xs"> bootstrap提供了多种标签风格，在这里选择最小号的Button——btn-xs 。
 

5.按钮互动

    【设计思路】

    要实现按钮互动就需要写点javascript代码，幸好Javascript不算复杂非常容易学习。编程之前需要理解一下HTML节点的概念。在HTML中所有的元素都是节点，如此之多的节点组成了“树”，节点有父节点、有子节点也会有邻居节点。例如本例中，tr标签有4个td子节点（td子节点的编号从0开始），在最后一个td节点中又有一个button节点。
    【tr dev_id="1"】——> 【td(id)】【td(desc)】【td(status)】【td(action)】
                                                                                      【td(action)】——> 【button】
    那么如果点击button想要获得表格中该行dev_id的信息，那么就需要找button的“爷爷”索要。
 

    【javascript】

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <script>  
  2. $(document).ready(function(){  
  3.   $('.btn').on("click",function(){  
  4.     // 获得 tr元素  
  5.     var trobj = $(this).parent().parent();  
  6.     // tr元素中包含 dev_id属性  
  7.     var dev_id = trobj.attr('dev_id');  
  8.     console.log( dev_id );  
  9.     // 访问该tr元素的所有子td元素  
  10.     var tdobj = $(trobj).children("td");  
  11.      
  12.     var status_obj = $(tdobj).eq(2);  
  13.     var status_str = status_obj.text();  
  14.     console.log(status_str);  
  15.   
  16.     if( status_str == "on"){  
  17.       status_obj.text("off");  
  18.       sendLedControl( dev_id , "off" );  
  19.     }else{  
  20.       status_obj.text("on");  
  21.       sendLedControl( dev_id , "on" );  
  22.     }  
  23.   });  
  24. });  
  25. </script>   
 

    【控制台查看效果】    

    web浏览器中的控制台有点和串口调试相似，在chrome浏览器中 工具->开发者工具。
图4 控制台调试

    【若干说明】

    【$(document).ready()】当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
    【$('.btn').on("click",function())】按钮点击事件响应，$('.btn')代表所有所有class为btn的按钮——表格中最后一列按钮。
    【this】在按钮点击事件中，this为button标签。如果使用console.log打印的话，输出内容为<button type="button" class="btn btn-primary btn-xs">Toggle</button>。但是$(this)则代表一个文件对象模型，$(this) 
 是一个完整的对象包含很多属性和方法。
    【选择tr】var trobj = $(this).parent().parent(); 试图寻找button的爷爷
    【获得dev_id】var dev_id = trobj.attr('dev_id'); dev_id在td标签中，使用attr方法便可获得目标属性。
    【获得所有的td标签】var tdobj = $(trobj).children("td"); 此时td标签共有4个——返回4个td对象

    【定位第2个td标签】var status_obj = $(tdobj).eq(2);  eq(2)代表选择第2个(从0开始)td标签——对应status标签，var status_str = status_obj.text(); 取出当前内容并通过console.log打印。

    【翻转操作，修改text】status_obj.text("off"); 使用text方法重新修改td标签的属性。
    【发送PUT请求】  sendLedControl 请查看下节内容。
 

6.PUT更新

    【设计思路】

    使用ajax发送一个PUT请求，更多信息请参考【 PHP再学习5——RESTFul框架 远程控制LED】，PUT请求的格式如下：
    PUT /api/leds/1
    Host: localhost
    Content-Length: 15
 
    {"status":"on"}    

    【代码实现】

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. function sendLedControl( dev_id , cur_status ){  
  2.   $.ajax({  
  3.     url: '/api/leds/' + dev_id, // /api/leds/1  
  4.     async: true,  
  5.     dataType: 'json',  
  6.     type: 'PUT',  
  7.     data: JSON.stringify({status:cur_status}),  
  8.   
  9.     success: function(data , textStatus){  
  10.       console.log("success");  
  11.     },  
  12.      
  13.     error: function(jqXHR , textStatus , errorThrown){  
  14.       console.log("error");  
  15.     },  
  16.      
  17.   });  
  18. }      

    【执行结果】

    chrome浏览器 工具->开发者工具 选择Network Tag
图5 发送PUT请求
图6 查看status新状态

    【若干说明】

    【url】 /api/leds/1（和【 PHP再学习5——RESTFul框架 远程控制LED】略有差异），LED设备的"网址"。
    【dataType】请求内容为JSON格式
    【type】请求方法为PUT——更新某LED设备信息
    【data】请注意使用JSON.stringify方法，转换之后的格式为{"status":"on"}，若没有stringify方法转换的结果为status:on，这并不符合PUT上传内容的规范。
    【 success 和 error】正确处理和错误处理方法。
    【遗留问题】虽然PUT请求和响应完全正确，但是Jquery总是调用error。网上查找了众多博客和帖子依然没有解决。再思考是不是PUT请求没有响应导致的，修改服务器侧代码问题，使得PUT响应中包含更新之后的LED状态问题，问题随之解决。

7.总结和源码

    因为对前端相关技术不熟悉，所以我以很认真的态度写完了这篇博文。如果您觉得内容中说的不清楚或者错误的地方请留言或者Email我。认真学完这篇博文，发现前端技术javascript，ajax和jquery没有想象的那么可怕甚至还挺好用的。这几天关注了espruino——使用javascript开发MCU的平台，总觉得工程师应该多学一些，见多识广才才行。
【 HTML代码】
文章标签：
物联网平台
CDN
前端开发
JavaScript
物联网
API
PHP
容器
网络架构
CDN
数据格式
JSON
关键词：
物联网平台平台
Restful构建
构建Restful
物联网平台构建
Restful学习笔记
相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台，通过云产品流转到函数计算FC，调用钉钉群机器人API，实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品，7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前，请先开通下方两个云产品，让学习更流畅： IoT物联网平台：https://iot.console.aliyun.com/ LinkWAN物联网络管理平台：https://linkwan.console.aliyun.com/service-open
thinkyoung
目录
相关文章
历年考试不作弊
|
1月前
|
缓存 安全 测试技术
构建高效的RESTful API：后端开发的实践指南
【2月更文挑战第17天】在数字化转型的浪潮中，RESTful API已成为连接不同软件组件、实现数据交互的核心桥梁。本文将深入探讨如何构建一个高效、可扩展且安全的RESTful API，涉及设计原则、开发流程以及性能优化等关键方面。我们将透过实际案例，展示如何在保证简洁性和灵活性的同时，满足日益增长的业务需求和技术挑战。
历年考试不作弊
35 2
源码星辰
|
5天前
|
人工智能 监控 安全
Springcloud数字化物联网智慧工地综合平台源码 劳务管理、设备管理、绿色施工
Springcloud数字化物联网智慧工地综合平台源码 劳务管理、设备管理、绿色施工
源码星辰
14 3
桃李春风一杯酒
|
16天前
|
前端开发 Java API
构建RESTful API：Java中的RESTful服务开发
【4月更文挑战第3天】本文介绍了在Java环境中构建RESTful API的重要性及方法。遵循REST原则，利用HTTP方法处理资源，实现CRUD操作。在Java中，常用框架如Spring MVC简化了RESTful服务开发，包括定义资源、设计表示层、实现CRUD、考虑安全性、文档和测试。通过Spring MVC示例展示了创建RESTful服务的步骤，强调了其在现代Web服务开发中的关键角色，有助于提升互操作性和用户体验。
桃李春风一杯酒
24 2
构建RESTful API：Java中的RESTful服务开发
mrq4nk6ni2neg
|
22天前
|
安全 API 开发者
构建高效可扩展的RESTful API服务
在数字化转型的浪潮中，构建一个高效、可扩展且易于维护的后端API服务是企业竞争力的关键。本文将深入探讨如何利用现代后端技术栈实现RESTful API服务的优化，包括代码结构设计、性能调优、安全性强化以及微服务架构的应用。我们将通过实践案例分析，揭示后端开发的最佳实践，帮助开发者提升系统的响应速度和处理能力，同时确保服务的高可用性和安全。
mrq4nk6ni2neg
25 3
请看我回答~
|
29天前
|
缓存 前端开发 API
构建高效可扩展的RESTful API：后端开发的最佳实践
【2月更文挑战第30天】 在现代Web应用和服务端架构中，RESTful API已成为连接前端与后端、实现服务间通信的重要接口。本文将探讨构建一个高效且可扩展的RESTful API的关键步骤和最佳实践，包括设计原则、性能优化、安全性考虑以及错误处理机制。通过这些实践，开发者可以确保API的健壮性、易用性和未来的可维护性。
请看我回答~
27 0
源码星辰
|
1月前
|
存储 监控 安全
Java基于物联网技术的智慧工地云管理平台源码 依托丰富的设备接口标准库，快速接入工地现场各类型设备
围绕施工安全、质量管理主线，通过物联感知设备全周期、全覆盖实时监测，将管理动作前置，实现从事后被动补救到事前主动预防的转变。例如塔吊运行监测，超重预警，升降机、高支模等机械设备危险监控等，通过安全关键指标设定，全面掌握现场安全情况，防患于未然。
源码星辰
147 5
冷水鱼。
|
1月前
|
JSON 中间件 Shell
使用Python和Flask构建RESTful API
使用Python和Flask构建RESTful API
冷水鱼。
23 0
冷水鱼。
|
1月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
冷水鱼。
16 0
冷水鱼。
|
1月前
|
Java API Maven
使用Java和Spring Boot构建RESTful API
使用Java和Spring Boot构建RESTful API
冷水鱼。
16 0
技术混子
|
1月前
|
JSON API 数据格式
构建高效Python Web应用：Flask框架与RESTful API设计实践
【2月更文挑战第17天】在现代Web开发中，轻量级框架与RESTful API设计成为了提升应用性能和可维护性的关键。本文将深入探讨如何使用Python的Flask框架来构建高效的Web服务，并通过具体实例分析RESTful API的设计原则及其实现过程。我们将从基本的应用架构出发，逐步介绍如何利用Flask的灵活性进行模块化开发，并结合请求处理、数据验证以及安全性考虑，打造出一个既符合标准又易于扩展的Web应用。
技术混子
629 4

物联网

热门文章

最新文章

  • 1
    PostgreSQL "物联网"应用 - 1 实时流式数据处理案例(万亿每天)
  • 2
    【阿里云IoT+YF3300】1.时代大背景下的阿里云IoT物联网的现状和未来
  • 3
    SHEVDC平台及物联网技术产品选型
  • 4
    阿里云IoT2018年度十佳合作伙伴20强入围企业公布
  • 5
    AliOS Things 技术架构
  • 6
    如何高效处理物联网中数据与消息
  • 7
    使用IoT Studio经济高效地完成物联网应用开发（含DEMO）
  • 8
    从端到云-全面讲解物联网全栈开发之道
  • 9
    物联网技术在农业领域的应用
  • 10
    AliOS Things SMP系统及其在esp32上实现示例
  • 1
    低功耗广域网的代表主要有LORA和NB-IOT和TPUNB
    12
  • 2
    嵌入式开发常用的接口和通信协议
    14
  • 3
    hibernate二级缓存
    6
  • 4
    LoadRunner如何监控Linux系统资源
    6
  • 5
    如何入门做物联网系统压测？
    39
  • 6
    Linux设置PPPOE
    19
  • 7
    持续提升敏捷度，你需要实施Sitecore DevOps
    38
  • 8
    数据、AI涌现的年代，迭代数字平台，更需关注安全合规问题
    30
  • 9
    不惜血本、重金打造的数据平台为何效果平平？
    30
  • 10
    Ruby：软件外包开发的强大利器
    29

    • 相关产品

  • 物联网平台
    文档详情 产品详情

    • 相关课程

    更多
  • 基于STM32的端到端物联网全栈开发
  • 走进阿里云物联网
  • 阿里云物联网平台专题介绍
  • 物联网平台开发全栈教程
  • 物联网平台云上开发

    • 相关电子书

    更多
  • 美的物联平台的云上实践与应用--- 人机新世代战略下的智能化探索
  • 使用Link Develop 进行物联网一站式开发
  • 阿里云Link物联网平台全链路的一站式开发

    • 相关实验场景

    更多
  • 温控器设备接入IoT物联网平台与数据管理实践
  • 云原生AI套件：五分钟微调宝可梦风格StableDiffusion
  • 企业级云上网络构建
  • 使用物联网平台远程管理运维设备
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    阿里云oss简介和使用流程