air202luat二次开发设备接入阿里云(七)

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

七,网页控制开关灯

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

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.     革命尚未成功,同志仍需努力

上次更新 2021-01-28