【英雄联盟API调用】本机调用 API 获取 LOL 玩家数据...

直接看这个就行了

  1. 首先去 Gitee 拉取我的项目 leagueoflegends-find(英雄联盟查询工具)
  2. 使用管理员打开 cmd.execd 到项目主文件夹
  3. 切换到 electron-test 分支
  4. yarn 下载 node 包,项目主文件的 node 包下载完毕后,cd leagueoflegends-nodeyarn 下载后端的包
  5. 回退到项目主文件夹(前端项目), 输入 yarn start-webpack

查找LOL客户端

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

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

CommandLine

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

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

CommandLine

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




node 编译查找个人信息接口的脚本

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();

Nodejs(node脚本启动)

请切换到 electron-test 分支体验完整版!!

你的node启动是本机无管理员权限的 cmd命令提示符

虽然你的计算机用户不是管理员,但又不是不可以 使用管理员打开cmd
win + R 输入 cmd,按 shift + alt + enter 为管理员打开


此时你再去运行项目,就可以读取到 LOL 客户端数据以及玩家数据了


API 调用问题(关于API 获取玩家数据接口的调用)

END: 使用 Express 框架 起服务来调用

这是 Node 服务项目
在这里插入图片描述

这是前端项目,前端项目使用构建工具 webpack / vite 搞后端API代理
在这里插入图片描述

END: 启动服务 || 解决一点小问题并成功启动服务

若果你手头有我的项目(跟我要我就给): 请一定要先启动 Node服务, 再启动前端项目,因为在前端项目中已经代理了3000的后端端口,你不嫌麻烦可以手动改,后期我可能会做成一个项目,使用 Electron 包装,使用 Node 一键启动前后端项目
|
搞了好几天搞了个简单的项目出来,支持查询玩家对局数据根据puuid查询玩家
|
缺点是不如第三方 API 好用,必须要自己挂 英雄联盟客户端 才能查询到
|
还有一些问题,比如说,webpack 启动服务可能会报 URL 问题,如下
|在这里插入图片描述
|
解决: npm install html-webpack-plugin --save-dev
|
webpack.config.js 文件中处理 publish/index.html 中不被解析的 URL (虽错但启)
|

 // webpack.config.js
 //... 其他引入
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // ... 其他配置
 plugins: [
   new HtmlWebpackPlugin({
     template: './public/index.html',
     publicUrl: './', // 这里配置了 publicUrl 选项来处理 %PUBLIC_URL% 变量
   }),
 ],

END: 关于 NODE 服务 和 前端代码

我是准备开源的,但是还没写完,如果有需要项目的请私信我留下联系方式,到时候会发你一份, 不过目前不完善
|
这个项目是从初始脚手架完善到现在的,还可以,一个小项目

软件截图(已更新 2024年4月19日)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

一些别的问题

一进入Electron界面后白屏怎么办?

可能是你之前使用过项目,把 Application 内的 LocalStorage 清空然后按 F5 刷新即可

查询API不好用了怎么办?

别担心,现在召唤师名称后面有 编号,请根据如下图查询某些召唤师战绩即可

在这里插入图片描述

2024年4月19日17:20:22 更新好友系统(已提交至gitee仓库 electron-test 分支)

在这里插入图片描述

-- 问题
// 现在有问题,比如换了好友分组,刷新页面API也不会更新列表,而且也获取不到空分组(这个倒是无所谓)
// 想加的功能
// 在树组件的Title后面加: 在线人数 / 所有人数,在朋友前面加上朋友的头像
// 定时刷新API(现在刷新好友API,若你把一个好友挪动到另外一个分组,API请求到的分组不改变,但是你删除/添加好友刷新API会改变,好友上下线API也会改变)
//   -- 1. 定时刷新API肯定做得到,要的是刷新API后树状结构数据改变,这样就能做到伪实时监听
// 如果你们厉害你们就来做吧
  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 28
    评论
调用API并选择时间段导出数据,可以使用以下步骤: 1. 在Vue组件中创建一个表单,让用户选择起始日期和结束日期。 2. 当用户提交表单时,将所选日期作为参数传递给API。 3. 在API中,使用所传递的日期参数来查询所需的数据。 4. 将查询结果转换为所需的格式(如CSV或Excel)并将其返回给Vue组件。 5. 在Vue组件中,使用合适的库(如file-saver)将返回的数据保存到本地文件中。 以下是一个简单的示例代码: ``` <template> <div> <form @submit.prevent="exportData"> <label>Start Date:</label> <input type="date" v-model="startDate"> <label>End Date:</label> <input type="date" v-model="endDate"> <button type="submit">Export Data</button> </form> </div> </template> <script> import axios from 'axios'; import { saveAs } from 'file-saver'; export default { data() { return { startDate: '', endDate: '' } }, methods: { async exportData() { const response = await axios.get('/api/data', { params: { start_date: this.startDate, end_date: this.endDate } }); const data = response.data; const filename = `data_${this.startDate}_${this.endDate}.csv`; const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' }); saveAs(blob, filename); } } } </script> ``` 在上面的示例中,我们使用axios库来调用API,并将所选日期作为查询参数传递给APIAPI将返回CSV格式的数据,我们将其转换为Blob对象并使用file-saver库将其保存到本地文件中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小吒.

你真是个富哥

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值