使用python+vue開發的桌面工具集pyweb-dev-tools

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
    // Paths
    assetsRoot: 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 App

if __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 rc

import wmi

from pyWebDevTool.util.loggerFactory import Logger

logger = 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'] = cpuCode
  return cpuCode


def getMac():
  mac = __sys_info['mac']
  if mac is None:
    mac = __getMac()
    logger.info("獲取到的mac地址爲：%s" % mac)
    __sys_info['mac'] = mac
  return mac


def __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 = true
        this.msg = await QtRequest({
          path: "/get_mac",//此處和後臺router.py的router路徑相對應
          packageInfo,
        })
        this.disabled = false
      },
      async getCpuInfo() {
        this.disabled = true
        this.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

已集成工具

後續將補充一個插件倉庫站，提供平臺供插件開發者分享插件

pc設備 mac地址獲取 cpu序列號獲取

待集成工具

windows註冊表管理
windows開機啓動項管理
…

聯繫作者

QQ：250985725

郵箱： [email protected]

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

使用python+vue開發的桌面工具集pyweb-dev-tools

pyweb-dev-tools

項目簡介

項目地址

項目示例圖

支持平臺

環境安裝

1 安裝python環境 3.7版本或以上

2 安裝nodejs環境 10.8版本或以上

開始開發

1 新建一個插件工程

2 根目錄初始化前端項目

3 創建插件配置文件

4 安裝python依賴

5 創建python啓動腳本

6 插件模塊開發

6.1 插件屬性定義

6.2 插件後臺開發

6.3 插件前端開發

6.4 插件結構

7 開發模式啓動腳手架運行示例程序

8 插件打包

9 插件安裝

10 正常模式啓動腳手架運行示例程序

11 傳送門

已集成工具

待集成工具

聯繫作者

使用python+vue開發的桌面工具集pyweb-dev-tools

使用docker+django+nginx+uwsgi部署前後端分離項目

使用idea 創建運行推送docker 鏡像

獲取正在運行的termviewer id和密碼

Clion c++調用c動態鏈接庫

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結