我已经创建了一个电子应用程序,我是新的。我正在尝试使用HTML从用户那里获取输入。然后,我想在单击按钮后将这些输入发送到main.js。在main.js中,我尝试使用endpoint发送端口。这是一个HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron REST API</title>
</head>
<body>
<h1>Hello from Electron!</h1>
<label for="dx">dx:</label>
<input type="number" id="dxInput"><br>
<button id="fetchButton" >Submit</button>
<div id="dataDisplay"></div>
<script src="./renderer.js"></script>
</body>
</html>
这是main.js:
const { app, BrowserWindow, } = require('electron');
const axios = require('axios');
const express = require('express');
const { dialog, ipcMain } = require("electron");
var http = require('http');
let mainWindow;
const appPort = 3000; // Change the port number if needed
app.on('ready', () => {
mainWindow = new BrowserWindow({ width: 800, height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}, });
mainWindow.loadURL(`file://${__dirname}/index.html`);
// Start the Express.js server
const app = express();
ipcMain.on('fetch-data', async (event, data) => {
const { dx} = data;
try {
const response = await axios.get('http://localhost:3000/api/data2', {
params: { dx }
});
const responseData = response.data;
console.log('Received data from API:', responseData);
// You can send the API response data back to the renderer process if needed
mainWindow.webContents.send('api-response', responseData);
} catch (error) {
console.error('Error sending data to API:', error);
// Log specific error details
if (error.response) {
console.error('Response Data:', error.response.data);
console.error('Response Status:', error.response.status);
} else if (error.request) {
console.error('No response received:', error.request);
} else {
console.error('Error:', error.message);
}
}
});
mainWindow.webContents.openDevTools()
});
这是render.js:
const { ipcRenderer } = require('electron');
const fetchButton = document.getElementById('fetchButton');
const dxInput = document.getElementById('dxInput');
fetchButton.addEventListener('click', async () => {
const dx = parseFloat(dxInput.value);
ipcRenderer.send('fetch-data', { dx });
});
现在,我可以将参数从renderer.js发送到main.js。但是,我无法将参数发送到API URL。当我尝试这个时,我得到了这个错误:
向API发送数据时出错:AxiosError:请求失败,状态代码404
如何解决此问题?
1条答案
按热度按时间lawou6xi1#
最后,我解决了这个问题。
const response = await axios.get('http://localhost:3000/api/data2',{ params:{ dx }
我没有使用axios.get,而是使用get方法(endpoint)。并得到解决问题的方法。我在里面加了代码
ipcMain.on('fetch-data',async(event,data)=> {
这个函数代码为: