记录设备接入阿里云的过程

七，网页控制开关灯

有了前面文章积累的代码，通过网页开关灯就比较好实现了，无非是写个网页发送请求，话不多说开干。

1，前端页面

因为没怎么学过前端之前的网页都太low了-_-! 于是这次决定搞个稍微美观一点的！！！（虽然最后结果是还是很难看‘(*>﹏<*)′ ）

网上搜了个按钮的素材

有了开关下面就是点开关的时候执行的功能了，本来想着直接写个按钮点击事件直接执行后端代码，后来发现这样不可行因为页面会跳转，怎样在不刷新全部页面的情况下刷新页面部分内容呢？当然是ajax技术了，所以现在的逻辑就变成了通过ajax发送开关指令到后端页面并刷新按键状态，我对js这东西不太懂，基本都是边百度边写的，所以代码可能写的比较渣。

代码如下：

	<div class="text">
		开关灯
	</div>
	<!-- 按钮 -->
	<form class="wrap5" a="off" >
		<span type="submit" name="deng"  data-value="开灯指令的base64编码" id="aa">ON</span>
		<span type="submit" name="deng"  data-value="关灯指令的base64编码" id="bb">OFF</span>
		<div></div>
	</form>
	
	<script src="LED/js/jquery.js"></script>
	<script>
		
		var df;
		var boolean = true;
		$(".wrap5").mousedown(function(event) {
			if ($(".wrap5").attr("a") == "off") {
				$(".wrap5 div").stop().animate({
					"left" : "98px"
				},400),
				$(".wrap5").attr("a","on")
				df = $("#aa").attr("data-value");
			}else {
				$(".wrap5 div").stop().animate({
					"left" : "2px"
				},400),
				$(".wrap5").attr("a","off")
				df = $("#bb").attr("data-value");
			}
		});   
 $('form').click(function() {

   $.ajax(
     {
      url: '/aliyun/INIT.php',//根据自己路径修改
      method: 'get',
      data: {'df':df},          
     });
         });
   
 </script>

2，后端

后端就比较好实现了，就是获取前端请求的指令把指令发送到阿里云。

前端用的get请求所以后端直接获取参数就行了，代码很少无非就是之前发送的固定的base64字符串变成get请求的变量罢了

3，测试

先把我们的设备上线，然后浏览器打开刚刚写好的前端页面，成功的实现了开关灯操作

4，后记

1.     虽然能开关灯了但是一打开页面默认是开灯，要先点off才能on，比较差劲，研究了半天api也没搞明白怎么查询设备状态，还需努力。
2.     只能控制一个设备，这个应该好解决，多传几个参数就行，但是怎么用一个页面区分不同设备没想出来Q_Q 大佬们能给个思路不 (๑´ڡ`๑)
3.     革命尚未成功，同志仍需努力