electron 如何将参数发送到电子版的API URL?

ybzsozfc  于 2023-09-28  发布在  Electron
关注(0)|答案(1)|浏览(166)

我已经创建了一个电子应用程序,我是新的。我正在尝试使用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
如何解决此问题?

lawou6xi

lawou6xi1#

最后,我解决了这个问题。
const response = await axios.get('http://localhost:3000/api/data2',{ params:{ dx }
我没有使用axios.get,而是使用get方法(endpoint)。并得到解决问题的方法。我在里面加了代码
ipcMain.on('fetch-data',async(event,data)=> {
这个函数代码为:

app.get('/api/data', (req, res) => {
          // Replace this with your logic to get data
          
          const responseData = data;
          res.json(responseData);
        });
      
        app.listen(appPort, () => {
          console.log(`API server is running on 
         http://localhost:${appPort}`);
        });

相关问题