大家好，欢迎来到IT知识分享网。

web 小工具开发

本文只是给出一种解决方案，初心是为了探究高效可视化小工具开发，或者我愿称之为带界面的脚本；目标的人群是像C/C++ 这样的后端人群，因为在 C/C++ 里面，干点什么都很费劲，一个可视化小工具的开发量都不是很小。

背景

最近有一个小的需求，要为一些设备的升级包生成一个配置文件，同时并将生成的配置文件与升级包一起打包成一个 .zip 文件，我们称这个过程为 “打包”。

打包的效果如下:

其中 *.bin 文件就是我们的升级包，而 *.ini 文件是构建出来的，而 *.zip 则是压缩了 *.bin 及 *.zip；至于 *.ini 的字段名称是干什么，那则是业务的事情。

现在由于这个工具主要是给测试使用，需要一个比较直观的 UI 操作，而且像是 *.ini 中的 md5 校验值是可以自动生成的，没有必要使用人力去填写，所以考虑写一个简易的 UI 。

首先这个有两个大前提:

• 我的技术栈主力在 C/C++
• 这个小工具的开发周期应该要很快，几天左右

在综合考虑了挺久之后，我后来决定不使用 qt 也不使用 mfc ，而是采取 web 去实现这个功能，这个 web 还比较特殊，只能在 127.0.0.1 上运行，也就是限制在本地运行；也就是说拖着 web 的外衣，实际上也就是一个本地工具而已。

然后谈一下问什么最后不考虑用 qt 去实现这个功能，主要有以下几点吧:

• 跨平台困难
• UI 设计繁琐
• 寻找合适的接口所需的时间比较旧，而且还要安装对应的库
• 不利于后期将此功能集成到服务器上
• 个人想尝试一下新的技术

效果

最后的页面效果如下:

首先是通过 127.0.0.1:5000 打开这个小工具，然后输入一下要打包的文件，之后选择设备的类型，注意此时根据设备的类型自动加载出了设备型号，然后在依次把剩下的字段填充完成，然后点下 打包 就可以在对应的文件夹下看到对应的打包文件。

这里的 外设版本包文件及路径 其实做的不是很好，这样做的原因是浏览器是无法获取文件所在的本地路径的，这个留做以后的优化点。

技术选型

为了达到这一个目的，需要进行一下技术选型，这里单独列出前端及后台的技术选型。

前端技术选型

几周前其实也是做过一个网页的小工具，那时采用的原生的 html+css+js 的方式开发网页，后来又使用了一下Layui 的框架进行开发，然后做到一半突然 Layui 宣布于今年底停止维护；对我这种一开始原生 html+css+js 开发的人来说， Layui 无疑是十分喜欢，因为这样我基本不用管 css 。

然后也是比较好奇，一个好好的项目怎么会突然停止维护了，所以也是了解了一下前端的前言技术，了解到了现在很火的vue 以及 react，然后去学了一下，确实非常的方便，比 Layui 开发的速度又快了不少。

我是比较建议后端开发有时候有需求做网页的不妨学习一下 vue ，真的比原生的 html+css+js 开发快多了，而且 UI 也挺好看的。

一个比较适合初学者的视频 :
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

精通自然不敢说，毕竟我连 html 的基础都几乎约等于为 0， js 也是跟在 c/c++ 里面一样，只使用很基础的语法；虽然有些点由于前置依赖听不懂像 ES6、webpackt，但是没关系马马虎虎也够用了，我只学了一下 vue2，大概花了差不多三十多个钟吧，还是值得的。

前端的具体选型:

• 框架 ： vue2
• UI 组件库 ： element

后端技术选型

由于现在 python 越来越万事通，啥都能做，但是很多做不好，反正能做就对了；黑猫白猫抓得到老鼠就是好猫，我也不追求效率，所以 python 无疑是我的首先项。

其实 nodejs 也是一种不错的解决方案，但是 python 越来越常见了，很多 shell 脚本慢慢地如果可以使用python 代替，也会优先考虑 pyhton，毕竟跨平台容易实现，而且功能比 shell 强多了。

然后找了一下，使用 flask 作为 web server , flask 也是 python 的一个包而已，关于这个 flask，我是没有找到什么合适的教程，所以把别人官网花了两天时间读了一下。

技术选型总结

关于前后端如何选型，前端选择何种框架，后端选择何种语言；其实都很随意，看你的习惯以及最重要的，你会什么。

我的技术选型的总体方案就是牛刀鸡割，比如哪一个框架来写一个小工具的页面，利用 vue 以及 python 本身的强大功能，弥补我在这两方面的不足，同时提高开发效率。

整合

最终我们要达到的效果是这样的，一个 *.exe 就可以把服务器拉起来，然后使用网页访问:

这里会引出两个问题，如果你要做到上面那个效果一定会遇到的:

• 前后端是独立开发的，如何整合
• 如何在没有 python 的机器上运行 python 写的程序

前后端整合

前端

由于前端是使用 vue2 开发的，但是服务器上需要部署的其实是原生的 html+css+js ,所以要 build 一下:

简简单单地 npm run build 一下，然后生成 dist 文件，这个文件就是需要需要的原生 html+css+js 。

前端的工作就做完了，剩下的交给后端。

后端

后端采用的 flask 作为 web 的框架，所以得遵一下 flask 的一些规定。

创建两个文件夹 templates 及 static ;将 index.html 拷贝至 templates 下，作为网页的入口;将其余的拷贝至 static , 作为网页静态资源。

然后修改下 index.html, 静态资源都加载 /static ，如下所示：

然后在 *.py 添加一条这样的路由规则:

from flask import render_template
@app.route('/')
def index():
    return render_template("index.html")

同时建议开启一下 CORS ，因为可能以后打算跨域:

from flask_cors import CORS
app = Flask(__name__)
# 允许跨域请求
CORS(app,  resources={ 
   r"/*": { 
   "origins": "*"}})

这样子前后端的整理就完成了。

python 打包

Windows 下使用 Pyinstaller 就可以打包 *.py 为 *.exe 了，然后使用 *.spec 添加一下静态资源。

首先安装一下 Pyinstaller：

# 安装 Pyinstaller
pip install Pyinstaller

然后打包一下 *.py 文件：

# flask_server.py 替换为你自己的文件
pyinstaller -F flask_server.py

然后可以看到生成一个 flask_server.spec 文件，把你的静态资源添加进去，像下面这样:

这样之后就可已经打包好了，拿走 dist 下的 *.exe 给别人就可以使用了。

总结

整个过程的开发还是比较粗糙的，因为其实对这些技术都不是特别地了解，之前一直都是写 C/C++ 的，基本功能是实现了，但其中有些写法自己都看不下去；所以后期像 html、css以及js这些基础还是抽空学习一下，有一个比较整体的了解，python 也是值得继续深入，一切都是因为懒得用 C/C++ 写 UI。