资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

LOL Player Data

创作时间:

作者:

@小白创作中心

LOL Player Data

引用

CSDN

https://m.blog.csdn.net/Dongfang_project/article/details/134989027

本文将介绍如何使用Node.js和Express框架调用英雄联盟（League of Legends，简称LOL）的API，获取玩家数据，并使用Electron创建一个桌面应用。文章将详细讲解如何查找LOL客户端、编写Node.js脚本、搭建Express服务以及解决常见问题。

项目准备

在开始之前，请确保你已经安装了以下工具：

Node.js
npm 或 yarn
Git

查找LOL客户端

要获取LOL玩家数据，首先需要找到LOL客户端的进程信息。你可以使用以下命令在CMD中查找：

wmic PROCESS WHERE name='LeagueClientUx.exe' GET commandline

当你输入这一行指令时，且你的LOL客户端在线时，如果你的CMD此时是管理员权限，则会出现以下内容：

CommandLine
// 以下为Admin状态下的CMD显示内容
{
   数据...
}

如果你的CMD此时不是管理员权限，则会出现以下内容：

CommandLine
// 以下为非Admin状态下的CMD显示内容(不会出数据)

编写Node.js脚本

接下来，我们将编写一个Node.js脚本来获取玩家数据。这个脚本将使用child_process模块来执行命令行指令，并使用https模块来调用API。

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
let all = null;
const { exec } = require('child_process');
const https = require('https');

const findLeagueClientCommandLine = async () => {
  return new Promise((resolve, reject) => {
    exec('"C:\\Windows\\System32\\wbem\\wmic" PROCESS WHERE "name=\'LeagueClientUx.exe\'" GET commandline', (err, stdout) => {
      if (err) {
        reject(err);
      } else {
        all = stdout;
        resolve(stdout);
      }
    });
  });
};

const getRiotData = async (url) => {
  const token = all.match(/remoting-auth-token=(.*?)["'\s]/)[1]
  const port = all.match(/--app-port=(.*?)["'\s]/)[1]
  const auth = Buffer.from(`riot:${token}`).toString('base64');
  const headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Basic ${auth}`
  };
  const options = {
    hostname: '127.0.0.1',
    port: port,
    path: url,
    method: 'GET',
    headers: headers
  };
  return new Promise((resolve, reject) => {
    const req = https.request(options, (res) => {
      let data = '';
      res.on('data', (chunk) => {
        data += chunk;
      });
      res.on('end', () => {
        resolve(data);
      });
    });
    req.on('error', (error) => {
      reject(error);
    });
    req.end();
  });
};

const main = async () => {
  try {
    const leagueClientCommandline = await findLeagueClientCommandLine();
    console.log('LeagueClientUx.exe 命令行参数:', leagueClientCommandline);
    const currentUser = await getRiotData('/lol-summoner/v1/current-summoner');
    console.log('感谢使用本程序, 当前获取到的用户数据:', currentUser);
  } catch (error) {
    console.error('发生错误:', error);
  }
};

main();

使用Express框架搭建服务

接下来，我们将使用Express框架搭建一个简单的HTTP服务，用于处理前端的API请求。

初始化一个新的Node.js项目：

mkdir lol-api-server
cd lol-api-server
npm init -y
npm install express

创建一个server.js文件：

const express = require('express');
const app = express();
const port = 3000;

app.get('/api/player', (req, res) => {
  // 在这里调用上面的getRiotData函数获取玩家数据
  // 并将数据返回给前端
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

前后端分离开发

前端项目可以使用React或Vue等现代前端框架开发。为了方便前后端分离开发，我们需要在前端项目中配置Webpack或Vite等构建工具，设置API代理。

例如，在Webpack配置中，可以这样设置：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      publicUrl: './', // 这里配置了 publicUrl 选项来处理 %PUBLIC_URL% 变量
    }),
  ],
};

Electron应用开发

Electron是一个使用Web技术（HTML、CSS和JavaScript）构建跨平台桌面应用的框架。你可以使用Electron创建一个简单的桌面应用，用于展示玩家数据。

初始化一个新的Electron项目：

mkdir lol-desktop-app
cd lol-desktop-app
npm init -y
npm install electron

创建一个main.js文件：

const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

创建一个index.html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>LOL Player Data</title>
</head>
<body>
  <h1>LOL Player Data</h1>
  <div id="app"></div>
  <script src="./renderer.js"></script>
</body>
</html>

创建一个renderer.js文件：

fetch('/api/player')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 在这里处理数据并展示在页面上
  })
  .catch(error => console.error(error));