01_web开发_前端html+js_后端python+flask_实现ping命令获取实时结果

1.需求

1.降低测试人员学习成本

在给测试人员, 运维人员, 培训功能的使用方法, 测试方法时, 经常

1. 写文档: 写测试方法, 测试注意事项
2. 手把手演示: 给测试人员演示, 如何使用升级命令, 查询日志命令, 配置命令…

命令行还是不够直观, 测试人员有学习成本, 还是 ui/图形界面 点点点的操作 最简单.

2.寻求更简单/傻瓜的操作

我们公司的机器人, 智能产品

• 部分型号没有外接显示屏
• 或携带 机器人 + 显示屏 + 鼠标 + 键盘太笨重

故寻求 手机APP 或 小程序 或 蓝牙 或 wifi 控制.
但这些都需要钱, 需要人员开发, 于是本人实现一个http简单的操作页面

实现: 手机浏览器 或 笔记本浏览器

1. 网页控制: 数据采集 开始, 停止
2. 网页播放采集的图片, 视频; 采集数据打包下载
3. 日志打包下载
4. 其它功能…

---

2.实现方案示例

http 服务: python + flask
前端页面: html + js
效果如图:

Note
本人后端, 应用系统, 嵌入式开发, 界面比较简陋

3.一步一步实现

1.html + js 实现

1. html + js 按钮
2. html + js 输入框
3. html + js 输出框
4. html + js 多行显示输出框

2.http服务端实现

1. python+flask hello_worl网页
2. flask 模板网页

3.js 后台请求http服务url

1. js fetch后台请求http

4.ping网页获取实时结果

完成上面几个示例, 就可以自己尝试实现 ping网页实时显示功能
4.ping网页版实现

---

总结

对比QT的ui图形程序, 最大的优势: 手机浏览器也可以操作, 提升便携性