pyweb-dev-tools

项目简介

pyweb-dev-tools是使用pyqt+vue开发的实用工具脚手架，利用业余时间把工作中遇到的一些问题总结起来，打包进小工具集中，供大家在程序开发过程中参考和使用，同时支持二次开发，只要会python+web基础，就能进行自定义的工具集开发，开发好的工具集可以提交到工具集仓库，然后发布分享给其他用户，不断扩展转达工具集功能。

每一个工具集可以用web开发开发界面实现一些功能，在web开发不满足条件情况下，比如需要获取设备能力时，可以使用python定义后端接口函数，插件按命名空间封装了web端和python端的通信，js很方便进行调用python函数

项目示例图

支持平台

支持window，mac平台

环境安装

1 安装python环境 3.7版本或以上

2 安装nodejs环境 10.8版本或以上

开始开发

本项目为插件开发脚手架，已上传到pypi仓库 无需手工安装

以下为基于该脚手架的插件二次开发步骤

1 新建一个插件工程

工程以获取系统cpu序列号和mac地址为例，以下均以该工程做示例，实际可自定义

工程名 plugin_sys_info

2 根目录初始化前端项目

以vue为例，初始化vue项目 vue init webpack vuedev

调整打包配置项 vuedev/config/index.js 修改如下代码便于打包

build：{index: path.resolve(__dirname, '../dist/index.html'), //改为../dist/index.html// PathsassetsRoot: path.resolve(__dirname, '../dist'), //改为../assetsSubDirectory: 'static',assetsPublicPath: './', //改为./
//other
}

建议使用iview管理端框架统一样式

安装 qt-channel 用于javascript调用后端python接口 ，如果无需调用python后台可不添加

npm qt-channel vue -S

3 创建插件配置文件

根目录新建一个 config.ini 配置文件，添加如下配置：

[base]
;前端项目IP地址
webpack_server_ip = localhost 
;前端项目端口
webpack_server_port = 8080
;前端项目根目录
webpack_root_path = /vuedev
;前端项目插件目录
webpack_plugin_path = /src/plugin

4 安装python依赖

新建依赖配置文件 requirements.txt，添加如下内容 ：

PyQt5==5.13.2
PyQtWebEngine==5.13.2
requests==2.22.0
PyInstaller==3.5
numpy==1.16.4
pywin32==224
wmi==1.4.9
pyweb-dev-tools==0.0.2

pyweb-dev-tools==0.0.2 为插件脚手架版本，后边会不定期更新 可在pypi搜索

根目录执行依赖安装命令：

pip install pipreqs && pip install -r requirements.txt

5 创建python启动脚本

根目录新建一个 app.py 配置文件，添加如下配置：

# -*- coding: utf-8 -*-
from pyWebDevTool.main import Appif __name__ == "__main__":    App()

至此 脚手架已经搭建完毕，运行该脚本，程序启动如下

6 插件模块开发

在脚手架基础上，可以进行插件工具的开发

6.1 插件属性定义

vuedev/src/plugin目录下 新建python包（注意是python包不是目录，需要包含________init________.py）, 建议安装公司名+项目名结构命名

例如 vuedev/src/plugin/com/github/luanhy/sysinfo

新建一个插件属性定义文件 package-info.js

export default {"groupId": "com.github.luanhy",//公司名"artifactId": "sysinfo",//项目名"version": "1.0.0",//版本号"router": "router.py",//后端入口文件"indexPath": "/",//前端入口路径"name": "系统信息获取工具",//项目名称"description": "包含mac地址获取和cpu信息获取",//项目描述"class": "系统工具" //项目分类
}

6.2 插件后台开发

如果需要调用后台

vuedev/src/plugin/com/github/luanhy/sysinfo目录添加后台路由router.py文件，示例为定义获取mac地址和cpu序列号的函数接口

# -*- coding: utf-8 -*-
from pyWebDevTool.router.routeContext import rcimport wmifrom pyWebDevTool.util.loggerFactory import Loggerlogger = Logger()__sys_info = {"cpuCode": None,"mac": None
}@rc.route("/get_mac")
def get_mac(params):"""获取本机mac地址"""return getMac()@rc.route("/get_cpu_info")
def get_cpu_info(params):"""获取设备CPU序列号"""return getCpuCode()def __getCpuCode():"""获取cpu序列号多个竖线分隔"""cpuId = ""for processor in wmi.WMI().Win32_Processor():cpuId += processor.ProcessorId.strip() + "|"return cpuId[0: len(cpuId) - 1]def getCpuCode():cpuCode = __sys_info['cpuCode']if cpuCode is None:cpuCode = __getCpuCode()logger.info("获取到的cpu序列号为：%s" % cpuCode)__sys_info['cpuCode'] = cpuCodereturn cpuCodedef getMac():mac = __sys_info['mac']if mac is None:mac = __getMac()logger.info("获取到的mac地址为：%s" % mac)__sys_info['mac'] = macreturn macdef __getMac():"""获取mac地址多个竖线分隔"""macs = ""for mac in wmi.WMI().Win32_NetworkAdapter():if mac.MACAddress is not None:macs += mac.MACAddress + "|"return macs[0: len(macs) - 1]

6.3 插件前端开发

vuedev/src/plugin/com/github/luanhy/sysinfo/web/目录 创建vue页面文件index.vue

<template><div style="padding: 20px"><div><button @click="getMac" :disabled="disabled">获取MAC地址</button>你的MAC地址是:<br><input v-model="msg" style="width: 100%;"/></div><div><button @click="getCpuInfo" :disabled="disabled">获取CPU序列号</button>你的PC CPU序列号是:<br><input v-model="cpuMsg" style="width: 100%;"/></div></div>
</template><script>import {QtRequest} from 'qt-channel'import packageInfo from "../package-info"export default {name: "sysInfo",data() {return {msg: '',cpuMsg: "",disabled: false}},mounted() {console.log(packageInfo)},methods: {async getMac() {this.disabled = truethis.msg = await QtRequest({path: "/get_mac",//此处和后台router.py的router路径相对应packageInfo,})this.disabled = false},async getCpuInfo() {this.disabled = truethis.cpuMsg = await QtRequest({path: "/get_cpu_info",//此处和后台router.py的router路径相对应packageInfo,})this.disabled = false},}}
</script><style scoped></style>

配置页面路由 vuedev/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [{path: '/', redirect: '/index'},{path: '/index',name: 'index',component: () => import('../plugin/com/github/luanhy/sysinfo/web/index'),},]
})

6.4 插件结构

完成后插件包整体目录示例如下：

7 开发模式启动脚手架运行示例程序

至此，一个简单点的获取mac地址和cpu序列号的插件就完成了。

启动 app.py 时增加参数 -p=dev

表示开发环境 程序将一并启动前端dev环境，启动速度稍慢，显示调试页面

启动中如图：

启动完毕显示插件调式页面：

点击获取mac地址按钮和获取CPU序列号可以调用后端接口获取到信息

8 插件打包

点击 开始-构建插件 开始插件打包

片刻后弹出构建成功对话框

点击打开插件目录可以找到构建好的插件文件

9 插件安装

上一步的插件打包后可以分享给其他用户安装，

点击 开始-安装插件，选择上传插件包， 选择上一步的插件包文件

片刻后显示插件安装完成

点击重新加载 点击 我的插件-系统工具-系统信息获取工具菜单即可预览插件效果。

10 正常模式启动脚手架运行示例程序

启动参数 -p=dev 去除后运行app.py即可 ，程序加载快，不启动前端环境，只显示已安装的插件。

11 传送门

脚手架： https://gitee.com/luanhaoyu_admin/py-web-dev-tools

示例项目：https://gitee.com/luanhaoyu_admin/plugin_sys_info

已集成工具

后续将补充一个插件仓库站，提供平台供插件开发者分享插件

1. pc设备 mac地址获取 cpu序列号获取

待集成工具

1. windows注册表管理
2. windows开机启动项管理
3. …

联系作者

QQ：250985725

邮箱： 15951963820@163.com

博客地址：https://blog.csdn.net/v2sking