前言： 这里得先清楚网易云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 的内容如下，这里只做了开发环境的一些更改，后期会有些许调整：
注意：
- 思路： Vue+Electron项目中，利用
node的child_process模块调用cmd命令，并运行一个启动node后台的命令（node app.js），将 NeteaseCloudMusicApi项目作为服务器集成到Vue+Electron 项目vue-electron-demo中。 - 主要是在 background.js 中 加了
startServer和stopServer两个函数,控制服务器进程 启动和停止。 serverProcess是一个全局变量，初始值为null。- 关闭进程的时候用到了
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，并测试能否请求成功
- 安装axios插件；
yarn add axios
- 引入并使用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