物联网学习笔记——构建RESTFul平台1
0.前言
本例部分源代码——【HTML代码】
1.前端框架——Bootstrap
2.简单例子
- <!DOCTYPE html>
- <html>
- <head>
- <title>LED Remote Control Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
- </head>
- <body>
- <h1>LED Remote Control using REST API!</h1>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
- <!-- Include all compiled plugins (below), or include individual files as needed -->
- <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
- </body>
- </html>
【若干说明】
3.加个表格
【设计思路】
【HTML】
- <body>
- <div class="container">
- <div class="row">
- <div class="span12">
- <p class="lead">徐凯经验分享小站</p>
- </div>
- </div>
- <div class="row">
- <div class="span12">
- <table class="table table-hover">
- <thead>
- <tr>
- <th>编号 ID</th>
- <th>描述 DESC</th>
- <th>状态 STATUS</th>
- <th>动作 ACTION</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>RPi.PCF8574.IO0</td>
- <td>ON</td>
- <td>ACTION</td>
- </tr>
- <tr>
- <td>2</td>
- <td>RPi.PCF8574.IO1</td>
- <td>OFF</td>
- <td>ACTION</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="row">
- <div class="span12">
- <p class="text-right lead">如果有问题请邮件我,别客气</p>
- <p class="text-right lead">
- <em>Email:xukai19871105@126.com</em>
- </p>
- </div>
- </div>
- </div>
【几点说明】
4.按钮热身
【设计思路】
【HTML】
- <table class="table table-hover">
- <thead>
- <tr>
- <th>编号 ID</th>
- <th>描述 DESC</th>
- <th>状态 STATUS</th>
- <th>动作 ACTION</th>
- </tr>
- </thead>
- <tbody>
- <tr dev_id="1">
- <td>1</td>
- <td>RPi.PCF8574.IO0</td>
- <td >off</td>
- <td>
- <button type="button" class="btn btn-primary btn-xs">Toggle</button>
- </td>
- </tr>
- <tr dev_id="2">
- <td>2</td>
- <td>RPi.PCF8574.IO1</td>
- <td>off</td>
- <td>
- <button type="button" class="btn btn-primary btn-xs">Toggle</button>
- </td>
- </tr>
- </tbody>
- </table>
【几点说明】
5.按钮互动
【设计思路】
【javascript】
- <script>
- $(document).ready(function(){
- $('.btn').on("click",function(){
- // 获得 tr元素
- var trobj = $(this).parent().parent();
- // tr元素中包含 dev_id属性
- var dev_id = trobj.attr('dev_id');
- console.log( dev_id );
- // 访问该tr元素的所有子td元素
- var tdobj = $(trobj).children("td");
- var status_obj = $(tdobj).eq(2);
- var status_str = status_obj.text();
- console.log(status_str);
- if( status_str == "on"){
- status_obj.text("off");
- sendLedControl( dev_id , "off" );
- }else{
- status_obj.text("on");
- sendLedControl( dev_id , "on" );
- }
- });
- });
- </script>
【控制台查看效果】
【若干说明】
是一个完整的对象包含很多属性和方法。
【定位第2个td标签】var status_obj = $(tdobj).eq(2); eq(2)代表选择第2个(从0开始)td标签——对应status标签,var status_str = status_obj.text(); 取出当前内容并通过console.log打印。
6.PUT更新
【设计思路】
【代码实现】
- function sendLedControl( dev_id , cur_status ){
- $.ajax({
- url: '/api/leds/' + dev_id, // /api/leds/1
- async: true,
- dataType: 'json',
- type: 'PUT',
- data: JSON.stringify({status:cur_status}),
- success: function(data , textStatus){
- console.log("success");
- },
- error: function(jqXHR , textStatus , errorThrown){
- console.log("error");
- },
- });
- }
【执行结果】
【若干说明】
7.总结和源码
【HTML代码】
物联网学习笔记——构建RESTFul平台1的更多相关文章
- 物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus
物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...
- springmvc学习笔记(19)-RESTful支持
springmvc学习笔记(19)-RESTful支持 标签: springmvc springmvc学习笔记19-RESTful支持 概念 REST的样例 controller REST方法的前端控 ...
- Spring实战第五章学习笔记————构建Spring Web应用程序
Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...
- blfs(systemd版本)学习笔记-构建gnome桌面系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+gnome(桌面组件) 链接: lfs(systemd版本)学习笔记系列:http ...
- blfs(systemd版本)学习笔记-构建gnome桌面系统后的配置及安装的应用
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.构建安装ibus-libpinyin的笔记地址:https://www.cnblogs.com/renren-study-n ...
- .Net 初步学习笔记之一——.Net 平台与.Net FrameWork框架的关系
.Net 包含两部分 .Net平台 和.Net FrameWork 框架 1..Net FrameWork框架包含于.Net平台. .Net FrameWork提供环境和支撑保证.Net平台运行. 2 ...
- C# 学习笔记1 .NET平台,C#的重要概念
.NET平台构成的三个关键实体是: 1.CLR(公共语言运行库):为我们定位,加载,管理.NET类型,同时负责一些底层细节的工作,如内存管理,应用托管,处理线程,安全检查等,它包含了一个重要名为msc ...
- Android学习笔记-构建一个可复用的自定义BaseAdapter
转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html 作者:coder-pig 本节引言: 如题, ...
- Spark学习笔记——构建分类模型
Spark中常见的三种分类模型:线性模型.决策树和朴素贝叶斯模型. 线性模型,简单而且相对容易扩展到非常大的数据集:线性模型又可以分成:1.逻辑回归:2.线性支持向量机 决策树是一个强大的非线性技术, ...
随机推荐
- 树莓派Ubuntu Mate 16.04 修改为国内更新源
收藏:https://blog.csdn.net/wang_shuai_ww/article/details/80386708 更换步骤以root身份打开 /etc/apt/sources.list ...
- CentOS 7控制台屏幕分辨率问题
我们在服务器上,很少会安装图形化界面,一般都使用字符界面的控制台.CentOS 下,控制台分辨率缺省情况下,变得很高,导致在显示器上花屏或者只能显示局部. 这是由于使用了frame buffer,好处 ...
- WLC-生成CSR操作
1.生成CSR [req]req_extensions = v3_req[ v3_req ]# Extensions to add to a certificate requestbasicConst ...
- linux-命令行快捷方式使用
CTRL+P 命令向上翻滚 CTRL+N 命令向下翻滚 CTRL+U 命令行中删除光标前面的所有字符 CTRL+D 命令行中删除光标后面的一个字符 CTRL+H 命令行中删除光标前面的一个字符 CT ...
- C# Stream篇(—) -- Stream基类-----转载
C# Stream篇(—) -- Stream基类 写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者 ...
- HTTP协议中常用相应的状态码总结
HTTP协议与我们的生活息息相关,尤其对于我们后端开发人员,工作之余我整理了一些HTTP协议响应的一些常见的状态码,希望能帮助大家 HTTP状态码列表 消息(1字头)服务器收到请求,需要请求者继续执行 ...
- struts标签 解析html标签
参考:http://blog.csdn.net/shuangrenyu1234/article/details/24527745
- Java基础 -5.2
方法重载 当方法名称相同,参数的类型或者个数不同的时候 就会称为方法重载. public static void main(String[] args) { System.out.println(ad ...
- 线性表顺序存储_List
#include "stdafx.h" #include "stdio.h" #include "stdlib.h" #include &q ...
- 用Navicat连接阿里云ECS服务器上的MySQL数据库,连接不上,并且报10060错误
设置远程访问(使用root密码): grant all privileges on . to 'root' @'%' identified by '123456'; flush privileges; ...