嵌入式web服務器BOA+CGI+HTML+MySQL項目實戰——Linux

時間 2019-11-08

標籤嵌入 web 服務器 boa+cgi+html+mysql boa cgi html mysql 項目實戰 linux 欄目 HTML 简体版

原文原文鏈接

準備環境
操做系統： Ubuntu12.04 LTS
環境搭建：須要 BOA，Apache，CCGI，MySQL，GCC
[Linux下嵌入式Web服務器BOA和CGI編程開發]
[數據庫的相關知識——學習筆記] 的三
[mysql中文亂碼問題解決 / C程序插入還是亂碼解決 / 卸載重裝教學]
擴展：我還用了[bootstrap]框架，CSS/JS
源碼連接：GitHub：[傳送門] ，碼雲：[傳送門]
使用方法
環境準備好後，咱們在 /var/www 下寫HTML文件
css

在 /var/www/cgi-bin 下寫c文件，編譯後命名爲.cgi。
編譯命令僅供參考html

gcc -o login.cgi login.c cgic.c -lpthread -ldl -lmysqlclient

程序都寫好後，咱們開始測試。mysql

一、開啓MySQL服務默認開啓
jquery

個人程序須要事先新建用戶test，數據庫register，表usergit

mysql -utest -ptest

// 建立新用戶test
mysql> create user 'test'@'localhost' identified by 'test';
// 給test用戶全部權限
mysql> grant all privileges on *.* to test@localhost identified by 'test';
// 刷新權限
mysql> flush privileges;

mysql> create database register;

mysql> use register;
mysql> CREATE TABLE user(username varchar(20) PRIMARY KEY,password varchar(20));

二、開啓BOA服務器，在/boa/src目錄下 github

sudo ./boa

三、打開瀏覽器，訪問localhost:端口號訪問的即 /var/www 目錄
我直接訪問 http://localhost:886/login.html 個人登陸頁面
sql

其餘頁面都是同理。數據庫

思路講解
編程

開啓boa服務器後，咱們訪問到咱們在 /var/www 下編寫的HTML文件，顯示咱們的登陸頁面。
咱們點擊「註冊」按鈕，跳轉到 register.html
bootstrap

點擊「註冊」按鈕，提交form表單信息給cgi-bin/register.cgi

cgi程序經過 cgiFormString函數試圖檢索發送給指定字段的字符串。存入變量中。咱們鏈接MySQL數據庫

將數據寫入register數據庫中的user表中（此數據庫和表須要先建好）

處理完畢後，跳回 login.html 登陸頁面

如今咱們輸入數據，點擊「登陸」，同理將表單發給 login.cgi ，對數據在MySQL數據庫中查詢後，成功就來到base_config.html 配置頁面。

而後咱們輸入相應數據，點擊「提交」，交給base_config.cgi處理，以後任意發揮就行了。

我是打印出來，寫入系統文件的代碼暫時註釋了，慎用

↑↑↑↑↑遇到問題能夠參考頁首的連接↑↑↑↑↑

相關源碼
login.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>register</title>
  6 <script src="js/jquery-2.2.3.min.js"></script>
  7 <script src="js/jquery-ui.min.js"></script>
  8 <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
  9 <link href="css/bootstrap.min.css" rel="stylesheet">
 10 <script src="js/bootstrap.min.js"></script>
 11 <link type="text/css" href="css/login.css" rel="stylesheet">
 12 <script src="js/my.js"></script>
 13 <SCRIPT language = "JavaScript">
 14     function checkUserName(){    //驗證用戶名
 15         var fname = document.myform.username.value;
 16         var reg=/^[0-9a-zA-Z]/;
 17         if(fname.length != 0){
 18             for(i=0;i<fname.length;i++){
 19                 if(!reg.test(fname)){
 20                     alert("只能輸入字母或數字");
 21                     return false;}
 22             }
 23             if(fname.length<4||fname.length>16){
 24                 alert("只能輸入4-16個字符")
 25                 return false;
 26             }
 27         }
 28         else{    alert("請輸入用戶名");
 29             document.myform.username.focus();
 30             return false     }
 31         return true;
 32     }
 33 
 34     function passCheck(){ //驗證密碼
 35         var userpass = document.myform.password.value;
 36         if(userpass == ""){
 37             alert("未輸入密碼 \n" + "請輸入密碼");
 38             document.myform.password.focus();
 39             return false;   }
 40         if(userpass.length < 6||userpass.length>12){
 41             alert("密碼必須在 6-12 個字符。\n");
 42             return false;   }
 43         return true;   }
 44 
 45     function passCheck2(){
 46         var p1=document.myform.password.value;
 47         var p2=document.myform.password2.value;
 48         if(p1!=p2){
 49             alert("確認密碼與密碼輸入不一致");
 50             return false;
 51         }else{
 52             return true;
 53         }
 54     }
 55 
 56     function checkEmail(){
 57         var Email = document.getElementById("email").value;
 58         var e = Email.indexOf("@"&&".");
 59         if(Email.length!=0){
 60             if(e>0){
 61                 if(Email.charAt(0)=="@"&&"."){
 62                     alert("符號@和符號.不能再郵件地址第一位");
 63                 return false;
 64                 }
 65                 else{
 66                     return true;
 67                 }
 68             }
 69             else{
 70                 alert("電子郵件格式不正確\n"+"必須包含@符號和.符號！");
 71                 return false;
 72             }
 73         }
 74         else{
 75             alert("請輸入電子郵件！")
 76             return false;
 77         }
 78     }
 79 
 80     function checkbirthday(){    //驗證用戶名
 81         var year = document.myform.birthday.value;
 82         if(year < 1949 || year > 2007){
 83             alert("年份範圍從1949-2007年");
 84             return false;}
 85         return true;     }
 86 
 87 
 88     function validateform(){
 89         if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
 90                 return true;
 91         else
 92             return false;
 93     }
 94 
 95     function clearText( ) {
 96         document.myform.user.value="" ;
 97         document.myform.password.value="" ;
 98     }
 99 
100     //顯示隱藏對應的switchPwd()方法:
101     $(function(){
102         // 經過jqurey修改
103         $("#passwordeye").click(function(){
104             let type =  $("#password").attr('type')
105             if(type === "password"){
106                 $("#password").attr("type","text");
107             }else{
108                 $("#password").attr("type","password");
109             }
110         });
111     });
112 
113 
114 </SCRIPT>
115 </head>
116 <body>
117 <img src="img/login_bg.jpg" class="bg">
118 <div id="head">
119     <img src="img/login_head.png" width=100% height=auto />
120 </div>
121 <div id="center">
122 <form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/login.cgi" method="post" >
123     <div class="input-group">
124         <h3>用戶名：</h3>&nbsp;<input class="form-control" id="username" name="username" type="text"  style="height:40px" value="" placeholder="只能輸入字母或數字，4-16個字符"/>
125     </div>
126     <div class="input-group">        
127         <h3>密&nbsp;&nbsp;&nbsp;碼：</h3>&nbsp;<input class="form-control" id="password" name="password" type="password" style="height:40px"  value="" placeholder="密碼長度6-12位"/>
128         <span class="input-group-btn">
129             <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
130         </span>
131     </div>
132 
133     <div id="btn">
134         <INPUT class="btn btn-primary" name="loginButton" type="submit" id="Button" value="登陸"  onclick="checkUserName()">
135         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
136         <a href="register.html"><INPUT class="btn btn-primary" name="registerButton" id="Button" type="button" value="註冊"></a>
137     </div>
138 </form>
139 </div>
140 <div id="bottom">
141     <div class="footer" style="color:white;">
142          Copyright &copy; 2013-2019 All Rights Reserved. 備案號：
143     </div>
144 </div>
145 </body>
146 </html>

對應 login.c

register.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>register</title>
  6 <script src="js/jquery-2.2.3.min.js"></script>
  7 <script src="js/jquery-ui.min.js"></script>
  8 <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
  9 <link type="text/css" href="css/register.css" rel="stylesheet">
 10 <link href="css/bootstrap.min.css" rel="stylesheet">
 11 <script src="js/bootstrap.min.js"></script>
 12 <script src="js/my.js"></script>
 13 <SCRIPT language = "JavaScript">
 14     function checkUserName(){    //驗證用戶名
 15         var fname = document.myform.username.value;
 16         var reg=/^[0-9a-zA-Z]/;
 17         if(fname.length != 0){
 18             for(i=0;i<fname.length;i++){
 19                 if(!reg.test(fname)){
 20                     alert("只能輸入字母或數字");
 21                     return false;}
 22             }
 23             if(fname.length<4||fname.length>16){
 24                 alert("只能輸入4-16個字符")
 25                 return false;
 26             }
 27         }
 28         else{    alert("請輸入用戶名");
 29             document.myform.username.focus();
 30             return false     }
 31         return true;
 32     }
 33 
 34     function passCheck(){ //驗證密碼
 35         var userpass = document.myform.password.value;
 36         if(userpass == ""){
 37             alert("未輸入密碼 \n" + "請輸入密碼");
 38             document.myform.password.focus();
 39             return false;   }
 40         if(userpass.length < 6||userpass.length>12){
 41             alert("密碼必須在 6-12 個字符。\n");
 42             return false;   }
 43         return true;   }
 44 
 45     function passCheck2(){
 46         var p1=document.myform.password.value;
 47         var p2=document.myform.password2.value;
 48         if(p1!=p2){
 49             alert("確認密碼與密碼輸入不一致");
 50             return false;
 51         }else{
 52             return true;
 53         }
 54     }
 55 
 56     function checkEmail(){
 57         var Email = document.getElementById("email").value;
 58         var e = Email.indexOf("@"&&".");
 59         if(Email.length!=0){
 60             if(e>0){
 61                 if(Email.charAt(0)=="@"&&"."){
 62                     alert("符號@和符號.不能再郵件地址第一位");
 63                 return false;
 64                 }
 65                 else{
 66                     return true;
 67                 }
 68             }
 69             else{
 70                 alert("電子郵件格式不正確\n"+"必須包含@符號和.符號！");
 71                 return false;
 72             }
 73         }
 74         else{
 75             alert("請輸入電子郵件！")
 76             return false;
 77         }
 78     }
 79 
 80     function checkbirthday(){    //驗證用戶名
 81         var year = document.myform.birthday.value;
 82         if(year < 1949 || year > 2007){
 83             alert("年份範圍從1949-2007年");
 84             return false;}
 85         return true;     }
 86 
 87 
 88     function validateform(){
 89         if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
 90                 return true;
 91         else
 92             return false;
 93     }
 94 
 95     function clearText( ) {
 96         document.myform.user.value="" ;
 97         document.myform.password.value="" ;
 98     }
 99 
100     //顯示隱藏對應的switchPwd()方法:
101     $(function(){
102         // 經過jqurey修改
103         $("#passwordeye").click(function(){
104             let type =  $("#password").attr('type')
105             if(type === "password"){
106                 $("#password").attr("type","text");
107             }else{
108                 $("#password").attr("type","password");
109             }
110         });
111         $("#passwordeye2").click(function(){
112             let type =  $("#password2").attr('type')
113             if(type === "password"){
114                 $("#password2").attr("type","text");
115             }else{
116                 $("#password2").attr("type","password");
117             }
118         });
119     });
120 
121 </SCRIPT>
122 </head>
123 <body>
124 <img src="img/login_bg.jpg" class="bg">
125 <div id="head">
126     <img src="img/register_head.png" width=100% height=auto />
127 </div>
128 <div id="center">
129 <form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/register.cgi" method="post" >
130     <div class="input-group">
131         <h3>用&nbsp;&nbsp;戶&nbsp;&nbsp;名：</h3><input class="form-control"  id="username" name="username" type="text"  style="height:40px" value=""  placeholder="只能輸入字母或數字，4-16個字符"/>
132     </div>        
133     <div class="input-group">
134         <h3>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼：</h3><input class="form-control"  id="password" name="password" type="password" style="height:40px" value=""  placeholder="密碼長度6-12位"/>
135         <span class="input-group-btn">
136             <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
137         </span>
138     </div>
139     <div class="input-group">
140         <h3>確認密碼：</h3><input class="form-control"  id="password2" name="password2" type="password" style="height:40px" value=""/>
141         <span class="input-group-btn">
142             <INPUT class="btn btn-default" id="passwordeye2" type="button" value="show/hide"">
143         </span>
144     </div>     
145     <div id="btn">
146         <INPUT name="registerButton"  class="btn btn-primary" type="submit" id="Button" value="註冊"  onclick="checkUserName()">
147         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
148         <a href="login.html"><INPUT  class="btn btn-primary" name="loginButton" id="Button" type="button" value="登陸"></a>
149     </div>
150 </form>
151 </div>
152 <div id="bottom">
153     <div class="footer" style="color:white;">
154          Copyright &copy; 2013-2019 All Rights Reserved. 備案號：
155     </div>
156 </div>
157 </body>
158 </html>

對應的 register.c

#include <stdio.h>
#include "cgic.h"
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <mysql/mysql.h>
#include <stdbool.h>

#define SQL_SIZE 256 

int cgiMain(void)
{
    char username[20];
    char password[20];
    char email[40];
    //回顯信息到HTML網頁cgiHeaderContentType("text/html");
    printf("<html>\n\n");
    printf("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n\n");
    printf("<p>\n\n");
    
    if(cgiFormString("username", username, sizeof(username)) != cgiFormSuccess)
    {
        fprintf(stderr, "cgiFormString function username failed");
        //exit(-1);
    }
    printf("用戶名:%s\n\n",username);
    printf("<br>\n\n");
    // password gateway server_ip dns subnet_mask dhcp error
    if(cgiFormString("password", password, sizeof(password)) != cgiFormSuccess)
    {
        fprintf(stderr, "cgiFormString function password failed");
        //exit(-1);
    }
    printf("密碼:%s\n\n",password);
    printf("<br>\n\n");
/*
    if(cgiFormString("email", email, sizeof(email)) != cgiFormSuccess)
    {
        fprintf(stderr, "cgiFormString function email failed");
        //exit(-1);
    }
    printf("電子郵箱:%s\n\n",phone);
    printf("<br>\n\n");
*/

    /***  將用戶信息寫入MySQL數據庫中  ***/ 
    //數據存儲到數據庫
    MYSQL* conn;
    bool isAutoCommit;
    
    // 初始化 MySQL
    conn = mysql_init(NULL);
    if(NULL == conn)
    {
        printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
        exit(-1);
    }
    
    char ip[16] = "127.0.0.1";
    char user[20] = "test";
    char passwd[20] = "test";
    char database[20] = "register";
    int port = 3306;

    // 嘗試與運行在主機上的MySQL數據庫引擎創建鏈接
    if(NULL == mysql_real_connect(conn,ip,user,passwd,database,port,NULL,0))
    {
        printf("---errno:%d error:%s\n\n",mysql_errno(conn),mysql_error(conn));
        exit(-1);
    }
    
    isAutoCommit = true;
    // 根據mysql的autocommit參數設置來決定是否自動提交
    mysql_autocommit(conn,isAutoCommit);

    // 設定數據庫編碼
    mysql_query(conn,"SET NAMES 'utf8'");
    mysql_query(conn,"SET CHARACTER SET utf8");
    mysql_query(conn,"SET CHARACTER_SET_RESULT = utf8");

    char cmd[SQL_SIZE];
    // 置字節字符串cmd的前SQL_SIZE個字節爲零且包括‘\0’
    bzero(cmd, SQL_SIZE);
    // 建立user表
    // strcpy(cmd, "CREATE TABLE user(username varchar(20) PRIMARY KEY,password varchar(20));");

    // 將sql語句寫入cmd變量
    sprintf(cmd, "INSERT INTO user values('%s', '%s');",username,password);

    printf("%s\n\n",cmd);

    // 向與指定的鏈接標識符關聯的服務器中的當前活動數據庫發送一條查詢
    if(mysql_query(conn,cmd) != 0)
    {
        printf("errno:%d error:%s\n\n",mysql_errno(conn),mysql_error(conn));
        printf("<p>註冊失敗，請從新註冊</p>\n\n");    
        sleep(1);
        printf("<meta http-equiv=Refresh content=1;URL=../register.html>\n");       
    }
    //mysql_affected_rows(conn);

    printf("<p>註冊成功</p>\n\n");    
    printf("<br>\n\n");
    printf("<p>您的用戶名和密碼爲：</p>\n\n");    
    
    sprintf(cmd,"select * from user;");

    MYSQL_RES *res;
    MYSQL_ROW row;
    
    if(mysql_query(conn,cmd) != 0)
    {
        printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
        return -1;
    }
    
    int num_fields = mysql_field_count(conn);
    if(num_fields == 0)
    {
        printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
        return -1;    
    }
    
    res = mysql_store_result(conn);
    if(NULL == res)
    {
        printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
        return -1;
    }
    
    printf("<br>\n\n");
    printf("<br>\n\n");
    while((row = mysql_fetch_row(res)))
    {
        char arr[1000];
        int i = 0;
        for( ; i<num_fields; i++)
        {
            printf("%s ",row[i]);
        }
        printf("\n\n");
        printf("<br>\n\n");
    }
    
    mysql_free_result(res);

    sleep(1);

    printf("<meta http-equiv=Refresh content=1;URL=../login.html>\n");   

    return 0;
}