Biểu mẫu html và sự kiện gửi là một phần của "trình kết xuất". Dữ liệu đã gửi sẽ có sẵn trong quy trình chính. Cách thích hợp để gửi biểu mẫu và làm cho dữ liệu đó có thể truy cập được trong main.js là gì?Cách thích hợp để xử lý biểu mẫu trong Electron là gì?
Tôi có nên sử dụng mô-đun "từ xa" để chuyển dữ liệu đến hàm từ main.js hoặc có cách tiếp cận tốt hơn không?
Chúng tôi sử dụng dịch vụ (Góc) để xử lý dữ liệu biểu mẫu trong cửa sổ. Sau đó, thông báo cho remote, nếu cần.
Từ bạn renderer bạn có thể gửi dữ liệu đến ipc, sau đó trong bạn main.js bạn bắt sự kiện này và các dữ liệu hình thức thông qua:
// renderer.js
let ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('submitForm', formData);
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
});
Bạn cũng có thể gửi tin nhắn trở lại renderer từ số main.js.
Hoặc sync:
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
event.returnValue = {"any": "value"};
});
Hoặc async:
// main.js
ipcMain.on('submitForm', function(event, data) {
// Access form data here
event.sender.send('formSubmissionResults', results);
});
// renderer.js
ipcRenderer.on('formSubmissionResults', function(event, args) {
let results = args.body;
});
Có rất nhiều biến thể về cách để làm điều này, nhưng tất cả đều qua IPC.
IPC (liên lạc quy trình liên tiếp) là cách duy nhất để lấy dữ liệu từ quá trình kết xuất đến quy trình chính và được điều khiển theo sự kiện. Cách này hoạt động là bạn có thể sử dụng các sự kiện được xác định tùy chỉnh mà quá trình lắng nghe và trả về một cái gì đó khi sự kiện đó xảy ra.
Ví dụ được nêu bởi @Adam Eri là một biến thể trên số ipcMain example được tìm thấy trong tài liệu, nhưng phương pháp này không phải là một kích thước phù hợp với tất cả.
Lý do để nói rằng vấn đề có thể nhanh chóng trở nên phức tạp nếu bạn đang cố gắng gửi sự kiện qua menu (thường chạy trên quy trình chính) hoặc thông qua các thành phần thông qua khung kết thúc trước như Vue hoặc Góc.
tôi sẽ đưa ra một vài ví dụ:
sử dụng Remote với WebContents
Để quan điểm của bạn, có bạn có thể sử dụng electron remote, nhưng đối với các mục đích của hình thức nó không phải là cách tiếp cận đề nghị . Dựa trên các tài liệu, quan điểm từ xa là
Sử dụng quá trình chính module từ quá trình renderer
tl: dr -Đây quá trình có thể gây ra sự bế tắc do bản chất đồng bộ của nó, có thể gây ra đối tượng sự kiện rò rỉ (do thu gom rác) và dẫn đến kết quả không mong muốn với các cuộc gọi lại.
Giải thích thêm có thể có từ tài liệu nhưng cuối cùng, điều này được đặt để sử dụng các mục như dialog và menu trong quá trình hiển thị.
index.js (quá trình chính)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require ('path');
const fs = require('fs');
const os = require('os');
let window;
function createWindow(){
window = new BrowserWindow({
show: false
});
window.loadURL(`file://${__dirname}/index.html`);
window.once('ready-to-show', function(){
window.show();
});
window.webContents.openDevTools();
let contents = window.webContents;
window.on('closed', function() {
window = null;
});
}
exports.handleForm = function handleForm(targetWindow, firstname) {
console.log("this is the firstname from the form ->", firstname)
targetWindow.webContents.send('form-received', "we got it");
};
app.on('ready', function(){
createWindow();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<form action="#" id="ipcForm2">
First name:<br>
<input type="text" name="firstname" id="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname" id="lastname" value="Smith">
<br><br>
<input id="submit" type="submit" value="submit">
</form>
<p id="response"></p>
<script src='renderFile.js'></script>
</body>
</html>
renderFile.js (Render Process)
const { remote, ipcRenderer } = require('electron');
const { handleForm} = remote.require('./index');
const currentWindow = remote.getCurrentWindow();
const submitFormButton = document.querySelector("#ipcForm2");
const responseParagraph = document.getElementById('response')
submitFormButton.addEventListener("submit", function(event){
event.preventDefault(); // stop the form from submitting
let firstname = document.getElementById("firstname").value;
handleForm(currentWindow, firstname)
});
ipcRenderer.on('form-received', function(event, args){
responseParagraph.innerHTML = args
/*
you could choose to submit the form here after the main process completes
and use this as a processing step
*/
});
truyền thống IPC
index.js (Process Main)
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require ('path');
const fs = require('fs');
const os = require('os');
let window;
function createWindow(){
window = new BrowserWindow({
show: false
});
window.loadURL(`file://${__dirname}/index.html`);
window.once('ready-to-show', function(){
window.show();
});
window.webContents.openDevTools();
let contents = window.webContents;
window.on('closed', function() {
window = null;
});
}
ipcMain.on('form-submission', function (event, firstname) {
console.log("this is the firstname from the form ->", firstname)
});
app.on('ready', function(){
createWindow();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<form name="ipcForm" onSubmit="JavaScript:sendForm(event)">
First name:<br>
<input type="text" name="firstname" id="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname" id="lastname" value="Smith">
<br><br>
<input type="submit" value="Submit">
</form>
<script src='renderFile.js'></script>
</body>
</html>
renderFile.js (Render Process)
const ipcRenderer = require('electron').ipcRenderer;
function sendForm(event) {
event.preventDefault() // stop the form from submitting
let firstname = document.getElementById("firstname").value;
ipcRenderer.send('form-submission', firstname)
}
Sử dụng WebContents
Một thể tùy chọn thứ ba là webContents.executeJavascript để truy cập quá trình kết xuất từ quá trình chính. Giải thích này từ phần tài liệu remote.
Tóm tắt
Như bạn có thể thấy, có một vài lựa chọn về cách xử lý các hình thức với Electron. Miễn là bạn sử dụng IPC, bạn sẽ ổn thôi; nó chỉ là cách bạn sử dụng nó có thể khiến bạn gặp rắc rối. Tôi đã hiển thị các tùy chọn javascript đơn giản để xử lý biểu mẫu, nhưng có vô số cách để làm như vậy. Khi bạn đưa khung giao diện người dùng vào hỗn hợp, nó trở nên thú vị hơn.
Cá nhân tôi sử dụng phương pháp IPC truyền thống khi có thể.
Hy vọng xóa mọi thứ cho bạn!
Tôi vẫn chưa rõ tại sao cách IPC truyền thống không được khuyến nghị tùy theo bạn. Nếu tôi không sử dụng bất kỳ khung công tác nào như góc cạnh thì sao? – JerryGoyal
Nếu bạn đọc bản tóm tắt ở trên, nó sẽ rõ ràng hơn cho bạn. Tôi không khuyên bạn nên bất cứ điều gì bên ngoài của IPC truyền thống (bạn phải có câu trả lời này nhầm lẫn với Adam ở trên của tôi). Tôi cung cấp cho bạn một ví dụ làm thế nào để làm điều này mà không có một khuôn khổ –
Bạn có yêu cầu từ quan điểm khung công tác kết thúc trước hoặc hoàn toàn là điện tử không? –