接上帖 STM32H743IIT6开发板+LAN8720+W25Q128移植RT-Thread(包含文件系统+TFTP+web服务器+AJAX前端与服务器CGI联动)
上次已经搞清楚了RTT下Web服务器联动前端CGI的方法 然后我进一步脑洞了一个基于前端的监测系统,下位机就是我上次用的H743板子 下位机还是上次那个平台,就是RTT系统多装了一个cJSON,这里不过多讲cJSON的用法。
主要讲讲套路
- 下位机通过JSON把需要的数据包装好,通过CGI接口,响应前端AJAX的请求,将需要的数据以JSON发上去,前端JS进行解析展示到浏览器。
- 浏览器触发某些事件,发送AJAX请求,下位机通过CGI收到请求和需要的参数,然后根据参数,把需要的数据以JSON格式再发回前端,前端解析到浏览器展示出来。
- 所有的前端页面以文件的形式放在下位机的SD卡上,RTT系统提供的web服务器对接这些页面文件。
然后这里我直接展示最后的效果并提供我这个前端demo的代码给大家参考 不适合展示的信息我已经XX处理~~~ 前端部分就是简单的HTML/CSS/JS/jQuery 【主要自己不是专业的前端人员,H743也不是强大的A核处理器,所以也整不了太复杂的效果】 不过凭借我渣渣的前端技术,能做到这个程度我也很满意了 首先是主页【整了个侧边栏,快速切换到其他页面,移动到对应图标会点亮对应的字】 板卡状态页面 这里整了个GET请求请求下位机CGI传输基本信息,当然没接上位机也就没得数据啦 机柜状态页面 我这里用HTML DIV和表格的方式做了一个机柜的展示效果,移动到对应模块模块会变红并且会弹出一个信息框,这里可以对应做AJAX请求下位机发对应的模块的信息上来。 目前就整了上面这些页面,其他页面还是空的 大致脑洞的成果就是这样子 然后我把前端部分分享给大家 下载地址
|