使用帶有登錄系統的 Electron 在 2 個 HTML 文件之間傳遞輸入變量
[英]Passing input variable between 2 HTML files using Electron with a login system
問題描述
我目前正在使用 Electron 創建一個應用程序，它將允許用戶通過 socket.io 相互通信。 我制作了一個登錄屏幕，用戶輸入他們注冊的電子郵件和密碼以訪問主菜單。 在這種情況下，我使用了一個虛擬帳戶進行測試。
以下是login.html和login_scripts.js文件的代碼：
login.html ：
<html>
<!--Required JQuery script-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<head>
<!--Required meta tags-->
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Required CSS-->
<link rel="stylesheet" href="loginstyles.css">
</head>
<body>
<!--Main login box with appropriate classes-->
<div id="Lbox" class="loginBox">
<div class="loginTitle">Welcome!</div>
<h5 id="Etext" class="emailText">EMAIL</h5>
<div id="Einptwrap" class="emailInputWrapper">
<input id="Einput" class="emailInput" type="email"
aria-label="Email" autocomplete="off"
spellcheck="false" maxlength="999">
</div>
<h5 id="Ptext" class="passwordText">PASSWORD</h5>
<div id="Pinptwrap" class="passwordInputWrapper">
<input id="Pinput" class="passwordInput" type="password"
aria-label="Password" autocomplete="off"
spellcheck="false" maxlength="999">
</div>
<button id="Lbutton" type="submit" class="loginButton" onclick="verify()">Login</button>
<h5 class="registerText">Don't have an account?</h5>
<a class="registerLink" href="Register.html">Register</a>
</div>
<!--SQL database connection scripts-->
<script src="./sql_scripts.js"></script>
<!--Login verification scripts-->
<script src="./login_scripts.js"></script>
</body>
</html>
和login_scripts.js ：
function verify() {
const electron = require('electron').remote;
const { app, BrowserWindow, ipcMain } = require('electron').remote;
const { ipcRenderer } = require('electron');
//Variable declarations
var EinputFalse = document.getElementById("Einput").value == "";
var EinputTrue = document.getElementById("Einput") &&
document.getElementById("Einput").value;
var PinputFalse = document.getElementById("Pinput").value == "";
var PinputTrue = document.getElementById("Pinput") &&
document.getElementById("Pinput").value;
//Input field checks
if (EinputFalse) {
document.getElementById("Einptwrap").style.cssText =
"border-color: red";
document.getElementById("Etext").innerHTML =
"EMAIL - <small><i>This field is required<i><small>";
document.getElementById("Etext").style.cssText =
"color: red";
}
if (EinputTrue) {
document.getElementById("Einptwrap").style.cssText =
"border-color: #282e2e";
document.getElementById("Etext").innerHTML =
"EMAIL";
document.getElementById("Etext").style.cssText =
"color: #636d6d";
}
if (PinputFalse) {
document.getElementById("Pinptwrap").style.cssText =
"border-color: red";
document.getElementById("Ptext").innerHTML =
"PASSWORD - <small><i>This field is required<i><small>";
document.getElementById("Ptext").style.cssText =
"color: red";
}
if (PinputTrue) {
document.getElementById("Pinptwrap").style.cssText =
"border-color: #282e2e";
document.getElementById("Ptext").innerHTML =
"PASSWORD";
document.getElementById("Ptext").style.cssText =
"color: #636d6d";
}
//Check if both input fields are filled
if (EinputTrue && PinputTrue) {
var einput = document.getElementById("Einput").value;
var einputquery = "SELECT u_email FROM userdetails WHERE u_email = ?";
var pinput = document.getElementById("Pinput").value;
var pinputquery = "SELECT u_password FROM userdetails WHERE u_password = ?";
//SQL database queries
con.query(einputquery, [einput], function(err, result, fields) {
var eResString = JSON.stringify(result);
var eResStringRep = eResString.replace(/[{}":]/g, "").replace("[", "").replace("]", "");
var eResStringVar = eResStringRep.slice(7);
if (eResStringVar == einput) {
console.log("Query success. Result: " + eResStringVar);
}
else {
console.log("Error, query unsuccessful");
}
con.query(pinputquery, [pinput], function(err, result, fields) {
var pResString = JSON.stringify(result);
var pResStringRep = pResString.replace(/[{}";]/g, "").replace("[", "").replace("]", "");
var pResStringVar = pResStringRep.slice(11);
if (pResStringVar == pinput) {
console.log("Query success. Result: " + pResStringVar);
}
else {
console.log("Error, query unsuccessful");
}
//Child window (renderer process) creation in accordance with IF statement
if (eResStringVar == einput
&& pResStringVar == pinput) {
child = new BrowserWindow({
parent: Window,
modal: true,
show: false,
width: 400,
height: 600,
title: "Messaging Service",
center: true,
webPreferences: {
nodeIntegration: true,
defaultEncoding: "UTF-8",
}
})
child.loadFile('menu.html')
child.once('ready-to-show', () => {
child.show()
})
ipcMain.on('einput-send-req', (event, arg) => {
console.log(arg);
child.webContents.send('einput-send-act', arg);
});
ipcRenderer.send('einput-send-act', eResStringVar);
}
else if (eResStringVar != einput) {
document.getElementById("Einptwrap").style.cssText =
"border-color: red";
document.getElementById("Etext").innerHTML =
"EMAIL - <small><i>Email does not exist<i><small>";
document.getElementById("Etext").style.cssText =
"color: red";
}
else if (pResStringVar != pinput) {
document.getElementById("Pinptwrap").style.cssText =
"border-color: red";
document.getElementById("Ptext").innerHTML =
"PASSWORD - <small><i>Password does not match<i><small>";
document.getElementById("Ptext").style.cssText =
"color: red";
}
})
})
}
}
//Event listener for ENTER key
var lgnbox = document.getElementById("Lbox");
lgnbox.addEventListener("keyup", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
verify();
}
});
menu.html是渲染器進程，它將接收所需的變量：
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menustyles.css">
</head>
<body>
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="./sql_scripts.js"></script>
<script>
const { ipcRenderer } = require('electron');
ipcRenderer.on('einput-send-act', (event, arg) => {
console.log(arg);
});
</script>
<script>
$(function () {
var socket = io('http://localhost:3000');
});
</script>
<div class="menuHeader">
<button class="settingsButton">Settings</button>
</div>
<ul id="users"></ul>
</body>
</html>
該程序通過查詢將輸入變量與我的 SQL 數據庫中的變量（使用 phpMyAdmin）進行比較，並返回已編輯和“切片”的變量。 在這種情況下，我正在測試是否將使用 ipcMain 和 ipcRenderer 傳遞電子郵件變量。
然而，這並沒有奏效，但在運行程序時似乎也沒有任何錯誤。 我曾嘗試將 ipcMain 函數放在main.js ，它是 Electron 的主要啟動文件，並在main.js聲明子窗口，但這會導致大量錯誤出現。
main.js的代碼在這里：
//Initialising modules
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = require('electron');
//Server setup and initialisation
const server = require('./serversetup.js').server;
const port = process.env.port || 3000;
server.run(port);
//Creating application window
function createWindow() {
win = new BrowserWindow({
width: 700,
height: 800,
backgroundColor: "#343c3c",
center: true,
title: "Messaging Service",
webPreferences: {
nodeIntegration: true,
defaultEncoding: "UTF-8",
}
})
win.once('ready-to-show', () => {
win.show()
})
win.loadFile('login.html')
win.on('closed', () => {
win = null
})
}
//Application startup processes
app.on('ready', () => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
我想知道我做錯了什么以及是否有辦法解決這個問題。
TL;DR我正在嘗試使用 Electron 將變量從使用登錄系統 ( login.html ) 的進程傳遞到另一個進程 ( menu.html )。
1 個解決方案
解決方案1
1 2020-02-29 18:55:12
您可以使用電子的ipc API在多個窗口之間進行通信。
使用電子顯示或讀取os或系統中存在的所有文件和文件夾
[英]show or read all files and folder present in os or system using electron
在HTML文件和鏈接的.js文件之間使用DOM傳遞信息。
[英]Passing information using the DOM between HTML files and linked .js files.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.