Как загрузить определенный HTML-файл в BrowserWindow - PullRequest
0 голосов
/ 14 ноября 2018

Я создаю приложение в 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>

Запуск приложения работает только для события errortest.Любой совет, как мне обойти это.Или любые идеи о том, как сделать основной логин и перенаправить пути в электронном виде.Я попытался провести какое-то исследование, но не нашел ничего полезного.Спасибо

1 Ответ

0 голосов
/ 15 ноября 2018

Я полагаю, что ваша проблема в том, как вы получаете значение ввода имени пользователя и пароля.

Поскольку оба ваших ввода имеют идентификаторы, я думаю, что вы должны получить их значение следующим образом:

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

Использование функции getElementById.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...