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

陈明 当前离线 经验 352 窥视卡 雷达卡

陈明 ( 楼主 ) 2015-9-25 10:54:18  只看该作者 3894 | 3 倒序浏览

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

二、涉及技术

• 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方式！

1. tion="/cgi-bin/login.cgi" method="get" >
   

           

   用户登录

   
   

           Email address
   

           
   

           Password
   

           
   

           

   
   

            
   

                记住我
   

            
   

           

        登录

复制代码

传参图：
   
    来看下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.后续有时间，继续在这基础上完善吧。。。

沙发

陈明 发表于 2015-9-25 10:56:39

为啥我图片下面有本地地址？

板凳

栾新科 发表于 2015-9-25 11:16:27

项目不错，有一定的想法，就是过程能够在详细些就更好了

4#

陈明 发表于 2015-9-25 15:54:48

@forlinx 已修改，晚上回家再添加缺失图片