前端学习1——Bootstrap jquery ajax_H5之家 - 中国HTML5教程资源分享第一站

0.前言

前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。但是由于没有WEB前端，所以只能使用cURL工具或直接修改数据库的方式改变LED状态，体验非常差。

REST API入门体验可参考

【 PHP再学习4—— slim框架学习和使用】

【 PHP再学习5——RESTFul框架远程控制LED 】

受到【开源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元素中等内容。

<!DOCTYPE html> <html> <head> <title>LED Remote Control Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href=""> </head> <body> <h1>LED Remote Control using REST API!</h1>  <script src=""></script>  <script src=""></script> </body> </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】

<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>

图2 加入表格后的效果

【几点说明】

【container】 <div class="container"> container可理解为一个容器，该容器包裹了页面上的所有内容。