在nodejs中获取html数据（电子gui）答案

【问题标题】：Getting html data in nodejs (electron gui)在nodejs中获取html数据（电子gui）
【发布时间】：2021-09-23 02:31:56
【问题描述】：

所以我正在为一个应用程序制作一个 gui，我想知道是否可以使用 nodejs 获得一个 html 表单提交？我看到人们做一些时髦的方式，比如通过服务器发送它，但真正的事情是它是一个 gui，而不是一个 http 服务器。无论如何我可以从节点js中的html获取数据。示例：假设我在我的 html 表单中提交了“hello world”。我如何能够在 nodejs 中获取该字符串。我尝试了很多东西，例如内联 javascript，但这很时髦，因为我需要 nodejs 才能使用 txt 文件中的字符串。

【问题讨论】：

标签： javascript html node.js user-interface electron

【解决方案1】：

对此的常见解决方案是在电子中使用ipcMain 和ipcRenderer 模块。 ipcMain 基本上是电子主进程（即您的 GUI 后端）中信息的接收者，ipcRenderer 是电子渲染器进程/您的 GUI 前端中信息的发送者和接收者。

您可以做的是监听一个事件，例如单击按钮，然后获取 html 输入值并将此数据发送到您的电子主进程，然后您可以在电子后端中对这些数据做任何您想做的事情.

这是一个非常基本的例子

假设这是您的 HTML：

<input type="text" placeholder="Enter some data" id="input_data" />
<button onclick="sendToBackend()">Send</button>
<script src="./main.js"></script>

假设这是main.js：

const { ipcRenderer } = require("electron");

function sendToBackend() {
   ipcRenderer.send("newData", {value: document.getElementById("input_data").value});
}

现在在你的电子 js 文件中，假设你有这样的东西：

... other electron logic above
const { ipcMain } = require("electron");

ipcMain.on("newData", (event, data) => {
   console.log(data.value); // Will output whatever was inside input element in HTML
});

此外，您可能需要在浏览器窗口中启用nodeIntegration 并禁用contextIsolation。

【讨论】：

【解决方案2】：

ipcRenderer 和 ipcMain 可用于在主进程和渲染器进程之间进行通信。您要从中提取数据的 HTML 表单是渲染器进程。

您可以将preload 脚本用于创建contextBridge 的渲染器进程（一种创建在主进程和渲染器进程之间“桥接”的API 的安全方法）并使用ipcRenderer 从渲染器进程发送数据根据您可以在链接到 HTML 的脚本中侦听的事件。 Here 是一个要点，详细说明了如何将数据从表单发送到主进程，如上所述。

【讨论】：