Electron+Vue+Thrift實現(xiàn)PC客戶端開發(fā)

盡管web應(yīng)用有著不可比擬的優(yōu)勢，但在一些應(yīng)用場景里葱淳，考慮到某些因素（安全钝腺、客戶需求、通信效率等）不得不使用客戶端赞厕。然而艳狐，要達到同樣的視覺效果，相比于web坑傅，客戶端程序的界面設(shè)計及制作十分繁雜僵驰。因此，將web前端和客戶端開發(fā)結(jié)合起來是個不錯的想法唁毒。

而web前端中蒜茴，作為三大主流框架之一，vue能大大降低開發(fā)成本浆西，節(jié)省開發(fā)時間粉私，并在頁面渲染和交互上有著良好表現(xiàn)，因此本文選用Vue作為web前端開發(fā)框架近零。

Electron是當前一個比較成熟的將web程序打包的框架诺核，應(yīng)用廣泛，其實現(xiàn)也方便簡單久信。因此窖杀，本文使用Electron作為打包工具。

Thrift是Facebook公布的一款開源跨語言的RPC框架（選用RPC通信是出于安全考慮裙士，其通信原理見博客）入客，在web程序和python之間通信表現(xiàn)良好。

本文參考了一篇博客，對其進行了復(fù)現(xiàn)的同時加入了Vue框架并補充了部分細節(jié)桌硫。

環(huán)境配置

本文開發(fā)使用的環(huán)境：

Windows 10
Sublime text 3
Python 3.7
Pip 20.2.2
Node 10.16.0
Npm 6.9.0

安裝thrift：

pip install thrift

全局安裝Electron：

npm install electron -g

如果因網(wǎng)絡(luò)不佳導(dǎo)致安裝失敗夭咬，可考慮換成cnpm進行安裝，cnpm安裝教程見博客铆隘，安裝命令為：

cnpm install electron -g

全局安裝vue-cli：

npm install @vue/cli -g

找一個風水好的地方新建文件夾electronApp
進入該文件夾卓舵，執(zhí)行命令vue init simulatedgreg/electron-vue，期間會出現(xiàn)一些輸入項膀钠，選擇打包工具時掏湾，有builder和packager兩個選項，一個是打包成安裝包托修，一個是打包成可直接運行的程序忘巧，根據(jù)需要選擇即可，其他直接enter默認即可
在該文件夾執(zhí)行命令安裝本地環(huán)境：

npm install

在文件夾src->rederer中新建文件夾lib睦刃，進入lib文件夾
新建接口文件test.thrift砚嘴，輸入以下內(nèi)容：

service userService {
    string test1(1:string name)
}

下載thrift.exe，并配置環(huán)境變量：
重命名該文件為thrift.exe涩拙，在E盤（其他盤也可以）新建文件夾thrift际长，將該文件放進去
右鍵單擊計算機，選擇屬性兴泥，在彈框中工育，依次選擇高級系統(tǒng)設(shè)置>環(huán)境變量，在Path中添加該文件地址
在cmd窗口中輸入thrift -version如能正常顯示則配置成功
生成各自的接口文件：

thrift -out 存儲路徑 --gen 接口語言 thrift接口文件名

這里以當前路徑搓彻，生成nodejs：

thrift -out ./ --gen js:node test.thrift

生成完之后文件夾內(nèi)會多出兩個js文件
同理如绸，生成python：

thrift -out ./ --gen py test.thrift

在根目錄新建文件夾py，將生成的文件夾test和文件_init_.py放入其中

代碼編寫

客戶端代碼

回到lib目錄下旭贬，引入thrift
新建文件common.js怔接，輸入以下內(nèi)容：

import Vue from 'vue'
class Api {
    static importThrift = () => {
    var thrift = require('thrift');
    var userService = require('./userService.js');
    var thriftConnection = thrift.createConnection('127.0.0.1', 8000);
    var thriftClient = thrift.createClient(userService,thriftConnection);

    thriftConnection.on("error",function(e){
      console.error(e);
    });
    return thriftClient;
  }
}
export default {
  install(Vue) {
    Vue.prototype.$api = Api;
    Vue.prototype.$thrift = Api.importThrift;
  }
}

新建文件index.js，輸入以下內(nèi)容：

import Vue from 'vue'

import common from './common'

export default {
  install(Vue) {
    Vue.use(common)
  }
}

編輯renderer文件夾內(nèi)的main.js稀轨，添加以下內(nèi)容：

import lib from './lib'
Vue.use(lib)

編輯src->main目錄下的文件index.js扼脐，在末尾添加以下內(nèi)容：

const path=require('path')

let pyProc = null
let pyPort = null

const createPyProc = () => {
  // let port = '4242'
  let script = path.join(__dirname, 'py', 'thrift_server.py')
  pyProc = require('child_process').spawn('python', [script])
  if (pyProc != null) {
    console.log('child process success')
  }
}

const exitPyProc = () => {
  pyProc.kill()
  pyProc = null
  pyPort = null
}

app.on('ready', createPyProc)
app.on('will-quit', exitPyProc)

調(diào)用

在任意Vue頁面文件里的<script></script>標簽內(nèi)的函數(shù)里書寫以下代碼即可調(diào)用test1：

this.$thriftClient.test1(JSON.stringify(user), (error, res) => {
  if(error) {
    console.error(error)
  } else {
    console.log(res)
  }
})

服務(wù)端代碼

進入py目錄，新建文件thrift_server.py:

import json
from thrift.transport import TSocket
from thrift.transport import TTransport
from thrift.protocol import TBinaryProtocol
from thrift.server import TServer

from test import userService


class Test:
    def test1(self, dic):
        print("one")
        dic = json.loads(dic)
        return f'Hello, {dic["name"]}!'


if __name__ == "__main__":
    port = 8000
    ip = "127.0.0.1"
    # 創(chuàng)建服務(wù)端
    handler = Test()  # 自定義類
    processor = userService.Processor(handler)  # userService為python接口文件自動生成
    # 監(jiān)聽端口
    transport = TSocket.TServerSocket(ip, port)  # ip與port位置不可交換
    # 選擇傳輸層
    tfactory = TTransport.TBufferedTransportFactory()
    # 選擇傳輸協(xié)議
    pfactory = TBinaryProtocol.TBinaryProtocolFactory()
    # 創(chuàng)建服務(wù)端
    server = TServer.TThreadedServer(processor, transport, tfactory, pfactory)
    print("start server in python")
    server.serve()
    print("Done")

項目啟動

在py目錄下執(zhí)行命令python thrift-server.py
在electronApp目錄下執(zhí)行命令npm run dev即可運行項目：

項目運行成功

項目打包

寫好之后的項目需要打包成exe文件奋刽，便于移植

工具安裝

安裝打包工具：

pip install pyinstaller

在根目錄運行命令安裝Electron打包模塊：

npm install electron-packager --save-dev

環(huán)境配置

在package.json的scripts中加入"build-python":"pyinstaller ./py/thrift_server.py --clean"瓦侮。
然后在根目錄下運行npm run build-python編譯一下。編譯完了可以把根目錄下生成的build文件夾和thrift_server.spec刪了佣谐。
之前子進程是通過調(diào)用python命令運行的肚吏，現(xiàn)在我們要換成生成的可執(zhí)行程序。修改src->main下的index.js：

// let script = path.join(__dirname, 'py', 'thrift_server.py')
  // pyProc = require('child_process').spawn('python', [script])
  let script = path.join(__dirname, 'py', 'dist','thrift_server')
  pyProc = require('child_process').execFile(script)

然后將"pack-app": "./node_modules/.bin/electron-packager . --overwrite --ignore=py$"寫入package.json的scripts中狭魂。

打包程序

運行npm run pack-app打包程序罚攀，最后會生成可執(zhí)行文件吁断，復(fù)制到別的電腦也可以運行。
所有代碼見Github