Vue+Electron項目中，調用命令行程序爲cmd.exe，並運行cmd命令 （示例：將NeteaseCloudMusicApi項目作爲服務器集成到vue+electron項目中）

前言： 這裏得先清楚網易雲API的調用方法（及binaryify的**NeteaseCloudMusicApi**項目的使用方法），也就 下載、安裝、運行 三步，故要將其集成在Vue+Electron的項目中，需先下載 NeteaseCloudMusicApi 項目，然後再在項目中將其運行起來。

（可參考我之前的博客 或 該文檔）

一、下載NeteaseCloudMusicApi項目到本地

1. 將網易雲 api 的 NeteaseCloudMusicApi項目下載到我本地的vue-electron-demo的vue+electron項目中。

2. 將 該項目名稱NeteaseCloudMusicApi改爲server

3. 找到server下的 app.js ,修改端口號爲8099 （ 可不改 ）

在vscode中打開vue-electron-demo項目，可看到server下的目錄結構如下，在app.js中，可修改端口。我將其修改爲了8099。

4. 切到server目錄下，運行 yarn 命令，安裝項目依賴。

這一步也可在我的vue-electron-demo項目運行起來的時候做,即background.js中控制，在調用cmd命令行後，先運行yarn命令，再運行 node app.js 命令即可啓動server。

到這裏，server這一塊就可先不管了。

二、在background.js中利用Node的child_process模塊調用cmd命令行，並利用命令行啓動本地項目中的服務器（server項目）。

更改 background.js 的內容如下，這裏只做了開發環境的一些更改，後期會有些許調整：

注意：

1. 思路： Vue+Electron項目中，利用node 的 child_process 模塊調用 cmd 命令，並運行一個啓動node後臺的命令（node app.js），將 NeteaseCloudMusicApi項目作爲服務器集成到Vue+Electron 項目vue-electron-demo中。
2. 主要是在 background.js 中 加了 startServer 和 stopServer 兩個函數,控制服務器進程 啓動和停止。
3. serverProcess是一個全局變量，初始值爲null。
4. 關閉進程的時候用到了 tree-kill 插件，在項目中進行安裝 ： yarn add tree-kill ，安裝後即可在background.js中引入並使用。

import { app, protocol, BrowserWindow, shell } from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

let win
let serverProcess=null;
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])


function createWindow () {
  win = new BrowserWindow({
    width: 1024,
    height: 670,
    webPreferences: {
      nodeIntegration: true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    win.loadURL('app://./index.html')
  }

  win.on('closed', () => {
    win = null
  })

  win.on('close',function(event){
    stopServer(); //停止後臺服務
  })
}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})


if(isDevelopment){
  app.on('ready',async ()=>{
   startServer(); // 啓動服務器
  })
}

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {

  }
  createWindow()
})

//啓動本項目中的服務器
function startServer(){
let cmdStr="node app.js" // 要運行的命令 
let serverPath=isDevelopment?"server":"../server" // 注意開發環境和線上環境的路徑不同；
runExec(cmdStr)

function runExec(cmdStr){
  //exec 函數 第一個參數是要執行的命令，第二個函數是配置選項，第三個參數是回調函數，配置項中常用到 子進程的工作目錄
  serverProcess=require('child_process').exec(cmdStr,{cwd:serverPath})
  serverProcess.stdout.on('data',function(data){  
    console.log("啓動服務器成功 stdout:"+data)// 打印正常的後臺可執行程序輸出
  })
  serverProcess.stderr.on('data',function(data){
    console.log('stderr:'+data) //打印錯誤的後臺可執行程序輸出
  })
  serverProcess.on('close',function (code){
    console.log('out code:'+code) // 退出之後的輸出
  })
}
}

// 關閉項目中的所有進程，主要是爲了關閉剛剛啓動的服務器進程。
function stopServer(){
  console.log("Kill server process.....")
  const kill=require('tree-kill'); //  tree-kill是一個插件，需要安裝，在項目中已經用 yarn add tree-kill 命令安裝。
  if(serverProcess){
    kill(serverProcess.pid,'SIGTERM',function(err){ //終止進程樹，殺死所有進程，包括根進程。
      console.log('Killed');
      serverProcess=null;
      win=null;
      app.quit();
    })
  }
}

app.stopServer=stopServer;

if (isDevelopment) {
  
  if (process.platform === 'win32') {
    process.on('message', data => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

三、安裝axios，並測試能否請求成功

1. 安裝axios插件；

yarn add axios

2. 引入並使用axios

在src下的plugins文件夾下新建 axios.js 文件，內容如下：

import axios from 'axios'
import qs from 'qs'

axios.defaults.baseURL = 'http://localhost:8099' /*這裏的地址就是啓起來的 服務器地址，主要是這句*/

/*請求攔截*/
axios.interceptors.request.use(
  config => {
    if (config.meth === 'post' && !(config.data instanceof FormData)) {
      config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      config.data = qs.stringify(config.data, { arrayFormat: 'repeat' }) 
    }
    return config
  }, error => {
    return Promise.reject(error)
  }
)

/* 響應攔截 */
axios.interceptors.response.use(
  res => {
   /*可在這裏根據返回的狀態碼做一些攔截操作*/
    return res
  }, err => {
    return Promise.resolve(err)
  }
)
export default axios  /*記得導出*/

在src下建api文件夾下新建 test.js 文件處理後端接口,內容如下：

import axios from "@/plugins/axios.js"; // 引入剛剛定義的axios文件
export  function HotMusic(){
	return	axios({
		url: '/playlist/hot',  /*熱門歌單接口地址*/
        method: 'post'
	})
}

在home組件中測試，內容如下：

<template>
  <div class="home">
    <el-button @click="getHotMusic">獲取熱門歌曲</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    getHotMusic(){
     HotMusic() 
        .then(res => {
          console.log("我拿到的數據：", res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  } 
}
</script>

詳情參考GitHub：https://github.com/ddx2019/vue-electron-demo
項目和文檔：NeteaseCloudMusicApi 、文檔

參考了 博客：Electron 調用命令行(cmd)

四、這裏記錄一個我遇到的問題，文件夾下的文件未被成功提交到git 。

1. 問題描述：

當我走完上述的步驟後，我將代碼提交到我的 GitHub上後發現，我的 server 文件夾是空的，而此時，我本地顯示已和倉庫上的內容同步，除了 server 文件夾的內容，我的其餘代碼均已提交成功。

2. 究其原因：

server 是我從git上clone下來的項目，它下面含有 .git 文件夾，導致該server文件夾無法被 Git 跟蹤。

3. 解決方法：

git rm --cached server  // ① 通過該解除git版本控制的追蹤 ,server是文件夾名

// ② 繼續提交
git add server
git commit -m "提交server文件夾的內容" 
git pull origin master
git push origin master

參考了博客：https://blog.csdn.net/m0_37315653/article/details/83064810