在线问答
直播中

陈明

11年用户 352经验值
擅长:可编程逻辑 嵌入式技术 处理器/DSP 接口/总线/驱动 控制/MCU RF/无线
私信 关注

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

本帖最后由 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地址。即可看到如下登录界面：

    1.jpg

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

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

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

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

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

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

四、代码分析

        1.登录界面分析

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

  •         
  • 传参图：
        QQ截图20150925190815.jpg
        来看下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交互来实现的。可自行查询代码。

    五、网页在手机与平板中的效果图：
       手机        IMG_0806.PNG IMG_0807.PNG
       平板
        D9743CFE-59BB-49C6-9721-EA4F578562E3.PNG


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

        2.原本计划是基于APP的智能家居的，由于已是上班族还未有足够时间学习APP开发。
        3.后续有时间，继续在这基础上完善吧。。。










    回帖（3）

    陈明

    2015-9-25 10:56:39
    为啥我图片下面有本地地址？
    举报

    栾新科

    2015-9-25 11:16:27
    项目不错，有一定的想法，就是过程能够在详细些就更好了
    举报

    陈明

    2015-9-25 15:54:48
    @forlinx 已修改，晚上回家再添加缺失图片
    举报

    更多回帖

    3 0 0

    相关帖子

    发帖
    登录/注册
    电子发烧友APP
    |投诉反馈|电子发烧友网
    © 2021 bbs.elecfans.com
    湘ICP备2023018690号
    ×
    20
    完善资料，
    赚取积分