准备环境
操作系统: Ubuntu12.04 LTS
环境搭建: 需要 BOA,Apache,CCGI,MySQL,GCC
[Linux下嵌入式Web服务器BOA和CGI编程开发]
[数据库的相关知识——学习笔记] 的三
[mysql中文乱码问题解决 / C程序插入仍是乱码解决 / 卸载重装教学]
扩展: 我还用了[bootstrap]框架,CSS/JS
源码链接:GitHub:[传送门] , 码云:[传送门]
使用方法
环境准备好后,我们在 /var/www 下写HTML文件

在 /var/www/cgi-bin 下写c文件,编译后命名为.cgi。
编译命令仅供参考

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

程序都写好后,我们开始测试。

1、开启MySQL服务 默认开启

我的程序需要事先 新建用户test,数据库register,表user

  1. mysql -utest -ptest
  1. // 创建新用户test
  2. mysql> create user 'test'@'localhost' identified by 'test';
  3. // 给test用户所有权限
  4. mysql> grant all privileges on *.* to test@localhost identified by 'test';
  5. // 刷新权限
  6. mysql> flush privileges;
  1. mysql> create database register;
  1. mysql> use register;
  2. mysql> CREATE TABLE user(username varchar(20) PRIMARY KEY,password varchar(20));

2、开启BOA服务器,在/boa/src目录下

  1. sudo ./boa

3、打开浏览器,访问localhost:端口号 访问的即 /var/www 目录
我直接访问 http://localhost:886/login.html 我的登录页面

其他页面都是同理。

思路讲解

开启boa服务器后,我们访问到我们在 /var/www 下编写的HTML文件,显示我们的登录页面。
我们点击“注册”按钮,跳转到 register.html

点击“注册”按钮,提交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. function validateform(){
  88. if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
  89. return true;
  90. else
  91. return false;
  92. }
  93.  
  94. function clearText( ) {
  95. document.myform.user.value="" ;
  96. document.myform.password.value="" ;
  97. }
  98.  
  99. //显示隐藏对应的switchPwd()方法:
  100. $(function(){
  101. // 通过jqurey修改
  102. $("#passwordeye").click(function(){
  103. let type = $("#password").attr('type')
  104. if(type === "password"){
  105. $("#password").attr("type","text");
  106. }else{
  107. $("#password").attr("type","password");
  108. }
  109. });
  110. });
  111.  
  112. </SCRIPT>
  113. </head>
  114. <body>
  115. <img src="img/login_bg.jpg" class="bg">
  116. <div id="head">
  117. <img src="img/login_head.png" width=100% height=auto />
  118. </div>
  119. <div id="center">
  120. <form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/login.cgi" method="post" >
  121. <div class="input-group">
  122. <h3>用户名:</h3>&nbsp;<input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字,4-16个字符"/>
  123. </div>
  124. <div class="input-group">
  125. <h3>密&nbsp;&nbsp;&nbsp;码:</h3>&nbsp;<input class="form-control" id="password" name="password" type="password" style="height:40px" value="" placeholder="密码长度6-12位"/>
  126. <span class="input-group-btn">
  127. <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
  128. </span>
  129. </div>
  130.  
  131. <div id="btn">
  132. <INPUT class="btn btn-primary" name="loginButton" type="submit" id="Button" value="登录" onclick="checkUserName()">
  133. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  134. <a href="register.html"><INPUT class="btn btn-primary" name="registerButton" id="Button" type="button" value="注册"></a>
  135. </div>
  136. </form>
  137. </div>
  138. <div id="bottom">
  139. <div class="footer" style="color:white;">
  140. Copyright &copy; 2013-2019 All Rights Reserved. 备案号:
  141. </div>
  142. </div>
  143. </body>
  144. </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. function validateform(){
  88. if(checkUserName()&&passCheck( )&&passCheck2()&&checkEmail()&&checkbirthday())
  89. return true;
  90. else
  91. return false;
  92. }
  93.  
  94. function clearText( ) {
  95. document.myform.user.value="" ;
  96. document.myform.password.value="" ;
  97. }
  98.  
  99. //显示隐藏对应的switchPwd()方法:
  100. $(function(){
  101. // 通过jqurey修改
  102. $("#passwordeye").click(function(){
  103. let type = $("#password").attr('type')
  104. if(type === "password"){
  105. $("#password").attr("type","text");
  106. }else{
  107. $("#password").attr("type","password");
  108. }
  109. });
  110. $("#passwordeye2").click(function(){
  111. let type = $("#password2").attr('type')
  112. if(type === "password"){
  113. $("#password2").attr("type","text");
  114. }else{
  115. $("#password2").attr("type","password");
  116. }
  117. });
  118. });
  119.  
  120. </SCRIPT>
  121. </head>
  122. <body>
  123. <img src="img/login_bg.jpg" class="bg">
  124. <div id="head">
  125. <img src="img/register_head.png" width=100% height=auto />
  126. </div>
  127. <div id="center">
  128. <form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/register.cgi" method="post" >
  129. <div class="input-group">
  130. <h3>用&nbsp;&nbsp;户&nbsp;&nbsp;名:</h3><input class="form-control" id="username" name="username" type="text" style="height:40px" value="" placeholder="只能输入字母或数字,4-16个字符"/>
  131. </div>
  132. <div class="input-group">
  133. <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位"/>
  134. <span class="input-group-btn">
  135. <INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
  136. </span>
  137. </div>
  138. <div class="input-group">
  139. <h3>确认密码:</h3><input class="form-control" id="password2" name="password2" type="password" style="height:40px" value=""/>
  140. <span class="input-group-btn">
  141. <INPUT class="btn btn-default" id="passwordeye2" type="button" value="show/hide"">
  142. </span>
  143. </div>
  144. <div id="btn">
  145. <INPUT name="registerButton" class="btn btn-primary" type="submit" id="Button" value="注册" onclick="checkUserName()">
  146. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  147. <a href="login.html"><INPUT class="btn btn-primary" name="loginButton" id="Button" type="button" value="登录"></a>
  148. </div>
  149. </form>
  150. </div>
  151. <div id="bottom">
  152. <div class="footer" style="color:white;">
  153. Copyright &copy; 2013-2019 All Rights Reserved. 备案号:
  154. </div>
  155. </div>
  156. </body>
  157. </html>

对应的 register.c

  1. #include <stdio.h>
  2. #include "cgic.h"
  3. #include <string.h>
  4. #include <stdlib.h>
  5. #include <unistd.h>
  6. #include <sys/types.h>
  7. #include <sys/stat.h>
  8. #include <fcntl.h>
  9. #include <mysql/mysql.h>
  10. #include <stdbool.h>
  11.  
  12. #define SQL_SIZE 256
  13.  
  14. int cgiMain(void)
  15. {
  16. char username[];
  17. char password[];
  18. char email[];
  19. //回显信息到HTML网页cgiHeaderContentType("text/html");
  20. printf("<html>\n\n");
  21. printf("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n\n");
  22. printf("<p>\n\n");
  23.  
  24. if(cgiFormString("username", username, sizeof(username)) != cgiFormSuccess)
  25. {
  26. fprintf(stderr, "cgiFormString function username failed");
  27. //exit(-1);
  28. }
  29. printf("用户名:%s\n\n",username);
  30. printf("<br>\n\n");
  31. // password gateway server_ip dns subnet_mask dhcp error
  32. if(cgiFormString("password", password, sizeof(password)) != cgiFormSuccess)
  33. {
  34. fprintf(stderr, "cgiFormString function password failed");
  35. //exit(-1);
  36. }
  37. printf("密码:%s\n\n",password);
  38. printf("<br>\n\n");
  39. /*
  40. if(cgiFormString("email", email, sizeof(email)) != cgiFormSuccess)
  41. {
  42. fprintf(stderr, "cgiFormString function email failed");
  43. //exit(-1);
  44. }
  45. printf("电子邮箱:%s\n\n",phone);
  46. printf("<br>\n\n");
  47. */
  48.  
  49. /*** 将用户信息写入MySQL数据库中 ***/
  50. //数据存储到数据库
  51. MYSQL* conn;
  52. bool isAutoCommit;
  53.  
  54. // 初始化 MySQL
  55. conn = mysql_init(NULL);
  56. if(NULL == conn)
  57. {
  58. printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
  59. exit(-);
  60. }
  61.  
  62. char ip[] = "127.0.0.1";
  63. char user[] = "test";
  64. char passwd[] = "test";
  65. char database[] = "register";
  66. int port = ;
  67.  
  68. // 尝试与运行在主机上的MySQL数据库引擎建立连接
  69. if(NULL == mysql_real_connect(conn,ip,user,passwd,database,port,NULL,))
  70. {
  71. printf("---errno:%d error:%s\n\n",mysql_errno(conn),mysql_error(conn));
  72. exit(-);
  73. }
  74.  
  75. isAutoCommit = true;
  76. // 根据mysql的autocommit参数设置来决定是否自动提交
  77. mysql_autocommit(conn,isAutoCommit);
  78.  
  79. // 设定数据库编码
  80. mysql_query(conn,"SET NAMES 'utf8'");
  81. mysql_query(conn,"SET CHARACTER SET utf8");
  82. mysql_query(conn,"SET CHARACTER_SET_RESULT = utf8");
  83.  
  84. char cmd[SQL_SIZE];
  85. // 置字节字符串cmd的前SQL_SIZE个字节为零且包括‘\0’
  86. bzero(cmd, SQL_SIZE);
  87. // 创建user表
  88. // strcpy(cmd, "CREATE TABLE user(username varchar(20) PRIMARY KEY,password varchar(20));");
  89.  
  90. // 将sql语句写入cmd变量
  91. sprintf(cmd, "INSERT INTO user values('%s', '%s');",username,password);
  92.  
  93. printf("%s\n\n",cmd);
  94.  
  95. // 向与指定的连接标识符关联的服务器中的当前活动数据库发送一条查询
  96. if(mysql_query(conn,cmd) != )
  97. {
  98. printf("errno:%d error:%s\n\n",mysql_errno(conn),mysql_error(conn));
  99. printf("<p>注册失败,请重新注册</p>\n\n");
  100. sleep();
  101. printf("<meta http-equiv=Refresh content=1;URL=../register.html>\n");
  102. }
  103. //mysql_affected_rows(conn);
  104.  
  105. printf("<p>注册成功</p>\n\n");
  106. printf("<br>\n\n");
  107. printf("<p>您的用户名和密码为:</p>\n\n");
  108.  
  109. sprintf(cmd,"select * from user;");
  110.  
  111. MYSQL_RES *res;
  112. MYSQL_ROW row;
  113.  
  114. if(mysql_query(conn,cmd) != )
  115. {
  116. printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
  117. return -;
  118. }
  119.  
  120. int num_fields = mysql_field_count(conn);
  121. if(num_fields == )
  122. {
  123. printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
  124. return -;
  125. }
  126.  
  127. res = mysql_store_result(conn);
  128. if(NULL == res)
  129. {
  130. printf("errno:%d error:%s\n",mysql_errno(conn),mysql_error(conn));
  131. return -;
  132. }
  133.  
  134. printf("<br>\n\n");
  135. printf("<br>\n\n");
  136. while((row = mysql_fetch_row(res)))
  137. {
  138. char arr[];
  139. int i = ;
  140. for( ; i<num_fields; i++)
  141. {
  142. printf("%s ",row[i]);
  143. }
  144. printf("\n\n");
  145. printf("<br>\n\n");
  146. }
  147.  
  148. mysql_free_result(res);
  149.  
  150. sleep();
  151.  
  152. printf("<meta http-equiv=Refresh content=1;URL=../login.html>\n");
  153.  
  154. return ;
  155. }

其余参考[GitHub] 或[码云]

嵌入式web服务器BOA+CGI+HTML+MySQL项目实战——Linux的更多相关文章

  1. 嵌入式web服务器BOA的移植及应用

    嵌入式web服务器子系统 一.嵌入式web服务器的控制流程 如下图所示,嵌入式web服务器可实现通过网络远程控制嵌入式开发板,便捷实用. 控制流程:浏览器 --->>>嵌入式开发板 ...

  2. Linux下嵌入式Web服务器BOA和CGI编程开发

    **目录**一.环境搭建二.相关配置(部分)三.调试运行四.测试源码参考五.常见错误六.扩展(CCGI,SQLite) # 一.环境搭建操作系统:Ubuntu12.04 LTSboa下载地址(但是我找 ...

  3. 嵌入式Web服务器boa在ARM平台的移植步骤

    1.下载http://www.boa.org/ 2.解压tar xzf boa-0.94.13.tar.gz 3.编译cd boa-0.94.13/src./configure 生成了makefile ...

  4. 三种嵌入式web服务器(Boa / lighttpd / shttpd)的 linux移植笔记

    一:移植Boa(web服务器)到嵌入式Linux系统 一.Boa程序的移植 1.下载Boa源码    下载地址: http://www.boa.org/    目前最新发行版本: 0.94.13   ...

  5. [置顶] ARM-Linux下WEB服务器Boa的移植、配置和运行测试

    Linux下使用的轻量级WEB服务器主要有:lighttpd.thttpd.shttpd和boa等等,而Boa是使用最为广泛的轻量级WEB服务器之一(当然,阿帕奇是世界使用排名第一的Web服务器软件) ...

  6. 嵌入式web服务器-thttpd

    交叉编译thttpd http://lakie.blog.163.com/blog/static/45185220201162910432330/ thttpd安装与调试 http://blog.cs ...

  7. 移动物体监控系统-sprint4嵌入式web服务器开发

    一.BOA嵌入式服务器的移植 step1:下载BOA服务器并解压,进入boa下面的src目录,执行./configure生成必须的配置文件以及Makefile step2:修改Makefile文件 c ...

  8. Mozi.HttpEmbedded嵌入式Web服务器

    Mozi.HttpEmbedded 嵌入式Web服务器 项目介绍 Mozi.HttpEmbedded是一个基于.Net构建的嵌入式Web服务器,为.Net App提供web服务功能. 嵌入式的目标不是 ...

  9. 学号20145332 《信息安全系统设计基础》实验五 简单嵌入式WEB服务器实验

    实验目的 掌握在 ARM 开发板实现一个简单 WEB 服务器的过程. 学习在 ARM 开发板上的 SOCKET 网络编程. 学习 Linux 下的 signal()函数的使用. 实验内容 学习使用 s ...

随机推荐

  1. Vue与REACT两个框架的区别和优势对比

    VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...

  2. Spring中静态方法中使用@Resource注解的变量

    开发中,有些时候可能会工具类的静态方法,而这个静态方法中又使用到了@Resource注解后的变量.如果要直接使用 Utils.staticMethod(),项目会报异常:如果不直接使用,还要先 new ...

  3. eclipseWeb项目如何实现网址发送给外人——内部穿透

    教程:https://blog.csdn.net/Feihongxiansen/article/details/94480480 部署完成后: 打开cmd命令: 暴露端口8081成功: 将eclips ...

  4. 使用kubectl访问kubernetes集群

    之前访问k8s都是通过token进去dashboard,如下所示.但是现在希望通过kubectl访问k8s,所以还需要进一步的配置. 1. 安装kubectl命令行工具,配置环境变量,环境变量的值指向 ...

  5. Tensorflow 损失函数(loss function)及自定义损失函数(三)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/limiyudianzi/article ...

  6. SpringBoot(十六):SpringBoot2.1.1集成fastjson,并使用fastjson替代默认的MappingJackson

    springboot2.1.1默认采用的json converter是MappingJackson,通过调试springboot项目中代码可以确定这点.在springboot项目中定义WebMvcCo ...

  7. [转]初识NuGet - 概念, 安装和使用

    1. NuGet是什么? NuGet is a Visual Studio 2010 extension that makes it easy to add, remove, and update l ...

  8. Pan wutong团队技术支持

    本网页为Pan wutong团队的技术支持网址,如果在我们开发的游戏中遇到任何问题,欢迎联系我们! QQ:2535510006 邮箱:2535510006@qq.com

  9. 在LabWindows/CVI中能同时读写一个文件吗?

    主要软件: 主要软件版本: 6.0 主要软件修正版本: N/A 次要软件: N/A 问题: 我需要在一个线程中将数据写入文件中,同时在另一个线程中读取这个文件中的数据,这样做可以吗?解答: 使用CVI ...

  10. SpringMVC返回值响应

    1.响应数据和结果视图 1.1 搭建环境 New Module -> Module SDK 1.8 -> Create from archetype -> maven-archety ...