【STM32】最近脑洞的一个前端监测系统

接上帖
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请求下位机发对应的模块的信息上来。

目前就整了上面这些页面，其他页面还是空的
大致脑洞的成果就是这样子
然后我把前端部分分享给大家
下载地址