How to manage form submission in an Electron desktop app?

问题

I have read this question but the way to manage a form in electron is still unclear to me. Currently, I am using the code below and I want to store the data using dexie.js when a user submits the form, but I'm not able to figure out how to retrieve the data when using Vue.

My main process file contains this code:

// 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);
});

I'm using this code in my renderer:

// 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);
});

And this finally is my HTML describing my UI:

<!-- 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: I want the col-4 element to be filled with a list of clients' names which I want the form to be filled with together with the respectively fetched information from my dexie.js database.

回答1:

Sorry for the wrong answer before. I mixed up IndexedDB with another relational backend database. A minimal working example of Dexie with electron can be found in https://github.com/dfahlander/Dexie.js/tree/master/samples/electron

Edit: The below is WRONG!

You would need to add the Dexie stuff to the backend (aka main proces):

// 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);
});

来源：https://stackoverflow.com/questions/60798768/how-to-manage-form-submission-in-an-electron-desktop-app