【Linux 物联网网关主控系统-Web部分（二）】

三万棵雪松2026-04-06 9:04

Linux 物联网网关主控系统-Web部分（二）

一、Boa服务器搭建

PS:

浏览器

↓

访问网页 → BOA

↓

点按钮/发请求 → CGI 程序

↓

CGI 调用 SQLite 接口 → 读写 .db 数据库

↓

结果返回给浏览器

BOA 就是一个 "网页文件 + CGI 程序" 的 Web 服务器，它负责把 HTML、图片、CGI 程序串起来，让浏览器能访问到它们。

1.VSCode

VSCode（Visual Studio Code）是微软开发的跨平台免费源代码编辑器，适配 Windows、Mac、Linux 系统，支持 Web 前端、C/C++ 等多语言开发，是嵌入式 Web 开发（HTML/CSS/JavaScript）的常用工具。

官方下载地址：https://code.visualstudio.com/download

核心插件安装

  1. 简体中文化插件
    插件名称：Chinese (Simplified)（简体中文）
    开发者：Microsoft
    作用：将 VSCode 界面汉化，降低操作门槛
  2. Web 前端开发插件
    适配 HTML、CSS、JavaScript 开发（文档配套资料：物联网实训项目→4 知识点相关资料→5.web→VSCode 的 Web 前端开发环境打造.pdf）
  3. 其他实用插件（可选）
    C/C++：嵌入式开发必备，支持 C 语言代码编辑、编译调试
    Dracula Official：深色主题插件，优化代码编辑视觉体验

VSCode 基础使用（创建 Web 前端文件）

1.新建 HTML 文件

新建空白文件，后缀命名为.html（如 test.html、index.html）

输入!后按回车，自动生成 HTML 基础骨架代码：

c 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.项目文件管理

可在 VSCode 资源管理器中创建文件夹（如 pic、test、cgi-bin），分类管理 HTML、图片、脚本等 Web 开发文件，适配嵌入式 Web 服务器的文件目录结构。

BOA 服务器是什么

• BOA是一款非常小巧的Web服务器，源代码开放、性能优秀、支

持CGI通用网关接口技术，特别适合应用在嵌入式系统中。

• BOA服务器主要功能是在互联嵌入式设备之间进行信息交互，达

到通过网络对嵌入式设备进行监控，并将反馈信息自动上传给主

控设备的目的。

• 它是基于HTTP超文本传输协议的，Web网页是Web服务最基本

的传输单元。

2.Boa移植过程

1.下载源码

下载地址

• http://www.boa.org/

2.解压源码

c 复制代码 
tar -zxvf boa-0.94.13.tar.gz
cd boa-0.94.13

3.安装编译依赖工具

c 复制代码 
$ sudo apt-get install bison
$ sudo apt-get install flex

4.修改源码

这里是为了修复 BOA 源码在现代 Linux/ARM 交叉编译环境下的兼容性 bug，让编译能顺利通过、程序能正常运行，没有任何功能增强，只是「修坑」

1.src/compat.h 时区相关宏

c 复制代码 
#ifdef HAVE_TM_GMTOFF
#define TIMEZONE_OFFSET(foo) (foo)->tm_gmtoff
#else
// 旧版定义：#define TIMEZONE_OFFSET(foo) timezone
#endif

旧版 BOA 源码用了timezone全局变量来获取时区偏移，这个变量在新版 Linux 内核 /glibc 中已经废弃 / 不可用，交叉编译时会报「未定义引用」错误。

2. src/log.c 日志重定向代码

c 复制代码 
/* redirect stderr to error_log */
/*if (dup2(error_log, STDERR_FILENO) == -1) {
    DIE("unable to dup2 the error log");
}*/

这段代码原本的作用是把标准错误 (stderr) 重定向到日志文件，但在嵌入式 Linux / 交叉编译环境中，文件描述符、权限逻辑和 PC 端 Ubuntu 有差异，直接运行会触发dup2失败，导致 BOA 启动崩溃。

3.src/boa.c setuid 权限检查代码

c 复制代码 
/* if (setuid(0) != -1) {
    DIE("icky Linux kernel bug!");
}*/

这段代码是 BOA 的一个历史安全检查：原本设计是「如果以 root 权限运行 BOA，且setuid(0)成功，就判定为内核 bug，直接终止程序」，目的是防止 root 权限滥用。

但在嵌入式 Linux 开发中，我们就是要以 root 权限运行 BOA（需要绑定 80 端口、访问系统资源），这段检查会直接导致 BOA 启动就报错退出。

5.编译与配置文件创建

c 复制代码 
# 1. 进入源码src目录
peng@ubuntu:~/work/boa/boa-0.94.13$ cd src/

# 2. 配置编译安装路径（prefix指定临时安装目录，方便后续打包到开发板）
peng@ubuntu:~/work/boa/boa-0.94.13/src$ ./configure --prefix=/home/peng/work/boa/boa-0.94.13/tmp

# 3. 执行编译，生成ARM架构的boa可执行文件
peng@ubuntu:~/work/boa/boa-0.94.13/src$ make

# 4. 在Ubuntu系统创建boa配置文件目录（/etc/boa是boa默认的配置文件路径）
peng@ubuntu:~/work/boa/boa-0.94.13/src$ sudo mkdir /etc/boa

# 5. 将源码根目录的boa.conf配置文件复制到/etc/boa目录，完成配置文件部署
peng@ubuntu:~/work/boa/boa-0.94.13/src$ sudo cp ../boa.conf /etc/boa

6.boa.conf 配置文件修改

nobody 是普通权限，太小了，嵌入式开发板跑不起来

改 0 = root 最高权限，能绑定 80 端口、读文件、写日志

嵌入式开发板空间小，不需要记录日志，关掉省资源。

服务器名字（随便写，不影响使用）。

配置文件里写 /www

你以后的 html网页文件必须放到开发板 /www 目录下

CGI 程序的路径

（动态网页、C 语言写的控制程序）

7.整体流程总结

先通过configure+make完成编译，生成可执行文件；

再按照 boa 的默认规则创建配置目录、部署配置文件；

最后修改boa.conf，适配嵌入式开发板的运行环境，让 boa 能正常启动、提供 Web 服务、支持动态 CGI 功能。

3.Boa运行测试

1.BOA 运行前要准备的文件

在开发板上必须有这 3 样东西：

boa

交叉编译好的可执行文件

/etc/boa/boa.conf

配置文件

网页目录 /www

里面放你的 .html 文件

2.运行 BOA 的命令

c 复制代码 
cd /bin //进入 boa 所在目录
chmod 777 boa  //给权限（第一次必须执行）
sudo ./boa  //后台启动 BOA
c 复制代码 
ps -ef | grep boa//看到 boa 进程 → 启动成功

3.网页测试

打开127.0.0.1

或者用ifconfig然后打开http://192.168.1.100（示例）

4.CGI 程序测试

c 复制代码 
/www/cgi-bin/
c 复制代码 
http://192.168.1.100/cgi-bin/xxx.cgi

能看到输出 → CGI 正常

5.关闭 BOA

c 复制代码 
killall boa

二、html基础

1.HTML 基础认知

1.定义：超文本标记语言（HyperText Markup Language），后缀为.html/.htm，由浏览器解析渲染，无编译过程。

2.Web 开发三要素：HTML（定内容）+ CSS（定布局）+ JavaScript（定行为），嵌入式开发中常用HTML5+CSS3+jQuery组合。

3.核心作用：在嵌入式项目中，用于编写开发板 Web 管理系统的前端页面（如登录页、设备监控页、参数配置页），是用户与嵌入式设备交互的视觉载体。

2.HTML 基本结构

所有 HTML 文件都遵循固定骨架，核心分为文档头和正文区，标签成对出现（部分空标签除外），是嵌入式开发中编写所有页面的基础模板。

c 复制代码 
<!DOCTYPE html>
<html>
    <head>
        <!-- 文档头：网页标题、编码、外部资源引入等，不显示在页面主体 -->
        <meta charset="UTF-8">
        <title>嵌入式Web管理系统</title>
    </head>
    <body>
        <!-- 正文区：页面所有可见内容，如文字、按钮、表格、表单等 -->
        无线传感网Web管理系统
    </body>
</html>

3.嵌入式开发常用基础标签

  1. 文字格式控制标签
    用于页面标题、设备信息、提示文字的样式排版，核心是加粗、居中、换行、段落：
  1. 字体与颜色控制
    用于区分页面不同类型信息（如正常参数、告警信息、标题），嵌入式开发中常用简单配色即可：
    字体标签：< font color="颜色" size="字号" face="字体">，如< font color="red" size="4">警告：温度过高
    颜色表示：3 种方式，嵌入式开发中优先用英文名称（red/green/blue） 或16 进制（#ff0000），简单易上手。

4.head 与 body 核心属性

1. head 区关键子标签

head 区负责页面基础配置，不显示内容，嵌入式开发中重点掌握 3 个标签即可：

< meta>：设置编码（，必加，防止中文乱码）、页面刷新等；

< link>：引入外部 CSS 文件，美化页面布局（嵌入式开发中可简化，基础页面可不用）；

< title>：设置网页标题，如 "开发板设备监控页"。

  1. body 区核心属性
    控制页面整体样式，嵌入式开发中常用背景色、文本色、留白，适配开发板网页的简洁风格：

bgcolor：页面背景色，如（浅灰色，不刺眼）；

text：页面默认文本颜色，如（深灰色，提升可读性）；

leftmargin/topmargin：页面左侧 / 顶部留白，避免内容贴边，提升美观度。

5.嵌入式开发高频实用模块

1.列表：展示设备 / 功能菜单

用于开发板页面的功能导航、设备节点列表，分无序列表和有序列表，嵌入式中以无序列表为主（如左侧功能栏）：

无序列表：< ul>+< li>，默认实心圆点，可通过type修改样式（circle 空心圆 /square 方框）；

示例：开发板节点列表

c 复制代码 
<ul>
    <li>节点1：环境监控</li>
    <li>节点2：远程控制</li>
    <li>节点3：参数设置</li>
</ul>

2. 表格：展示设备监控数据

嵌入式开发中最核心的模块，用于展示传感器数据、设备状态、历史记录等（如温度、湿度、电压等参数），核心标签< table>+< tr>+< td>/< th>：

c 复制代码 
<table border="1" width="100%">
    <tr>
        <th>传感器</th>
        <th>当前数值</th>
        <th>单位</th>
        <th>状态</th>
    </tr>
    <tr align="center">
        <td>温度</td>
        <td>28</td>
        <td>℃</td>
        <td><font color="green">正常</font></td>
    </tr>
</table>

3. 表单：收集用户操作指令

用于开发板的登录页、参数配置页、指令下发页，核心是收集用户输入（如用户名密码、设备阈值、控制指令），并提交给后端 CGI 程序处理，核心标签+，搭配（下拉框）、（多行文本）。

（1）核心表单标签

设置表单提交规则，嵌入式中重点配置 2 个属性：

  • action：表单提交的目标地址，核心指向 CGI 程序（如action="/cgi- - - - - bin/control.cgi"），将用户输入传给开发板的 CGI 程序处理；
  • method：提交方式，嵌入式中常用POST（数据安全，适合传参、登录），GET 适用于简单查询。

（2）常用表单控件

（3）辅助表单控件

c 复制代码 
<form action="/cgi-bin/login.cgi" method="POST">
    用户名：<input type="text" name="username"><br>
    密&nbsp;&nbsp;码：<input type="password" name="pwd"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重填">
</form>

6.嵌入式专属实用技巧：框架页 Frameset

嵌入式 Web 管理系统常用框架页（Frameset） 将页面分割为多个区域，实现功能导航与内容展示分离（如顶部标题栏、左侧功能栏、右侧内容展示栏），替代传统标签，核心通过rows（水平分割）和cols（垂直分割）划分区域。

c 复制代码 
<frameset cols="20%,80%">
    <!-- 左侧功能栏：left.html -->
    <frame src="left.html" name="leftFrame">
    <!-- 右侧内容栏：right.html -->
    <frame src="right.html" name="rightFrame">
</frameset>

7.HTML 与嵌入式 Web 整体架构的关联

在嵌入式 Web 开发（BOA+CGI+SQLite+HTML）中，HTML 是前端展示层，核心作用是：

1.作为用户与开发板交互的可视化界面，展示设备状态、传感器数据；

2.通过表单收集用户操作指令，提交给/cgi-bin/下的 CGI 程序；

3.所有 HTML 文件需放在 BOA 服务器配置的网页根目录/www 下，由 BOA 服务器提供浏览器访问。

整体交互逻辑：浏览器访问 HTML 页面 → 用户操作表单 / 按钮 → 表单提交给 CGI 程序 → CGI 程序操作 SQLite 数据库 / 控制开发板硬件 → 结果返回至 HTML 页面展示。

相关推荐
数据知道2 小时前
claw-code 源码详细分析：命令宇宙 vs 工具宇宙——`commands` / `tools` 镜像清单如何驱动路由与 shim 执行？
linux·服务器·网络·python·ai·claude code
一叶之秋14122 小时前
通信之道：解锁Linux进程间通信的无限可能(一)
linux·运维·服务器
Deitymoon2 小时前
linux——线程的概念
linux
eF06U766F2 小时前
Ubuntu Linux 上 固定P/E 核混合架构CPU频率
linux·ubuntu·架构
minji...2 小时前
Linux 多线程（三）线程控制，线程终止，线程中的异常问题
linux·运维·服务器·开发语言·网络·算法
We་ct2 小时前
LeetCode 137. 只出现一次的数字 II：从基础到最优的两种解法详解
前端·数据结构·算法·leetcode·typescript·位运算
zzzsde2 小时前
【Linux】进程间通信（1）管道&&进程池实现
linux·运维·服务器
Miki Makimura2 小时前
C++ 聊天室项目：Linux 环境搭建与问题总结
linux·开发语言·c++
星空2 小时前
前端--A_3--HTML区块_块元素与行内元素
前端·html
热门推荐
01GitHub 镜像站点02Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）03VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！06【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线072026年3月AI领域大事件：DeepSeek引领开源风暴08最新更新版本，OpenClaw v2026.4.2 深度解读剖析：Task Flow 重磅回归与安全架构的全面硬化09AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services