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

Linux 物联网网关主控系统-Web部分二一、Boa服务器搭建1.VSCode2.Boa移植过程1.下载源码2.解压源码3.安装编译依赖工具4.修改源码5.编译与配置文件创建6.boa.conf 配置文件修改7.整体流程总结3.Boa运行测试1.BOA 运行前要准备的文件2.运行 BOA 的命令3.网页测试4.CGI 程序测试5.关闭 BOA二、html基础1.HTML 基础认知2.HTML 基本结构3.嵌入式开发常用基础标签4.head 与 body 核心属性5.嵌入式开发高频实用模块6.嵌入式专属实用技巧框架页 Frameset7.HTML 与嵌入式 Web 整体架构的关联一、Boa服务器搭建PS:浏览器↓访问网页 → BOA↓点按钮/发请求 → CGI 程序↓CGI 调用 SQLite 接口 → 读写 .db 数据库↓结果返回给浏览器BOA 就是一个 “网页文件 CGI 程序” 的 Web 服务器它负责把 HTML、图片、CGI 程序串起来让浏览器能访问到它们。1.VSCodeVSCodeVisual Studio Code是微软开发的跨平台免费源代码编辑器适配 Windows、Mac、Linux 系统支持 Web 前端、C/C 等多语言开发是嵌入式 Web 开发HTML/CSS/JavaScript的常用工具。官方下载地址https://code.visualstudio.com/download核心插件安装简体中文化插件插件名称Chinese (Simplified)简体中文开发者Microsoft作用将 VSCode 界面汉化降低操作门槛Web 前端开发插件适配 HTML、CSS、JavaScript 开发文档配套资料物联网实训项目→4 知识点相关资料→5.web→VSCode 的 Web 前端开发环境打造.pdf其他实用插件可选C/C嵌入式开发必备支持 C 语言代码编辑、编译调试Dracula Official深色主题插件优化代码编辑视觉体验VSCode 基础使用创建 Web 前端文件1.新建 HTML 文件新建空白文件后缀命名为.html如 test.html、index.html输入!后按回车自动生成 HTML 基础骨架代码!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbody/body/html2.项目文件管理可在 VSCode 资源管理器中创建文件夹如 pic、test、cgi-bin分类管理 HTML、图片、脚本等 Web 开发文件适配嵌入式 Web 服务器的文件目录结构。BOA 服务器是什么• BOA是一款非常小巧的Web服务器源代码开放、性能优秀、支持CGI通用网关接口技术特别适合应用在嵌入式系统中。• BOA服务器主要功能是在互联嵌入式设备之间进行信息交互达到通过网络对嵌入式设备进行监控并将反馈信息自动上传给主控设备的目的。• 它是基于HTTP超文本传输协议的Web网页是Web服务最基本的传输单元。2.Boa移植过程1.下载源码下载地址• http://www.boa.org/2.解压源码tar-zxvf boa-0.94.13.tar.gz cd boa-0.94.133.安装编译依赖工具$ sudo apt-get install bison $ sudo apt-get install flex4.修改源码这里是为了修复 BOA 源码在现代 Linux/ARM 交叉编译环境下的兼容性 bug让编译能顺利通过、程序能正常运行没有任何功能增强只是「修坑」1.src/compat.h 时区相关宏#ifdefHAVE_TM_GMTOFF#defineTIMEZONE_OFFSET(foo)(foo)-tm_gmtoff#else// 旧版定义#define TIMEZONE_OFFSET(foo) timezone#endif旧版 BOA 源码用了timezone全局变量来获取时区偏移这个变量在新版 Linux 内核 /glibc 中已经废弃 / 不可用交叉编译时会报「未定义引用」错误。2. src/log.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 权限检查代码/* if (setuid(0) ! -1) { DIE(icky Linux kernel bug!); }*/这段代码是 BOA 的一个历史安全检查原本设计是「如果以 root 权限运行 BOA且setuid(0)成功就判定为内核 bug直接终止程序」目的是防止 root 权限滥用。但在嵌入式 Linux 开发中我们就是要以 root 权限运行 BOA需要绑定 80 端口、访问系统资源这段检查会直接导致 BOA 启动就报错退出。5.编译与配置文件创建#1.进入源码src目录 pengubuntu:~/work/boa/boa-0.94.13$ cd src/#2.配置编译安装路径prefix指定临时安装目录方便后续打包到开发板 pengubuntu:~/work/boa/boa-0.94.13/src$./configure--prefix/home/peng/work/boa/boa-0.94.13/tmp #3.执行编译生成ARM架构的boa可执行文件 pengubuntu:~/work/boa/boa-0.94.13/src$ make #4.在Ubuntu系统创建boa配置文件目录/etc/boa是boa默认的配置文件路径 pengubuntu:~/work/boa/boa-0.94.13/src$ sudo mkdir/etc/boa #5.将源码根目录的boa.conf配置文件复制到/etc/boa目录完成配置文件部署 pengubuntu:~/work/boa/boa-0.94.13/src$ sudo cp../boa.conf/etc/boa6.boa.conf 配置文件修改nobody 是普通权限太小了嵌入式开发板跑不起来改 0 root 最高权限能绑定 80 端口、读文件、写日志嵌入式开发板空间小不需要记录日志关掉省资源。服务器名字随便写不影响使用。配置文件里写 /www你以后的 html网页文件必须放到开发板 /www 目录下CGI 程序的路径动态网页、C 语言写的控制程序7.整体流程总结先通过configuremake完成编译生成可执行文件再按照 boa 的默认规则创建配置目录、部署配置文件最后修改boa.conf适配嵌入式开发板的运行环境让 boa 能正常启动、提供 Web 服务、支持动态 CGI 功能。3.Boa运行测试1.BOA 运行前要准备的文件在开发板上必须有这 3 样东西boa交叉编译好的可执行文件/etc/boa/boa.conf配置文件网页目录 /www里面放你的 .html 文件2.运行 BOA 的命令cd/bin//进入 boa 所在目录chmod777boa//给权限第一次必须执行sudo./boa//后台启动 BOAps-ef|grep boa//看到 boa 进程 → 启动成功3.网页测试打开127.0.0.1或者用ifconfig然后打开http://192.168.1.100示例4.CGI 程序测试/www/cgi-bin/http://192.168.1.100/cgi-bin/xxx.cgi能看到输出 → CGI 正常5.关闭 BOAkillall boa二、html基础1.HTML 基础认知1.定义超文本标记语言HyperText Markup Language后缀为.html/.htm由浏览器解析渲染无编译过程。2.Web 开发三要素HTML定内容 CSS定布局 JavaScript定行为嵌入式开发中常用HTML5CSS3jQuery组合。3.核心作用在嵌入式项目中用于编写开发板 Web 管理系统的前端页面如登录页、设备监控页、参数配置页是用户与嵌入式设备交互的视觉载体。2.HTML 基本结构所有 HTML 文件都遵循固定骨架核心分为文档头和正文区标签成对出现部分空标签除外是嵌入式开发中编写所有页面的基础模板。!DOCTYPE htmlhtmlhead!--文档头网页标题、编码、外部资源引入等不显示在页面主体--meta charsetUTF-8title嵌入式Web管理系统/title/headbody!--正文区页面所有可见内容如文字、按钮、表格、表单等--无线传感网Web管理系统/body/html3.嵌入式开发常用基础标签文字格式控制标签用于页面标题、设备信息、提示文字的样式排版核心是加粗、居中、换行、段落字体与颜色控制用于区分页面不同类型信息如正常参数、告警信息、标题嵌入式开发中常用简单配色即可字体标签 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设置网页标题如 “开发板设备监控页”。body 区核心属性控制页面整体样式嵌入式开发中常用背景色、文本色、留白适配开发板网页的简洁风格bgcolor页面背景色如浅灰色不刺眼text页面默认文本颜色如深灰色提升可读性leftmargin/topmargin页面左侧 / 顶部留白避免内容贴边提升美观度。5.嵌入式开发高频实用模块1.列表展示设备 / 功能菜单用于开发板页面的功能导航、设备节点列表分无序列表和有序列表嵌入式中以无序列表为主如左侧功能栏无序列表 ul li默认实心圆点可通过type修改样式circle 空心圆 /square 方框示例开发板节点列表ulli节点1环境监控/lili节点2远程控制/lili节点3参数设置/li/ul2. 表格展示设备监控数据嵌入式开发中最核心的模块用于展示传感器数据、设备状态、历史记录等如温度、湿度、电压等参数核心标签 table tr td/ thtable border1width100%trth传感器/thth当前数值/thth单位/thth状态/th/trtr aligncentertd温度/tdtd28/tdtd℃/tdtdfont colorgreen正常/font/td/tr/table3. 表单收集用户操作指令用于开发板的登录页、参数配置页、指令下发页核心是收集用户输入如用户名密码、设备阈值、控制指令并提交给后端 CGI 程序处理核心标签搭配下拉框、多行文本。1核心表单标签设置表单提交规则嵌入式中重点配置 2 个属性action表单提交的目标地址核心指向 CGI 程序如action“/cgi- - - - - bin/control.cgi”将用户输入传给开发板的 CGI 程序处理method提交方式嵌入式中常用POST数据安全适合传参、登录GET 适用于简单查询。2常用表单控件3辅助表单控件form action/cgi-bin/login.cgimethodPOST用户名input typetextnameusernamebr密nbsp;nbsp;码input typepasswordnamepwdbrinput typesubmitvalue登录input typeresetvalue重填/form6.嵌入式专属实用技巧框架页 Frameset嵌入式 Web 管理系统常用框架页Frameset 将页面分割为多个区域实现功能导航与内容展示分离如顶部标题栏、左侧功能栏、右侧内容展示栏替代传统标签核心通过rows水平分割和cols垂直分割划分区域。frameset cols20%,80%!--左侧功能栏left.html--frame srcleft.htmlnameleftFrame!--右侧内容栏right.html--frame srcright.htmlnamerightFrame/frameset7.HTML 与嵌入式 Web 整体架构的关联在嵌入式 Web 开发BOACGISQLiteHTML中HTML 是前端展示层核心作用是1.作为用户与开发板交互的可视化界面展示设备状态、传感器数据2.通过表单收集用户操作指令提交给/cgi-bin/下的 CGI 程序3.所有 HTML 文件需放在 BOA 服务器配置的网页根目录/www 下由 BOA 服务器提供浏览器访问。整体交互逻辑浏览器访问 HTML 页面 → 用户操作表单 / 按钮 → 表单提交给 CGI 程序 → CGI 程序操作 SQLite 数据库 / 控制开发板硬件 → 结果返回至 HTML 页面展示。