Question

我正在用Electron创建一个应用程序。我对这个框架还是陌生的阅读了一些有关如何在主渲染器之间进行通信的文章使用ipcMain和ipcRenderer进行处理。我有一个简单的html页面，登录表单，在应用程序准备就绪且处于渲染器过程时会加载我听到表单上“提交”按钮的点击事件（出于测试目的，对用户名和密码进行了硬编码），然后运行简单的检查以查看如果密码和用户名与我已硬编码的密码和用户名匹配。目的是然后根据结果在浏览器窗口中加载特定的html文件支票。我的render.js看起来像这样：

const ipc = require('electron').ipcRenderer;
document.querySelector('#btn').addEventListener('click', function (event){
event.preventDefault();
const username = 'Belinda';
const password = 'admin';

const inputUsername = document.querySelector('#username').value;
const  inputPassword = document.querySelector('#password').value;

if(inputUsername != username || inputPassword != password){
    ipc.send('errortest', function (){
        alert('Error')

    });
}else{
    ipc.send('successtest', function (){ 
        alert('Success')
    });
 };
});

在main.js中，我听这样的事件：

ipc.on('successtest', function (){
    mainWindow.loadFile('admin.html');
});
ipc.on('errortest', function(){
   console.log('error');
   mainWindow.loadFile('error.html');
});

我的index.html页面如下：

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" 
  href="assets/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/fonts/@fortawesome/fontawesome- 
  free/css/all.css">
  <link rel="stylesheet" href="assets/stylesheets/main.css">

  <!-- <link rel="import" href="./admin.html"> -->
 <link rel="import" href="./admin.html">
 <link rel="import" href="./error.html">
 </head>
 <body id="body">
 <form class="form-signin" method="POST">
    <div class="text-center mb-4">
      <img class="mb-4" src="./assets/icons/logo4.jpg" alt="" width="80" 
     height="40">
    </div>
    <div class="form-group">
      <input type="text" value="" autofocus class="form-control form- 
    control-sm" id="username" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="password" autofocus value="" class="form-control form- 
    control-sm success" id="password" placeholder="Password">
    </div>
    <button class="btn btn-lg btn-success btn-block btn-sm" id="btn" 
    type="submit">Log in</button>
    <p class="mt-5 mb-3 text-muted text-center">&copy; Save Money 
   Solutions 2018-19</p>
 </form>

 <script>
 require('./renderer');
 </script>
 </body>
 </html>

运行该应用程序仅适用于“错误测试”事件。关于我的任何建议避开这个。或有关如何进行基本登录和重定向路径的任何想法在电子中。我确实尝试了一些研究，但没有发现任何问题有用。谢谢

Answer 1

我相信您的问题是如何获取用户名和密码输入的值。

由于两个输入都具有ID，我认为您应该像这样获得它们的值：

const inputUsername = document.getElementById('username').value;
const inputPassword = document.getElementById('password').value;

使用getElementById函数。

如何在BrowserWindow中加载特定的html文件

1 个答案: