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元素中等内容。
  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】

  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】

  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】

  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. var status_obj = $(tdobj).eq(2);
  12. var status_str = status_obj.text();
  13. console.log(status_str);
  14. if( status_str == "on"){
  15. status_obj.text("off");
  16. sendLedControl( dev_id , "off" );
  17. }else{
  18. status_obj.text("on");
  19. sendLedControl( dev_id , "on" );
  20. }
  21. });
  22. });
  23. </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"}    

【代码实现】

  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. success: function(data , textStatus){
  9. console.log("success");
  10. },
  11. error: function(jqXHR , textStatus , errorThrown){
  12. console.log("error");
  13. },
  14. });
  15. }

【执行结果】

    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代码】

物联网学习笔记——构建RESTFul平台1的更多相关文章

  1. 物联网学习笔记三：物联网网关协议比较：MQTT 和 Modbus

    物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...

  2. springmvc学习笔记(19)-RESTful支持

    springmvc学习笔记(19)-RESTful支持 标签: springmvc springmvc学习笔记19-RESTful支持 概念 REST的样例 controller REST方法的前端控 ...

  3. Spring实战第五章学习笔记————构建Spring Web应用程序

    Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...

  4. blfs（systemd版本）学习笔记-构建gnome桌面系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+gnome(桌面组件) 链接: lfs(systemd版本)学习笔记系列:http ...

  5. blfs（systemd版本）学习笔记-构建gnome桌面系统后的配置及安装的应用

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.构建安装ibus-libpinyin的笔记地址:https://www.cnblogs.com/renren-study-n ...

  6. .Net 初步学习笔记之一——.Net 平台与.Net FrameWork框架的关系

    .Net 包含两部分 .Net平台 和.Net FrameWork 框架 1..Net FrameWork框架包含于.Net平台. .Net FrameWork提供环境和支撑保证.Net平台运行. 2 ...

  7. C# 学习笔记1 .NET平台，C#的重要概念

    .NET平台构成的三个关键实体是: 1.CLR(公共语言运行库):为我们定位,加载,管理.NET类型,同时负责一些底层细节的工作,如内存管理,应用托管,处理线程,安全检查等,它包含了一个重要名为msc ...

  8. Android学习笔记-构建一个可复用的自定义BaseAdapter

    转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题, ...

  9. Spark学习笔记——构建分类模型

    Spark中常见的三种分类模型:线性模型.决策树和朴素贝叶斯模型. 线性模型,简单而且相对容易扩展到非常大的数据集:线性模型又可以分成:1.逻辑回归:2.线性支持向量机 决策树是一个强大的非线性技术, ...

随机推荐

  1. 洛谷P1006传纸条

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个 m 行 n 列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了. ...

  2. Codeforces Round #611 (Div. 3) E

    Oh, New Year. The time to gather all your friends and reflect on the heartwarming events of the past ...

  3. CSS shapes布局教程

    文章参考至 一.前言&索引 CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用. 兼容性如下图: 还是很不错的,移动端可用,内部中后台项目可用. CSS shapes布局 ...

  4. Windows下MySQL5.7版本中修改编码为utf-8

    我们新安装的MySQL数据库默认的字符是 latin1 ,所以每次新建数据库都要修改字符,非常麻烦.所以我们必须将它改成UTF8字符的. 修改方法如下: 一.修改MySQL的my.ini 首先在 \P ...

  5. centos无法启动之fstab

    你可能由于对磁盘管理,修改了/etc/fstab文件,进行自动挂载,但是卸载磁盘后,忘记修改/etc/fstab文件,导致了如下启动linux错误,开启进入紧急模式 error getting aut ...

  6. java 使用poi 导入Excel 数据到数据库

    由于我个人电脑装的Excel是2016版本的,所以这地方我使用了XSSF 方式导入 . 1先手要制定一个Excel 模板 把模板放入javaWeb工程的某一个目录下如图: 2模板建好了后,先实现模板下 ...

  7. [原]NTP时钟同步服务设置

    服务器列表 192.168.0.2 ntp服务端 192.168.0.3 ntp客户端 192.168.0.4 ntp客户端 192.168.0.5 ntp客户端 注:以下操作均以root操作 一.N ...

  8. python学习 —— 获取系统运行情况信息并在Linux下设置定时运行python脚本

    代码: # -*- coding:utf-8 -*- from psutil import * def cpu_usage_rate(): for i, j in zip(range(1, cpu_c ...

  9. 阿里大数据竞赛非官方指南第三弹-- LR入门

    最近忙着赶global comm的deadline无暇比赛,当有功夫回过头来看的时候发现比赛已经夹杂了很多非技术的因素在里面了,就连我这个本来是写博客拉粉丝的也有点小不爽.本着我的初心是写博客拉粉丝, ...

  10. 【网寻】IE F12 后报错，无法查看 DOM 等信息

    错误图片: 解决办法 : 安装Windows7补丁:KB3008923: 补丁下载地址: http://www.microsoft.com/en-us/download/details.aspx?id ...