如何在Electron桌面应用程序中管理表单提交

Question

我读过这个问题，但我仍然不清楚如何管理电子形式。目前，我正在使用下面的代码，我想在用户提交表单时使用dexie.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描述我的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数据库中分别提取的信息。

Answer 1

很抱歉之前回答错误。我将IndexedDB与另一个关系后端数据库混淆了。A.Dexie与电子的最小工作实例可以在https://github.com/dfahlander/Dexie.js/tree/master/samples/electron

编辑：下面是错误的！

你需要将Dexie的东西添加到后端(也就是主进程(：

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