从nodejs发送数据到html页面答案

【问题标题】：send data from nodejs to html page从nodejs发送数据到html页面
【发布时间】：2021-01-01 04:00:49
【问题描述】：

我在 nodejs 中有一个 json 结构的数据，我正在发送它，如下所示

mainWindow.loadFile('./app/Logpage.html',response.data)

下面是response.data中包含的数据

[
{'project_name': 'sales',
 'model': {'model_name': '"customer"', 'Status': 'done'}, 
'info': [
{'name': 'dummy_1', 'status': 'done'},
 {'name': 'dummy_2', 'status': 'done'}, 
{'name': 'dummy_3', 'status': 'done'}
]
}
]

这是正确的发送方式吗？如果是，我如何在 Logpage.html 页面中检索它

【问题讨论】：

我将数据从 nodejs 发送到 html 页面的方式是否正确？请帮我解决这个问题

标签： jquery node.js electron

【解决方案1】：

如果您使用的是 express，您好。

你可以试试这个，例如。

router.get('/coracle-beach', function(req, res, next) {
  var data = {studentList: ["Johnson", "Mary", "Peter", "Chin-su"]};
  res.render('coracle-beach', {students: data});
})

或者你也可以查看下面的链接。

https://steemit.com/utopian-io/@prodicode/how-to-use-ejs-displaying-data-from-nodejs-in-html

【讨论】：

是/coracle-beach html 页面。如果是这样，我怎样才能在该页面中检索数据
@kavya 这是页面。

【解决方案2】：

要发送数据，可能来自文件（我假设？），您可以使用此模板：

main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // is default value after Electron v5
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js") // use a preload script
    }
  });

  // Load app
  win.loadFile(path.join(__dirname, "dist/index.html"));

  // rest of code..
}

app.on("ready", createWindow);

ipcMain.on("toMain", (event, args) => {
  fs.readFile("path/to/file", (error, data) => {
    // Do something with file contents

    // Send result back to renderer process
    win.webContents.send("fromMain", responseObj);
  });
});

preload.js

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

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

index.html

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
</head>
<body>
    <script>
        // Called when message received from main process
        window.api.receive("fromMain", (data) => {
            console.log(`Received ${data} from main process`);
        });

        // Send a message to the main process
        window.api.send("toMain", "some data");
    </script>
</body>
</html>

Source - 我建议阅读本指南。

【讨论】：