【OK210试用体验】智能生活系统----第一阶段项目提交 - 在线问答 - 电子技术论坛 - 最好最受欢迎电子论坛!

电子发烧友官网论坛在线研讨会活动客服QQ:3144539146
开启辅助访问 收藏本站切换到宽版

电子技术论坛»论坛 › 在线问答

【OK210试用体验】智能生活系统----第一阶段项目提交

陈明 ( 楼主 ) 2015-9-25 10:54:18  只看该作者 倒序浏览
本帖最后由 wwwming0329 于 2015-9-25 19:29 编辑

一、项目简介
        该项目实现了以网页方式控制设备以及查询相关信息的一个雏形。

二、涉及技术
  • HTML5，CSS：项目采用Bootstrap3前端框架来搭建网页界面。Bootstrap是一款目前很受欢迎的前端框架，基于 HTML、CSS、JAVASCRIPT 的。使用Bootstrap制作的网页兼容性不错，可以很方便的在PC，手机，平板上打开。
  • CGI：通用网关接口。CGI是外部应用程序与web服务器之间的接口标准。
  • boa服务器：OK210上跑的是boa服务器。使用boa来提供网页浏览支持。
  • sqlite3数据库：是一款轻量级数据库。在嵌入式领域使用很广。
  • 设备驱动：Linux设备驱动的编写与使用
  • git:很流行的版本控制软件。

三、项目概览
    1.项目托管地址：https://github.com/undersky/ITO_Demo

        Linux下使用：git clone https://github.com/undersky/ITO_Demo.git  即可将代码clone到本地


    2.将项目中的www文件夹下的所有文件拷贝到OK210上的BOA服务器根目录下。



    3.浏览器地址栏输入OK210的IP地址。即可看到如下登录界面：

   

    默认用户名为：www@qq.com 密码为：123456

   2.输入用户名与密码后，点击登录按钮。login.cgi会根据传入的用户名与密码与user.db中 的用户名与密码做比较。一致则转到main.html。如下：
   

    main.html默认是LED控制功能，可以控制OK210开发板上四个LED灯。

   3.点击main.html左侧栏的温湿度，打开温湿度显示网页。
   

    该界面打开时，会显示OK210上的DS18B20温度。由于板上没有湿度传感器，所以这里的湿度是假数据。

    4.点击右侧报警记录，此界面展示了record.db中保存的报警信息。之所以报警信息是英文，是因为我的Ubuntu上没有安装中文输入法！！！
   

四、代码分析

        1.登录界面分析

        index.html最重要的一个表单，使用的是get方式传参给login.cgi！So，由于是get的方式你可以在地址栏上可以看到明文的用户名与密码！！！这对理解CGI有帮助，但实际开发中还是得用post方式！

  •         
  • 复制代码
    传参图：
       
        来看下login.cgi中有些什么，首先cgi文件的源码都在cgi_source文件夹中。CGI处理使用了CGIC函数库。
    看下login.c:
        首先获取网页传过来的用户名与密码，使用cgiFormStringNoNewlines函数来获取传过来的表单内容。
    1. //获取用户名
    2. void getUsername() {
    3. //        char username[81];
    4.         memset(username,0,sizeof(username));
    5.         cgiFormStringNoNewlines("inputEmail", username, MAX_LEN);
    6.         fprintf(cgiOut, "username:%sn ",username);
    7. }
    复制代码
    1. //获取登陆密码
    2. void getPasswd() {
    3. //        char passwd[81];
    4.     memset(passwd,0,sizeof(passwd));
    5.         cgiFormStringNoNewlines("inputPassword", passwd, MAX_LEN);
    6.         fprintf(cgiOut, "passwd:%sn ",passwd);
    7. }
    复制代码
    获取到用户名与密码后，与数据库中的用户名与密码做个比较。
        打开user.db，重要是这两句代码：要了解sql语句的使用。
            sprintf(sql,"select passwd from users where email='%s'",username);
            ret = sqlite3_get_table(db,sql,&dbresult,&nrow,&ncolumn,&errmsg);


       
    1. int check_user(char *name ,char *password)
    2. {
    3.         sqlite3 *db = NULL;
    4.         char *errmsg = NULL;
    5.         char sql[256];
    6.         int ret = 0;
    7.         char **dbresult;
    8.         int nrow;
    9.         int ncolumn;
    10. #ifdef DEBUG
    11.         int index;
    12.         int i ,j;
    13. #endif
    14.         ret = sqlite3_open("../db/user.db",&db);
    15.         if(ret != SQLITE_OK)
    16.         {
    17.                 perror("fail to open user.db:n");
    18.                 return -2;
    19.         }
    20.         memset(sql,0,256);
    21.         sprintf(sql,"select passwd from users where email='%s'",username);
    22.         ret = sqlite3_get_table(db,sql,&dbresult,&nrow,&ncolumn,&errmsg);
    23.         if(ret != SQLITE_OK)
    24.         {
    25.                 perror("fail to exec:");
    26.                 return -3;
    27.         }
    28.         if(ncolumn != 0)
    29.         {
    30. #ifdef DEBUG
    31.                 fprintf(cgiOut, "nrow %d ncolumn %dn",nrow,ncolumn);
    32.                 index = ncolumn;
    33.                 for(i = 0;i
    34.                 {
    35.                         for(j = 0;j < ncolumn; j++)
    36.                         {
    37.                         fprintf(cgiOut,"name %s value %sn",dbresult[i],(dbresult[index]));
    38.                                 ++ index;
    39.                         }
    40.                         printf("****************n");
    41.                 }
    42. #endif
    43.                 if(strcmp(dbresult[ncolumn*nrow],password) == 0)
    44.                 {
    45.                         ret = 0;
    46.                         goto end;
    47.                 }
    48.                 else
    49.                 {
    50.                         ret = 1;
    51.                         goto end;
    52.                 }
    53.         }        
    54.         else
    55.         {
    56.                 ret = -1;
    57.                 goto end;
    58.         }
    59. end:
    60.         sqlite3_close(db);
    61.         return ret;
    62. }
    复制代码

     2.其余界面与登录界面类似，都是通过表单（form）与cgi交互来实现的。可自行查询代码。

    五、网页在手机与平板中的效果图：
       手机       
       平板
       


       六、总结：
        1.对前端技术不熟，网页很粗糙，还有很多不完善的地方。

        2.原本计划是基于APP的智能家居的，由于已是上班族还未有足够时间学习APP开发。
        3.后续有时间，继续在这基础上完善吧。。。
    【新技能】那些你不知道的红外热像“隐形”功能
    回复 赞

    举报 使用道具

    3个回复
    沙发
    陈明 发表于 2015-9-25 10:56:39
    为啥我图片下面有本地地址？
    专业SMT贴片焊接，首次下单立减100元，华强集团旗下大厂，日式标准！
    回复 赞 支持 反对

    举报 使用道具

    板凳
    栾新科 发表于 2015-9-25 11:16:27
    项目不错，有一定的想法，就是过程能够在详细些就更好了
    回复 赞 支持 反对

    举报 使用道具

    4#
    陈明 发表于 2015-9-25 15:54:48
    @forlinx 已修改，晚上回家再添加缺失图片
    【新技能】那些你不知道的红外热像“隐形”功能
    回复 赞 支持 反对

    举报 使用道具

    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    相关帖子


    关闭

    站长推荐上一条 /6 下一条

    小黑屋|手机版|Archiver|电子发烧友 ( 湘ICP备2023018690号 )

    GMT+8, 2024-11-23 15:58 , Processed in 0.678153 second(s), Total 53, Slave 37 queries .

    Powered by 电子发烧友网

    © 2015 bbs.elecfans.com

    微信扫描
    快速回复 返回顶部 返回列表