如何在Electron桌面应用程序中管理表单提交? [英] How to manage form submission in an Electron desktop app?

问题描述

我已阅读此问题，但是对我来说，处理电子形式的方法尚不清楚. 目前，我正在使用下面的代码，当用户提交表单时，我想使用dexie.js存储数据，但是我不知道如何在使用Vue时检索数据.

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

这终于是我的HTML，描述了我的UI:

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:我希望在col-4元素中填充客户名称列表，并希望将表单与从dexie.js数据库中分别获取的信息一起填充.

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.

推荐答案

很抱歉之前输入的答案错误.我将IndexedDB与另一个关系后端数据库混合在一起.一种 https://github中找到带有电子的Dexie的最小工作示例.com/dfahlander/Dexie.js/tree/master/samples/electron

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

以下错误！

您需要将Dexie内容添加到后端(又名主要过程):

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

这篇关于如何在Electron桌面应用程序中管理表单提交?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！