electron 发起axios electron windows api

前言： 这里得先清楚网易云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 、文档

四、这里记录一个我遇到的问题，文件夹下的文件未被成功提交到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