Как управлять отправкой формы в настольном приложении Electron?

Question

Я прочитал этот вопрос , но способ управления формой в электроне мне все еще неясен. В настоящее время я использую приведенный ниже код и хочу сохранить данные, используя dex ie. js, когда пользователь отправляет форму, но я не могу понять, как получить данные при использовании Vue .

Мой основной файл процесса содержит этот код:

// main.js
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = electron;

function createWindow(){
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');

}
app.whenReady().then(createWindow);

ipcMain.on('submitForm', function(event, data) {
   // Access form data here
   console.log(data);
});

Я использую этот код в моем рендерере:

// renderer.js
const ipcRenderer = require('electron').ipcRenderer;

const Dexie = require('dexie');
// Force debug mode to get async stacks from exceptions.
Dexie.debug = true; // In production, set to false to increase performance a little.

let db = new Dexie('clients');
db.version(1).stores({
  websites: "++id,client_name,hosting_provider,website_domain,panel_user,panel_pwd,db_host,db_name,db_user,db_pwd,wp_user,wp_pwd"
});

$(document).ready(function(){
  var myapp = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      submitForm(){
        ipcRenderer.send('submitForm', formData);
      }
    }
  });
  console.log(myapp);
});

И это, наконец, мой HTML описание моего пользовательского интерфейса:

<!-- index.html -->
<div class="container-fluid p-4" id="app">
  <div class="row">

    <div class="col-8 card p-4">
      <form id="client-info" v-on:submit.prevent="submitForm()">
        <div class="form-row">
          <div class="col-12">
            <h4>Informazioni Cliente</h4>
          </div>
          <div class="col-6">
            <label for="">Cliente:</label>
            <input type="text" class="form-control" id="client-name" name="client_name" placeholder="">
          </div>
          <div class="col-12">
            <label for="">Hosting provider:</label>
            <input type="text" class="form-control" id="" name="hosting_provider" placeholder="Aruba">
          </div>
          <div class="col-6">
            <label for="">Dominio:</label>
            <input type="text" class="form-control" id="" name="website_domain" placeholder="www.example.com">
          </div>
          <br>
          <div class="col-12">
            <h4>Dati accesso cPanel / Plesk</h4>
          </div>
          <div class="col-6">
            <label for="">Username</label>
            <input type="text" class="form-control" id="" name="panel_user" placeholder="Username">
          </div>
          <div class="col-6">
            <label for="">Password</label>
            <input type="text" class="form-control" id="" name="panel_psw" placeholder="Password">
          </div>
          <br>
          <div class="col-12">
            <h4>Dati accesso database</h4>
          </div>
          <div class="col-6">
            <label for="">DB Host</label>
            <input type="text" class="form-control" id="" name="db_host" placeholder="DB host">
          </div>
          <div class="col-6">
            <label for="">Nome Database</label>
            <input type="text" class="form-control" id="" name="db_name" placeholder="Nome database">
          </div>
          <div class="col-6">
            <label for="">Username</label>
            <input type="text" class="form-control" id="" name="db_user" placeholder="Database username">
          </div>
          <div class="col-6">
            <label for="">Password</label>
            <input type="text" class="form-control" id="" name="db_psw" placeholder="Database password">
          </div>
          <br>
          <div class="col-12">
            <h4>Dati accesso WordPress</h4>
          </div>
          <div class="col-6">
            <label for="">Username</label>
            <input type="text" class="form-control" id="" name="wp_user" placeholder="">
          </div>
          <div class="col-6">
            <label for="">Password</label>
            <input type="text" class="form-control" id="" name="wp_pass" placeholder="">
          </div>
          <!-- <a class="btn btn-link text-success"href="#" v-on:click="saveData()">SALVA</a>
          <a class="btn btn-link text-danger" href="#" v-on:click="">RESET</a>-->
          <button type="submit" class="btn btn-success">SALVA</button>
        </div>
      </form>
    </div>

    <div class="col-4">
      <ul class="nav ml-auto">
        <!-- v-for -->
        <li class="nav-item">
          <a class="nav-link" href="#">{{ message }}</a>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="renderer.js"></script>

PS: я хочу, чтобы элемент col-4 был заполнен списком имен клиентов, которым я хочу заполнить форму вместе с соответствующей информацией из моего база данных dex ie. js.

Answer 1

Извините за неправильный ответ раньше. Я перепутал IndexedDB с другой реляционной серверной базой данных. Минимальный рабочий пример Dex ie с электроном можно найти в https://github.com/dfahlander/Dexie.js/tree/master/samples/electron

Редактировать: ниже НЕПРАВИЛЬНО!

Вам необходимо добавить Dex ie материал для бэкэнда (он же основной процесс):

// main.js
const electron = require('electron');
const { app, BrowserWindow, ipcMain } = electron;

const Dexie = require('dexie');
// Force debug mode to get async stacks from exceptions.
Dexie.debug = true; // In production, set to false to increase performance a little.

let db = new Dexie('clients');
db.version(1).stores({
  websites: "++id,client_name,hosting_provider,website_domain,panel_user,panel_pwd,db_host,db_name,db_user,db_pwd,wp_user,wp_pwd"
});

function createWindow(){
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');

}
app.whenReady().then(createWindow);

ipcMain.on('submitForm', function(event, data) {
  // make sure data has the right format
  // meaing an object with key, value pairs corresponding to the websites table you created
  db.add(data)
  console.log(data);
});