请教一下如何快速开发嵌入式设备的 web 管理页面

2020-06-07 20:50:18 +08:00
 tkwl
原始需求就是常见网络监控摄像头的参数设置,登陆后主页面可以在各个 tab 里设置各个参数,而且当后台监控数据变化时,也能及时反应到页面上。
google 搜了下 web server examples on embedded devices,但大多数页面都是在比较 lightttp uhttpd thttpd Goahead 等 web server 本身,看起来感觉大同小异都是通过某种方式操作 c 程序读取 http request,但是我不太了解怎么和后台已有的程序交互数据呢?必须使用数据库吗?刷新部分数据该怎么操作呢?一般这个 c 程序是执行一次 request 就退出吗?还是一直在后台工作,等着 web server 发信号过来?

其实我是想学习一下实际嵌入式项目上的 webpage 是如何实现的,js 也好,lua 也好,在 github 上都没有找到相关的项目,欢迎各位大佬推荐。
也有考虑过 openwrt 的管理网页,正在学习中感觉有些复杂。
本人有 c 语言背景,其他 HTTP 、JS 、Lua 都是听说过不太懂,资质愚钝各个概念还不是很清楚,但是学习下修改应该没问题。
4504 次点击
所在节点   嵌入式开发
15 条回复
zdianj
2020-06-07 20:55:04 +08:00
数据存储可以直接存 flash,一般有单独的存储空间,或者是直接存在 flash 的文件系统上。数据交互可以通过 html 的 js 跟 cgi 交互。比较传统的做法是 c 写 cgi 。也可以移植 php 之类开发会更简单但是占空间和内存。
tkwl
2020-06-07 21:01:27 +08:00
@zdianj 谢谢,目前 github 上不知道如何搜索成熟的项目,有些 web server 的小例子都是直接在 c 代码里直接 write html 代码,这个应该不是通用的做法吧,难道不是先搞个 html 模版之类的吗,所以想看看真实项目是怎么搞的
像 openwrt 是通过 cgi 调用 lua 程序吗?
anviod
2020-06-07 21:12:59 +08:00
最近也在调试嵌入式 http server 你去看看 https://github.com/cesanta/mongoose 你开发板用的什么片子,内存够不。 你写好 CGI 接口 前端 用 js 代码调用就好
ysc3839
2020-06-07 21:13:05 +08:00
许多路由器厂商的方案是基于一些简单的 C 语言的 http 服务器进行开发,加个简单的模板引擎,然后 http 服务器上再实现 API 接口用于更新设置或者执行某些操作。
这类方案可以参考 Padavan 的 WebUI 。
httpd 下面是 http 服务器的代码 https://gitlab.com/padavan-ng/padavan-ng/-/tree/master/trunk/user/httpd
www 下面是 Web 模板的代码 https://gitlab.com/padavan-ng/padavan-ng/-/tree/master/trunk/user/www

OpenWrt 用的 luci 一开始是用 lua 实现的后端渲染,近期在修改为前后端分离,页面由前端 js 渲染,通过 rpc 接口跟后端交互,逐步去除对 lua 的依赖。
tkwl
2020-06-07 22:34:12 +08:00
@anviod 谢谢,mongoose 和 civetweb 都实践了一下,就差实际的项目例程看看,example 还是太抽象了,不做过具体 HTTP 有些概念还是不好理解
vus520
2020-06-07 22:37:20 +08:00
如果存储够用,可以考虑 go 一把梭。唯一的问题就是编译的包会比较大,基本上都是 1MB 往上
zdianj
2020-06-07 23:29:51 +08:00
@tkwl 两种做法都是常见的,第一种算是预留做法了,现在很少这么做,openwrt 是的 lua 就是 cgi,也是模版渲染器。过程:浏览器->uhttpd->lua 。
zdianj
2020-06-07 23:30:20 +08:00
@vus520 一般来说这种做法都太奢侈。。看设备了。
zdianj
2020-06-07 23:31:37 +08:00
@tkwl 看了下 @ysc3839 的信息 已经很好了。照着去看就行了。
tkwl
2020-06-07 23:40:01 +08:00
@zdianj @ysc3839 两位信息很丰富了,谢谢,看来学点 js 必不可少
imdong
2020-06-07 23:40:01 +08:00
为啥我感觉自己实现 非常简易的 Web Server 也不是很多代码吧?是我太天真了?

起一个 TCP Server,监听 80 端口,截取 path 和 auth 两部分用于鉴权和访问路径。

path 分两种,静态直接读取然后返回,动态就解析参数,然后交由内部方法处理。

返回的数据 包上固定的 header 头后发出?不过确实是需要一直监听的?
ysc3839
2020-06-07 23:47:54 +08:00
@imdong 实现一个对 HTTP 协议支持不完全的最简单的 HTTP 服务器确实不难,但是要完整支持 HTTP 协议,还要高性能少 bug 的话我觉得很难,至少我自己是没这个时间精力和能力做出来。
xylophone21
2020-06-07 23:49:23 +08:00
为何楼上各位都不考虑前后端分离呢?这样后端要做的,与 C 的交互,不就仅仅保留了一些简单的数据或者说设备状态。比如用 RPC 来查询主工作进程。

至于一个静态的 HTTP Sever 部分,那个简单的开源版本,几本可以直接用了。
tkwl
2020-06-08 00:06:09 +08:00
@xylophone21 请教是否有相关实践参考,楼上说的 openwrt 使用 lua 应该也是一种前后端分离吧,除非在 webserver 代码里写死了 html 那种
systemcall
2020-06-08 00:29:48 +08:00
见到现在用的比较多的是 html 里用 iframe 来调用不同的功能对应的页面,每个页面是单独的 html 。参数用 js 发送请求,机子上面跑 cgi,收到请求后返回一个 json,浏览器再来解析和渲染。隔一下请求一下,而且要做一下验证,避免没有登录的情况下请求到数据。大部分操作似乎都是在传 JSON
没做过 cgi,不清楚怎么实现的。上 OpenWRT 应该可以,基本的功能只需要 8M+2M,加上视频方面的东西应该也不会大到哪去。
或者用 app,只支持 app 的话应该会好做的多,Flash 要求也低一些

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/679492

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX