小贝子编程

Dexie.js不存储电子表单提交的数据



我不确定出了什么问题，我正试图将数据保存在我创建的dixie.js表中。我正在使用电子，我已经将数据绑定到ipc事件。我可以在macOS终端内看到传递的数据，我想这些数据也可以用于主进程。我已将数据直接传递给dexie，但无法保存或获取它们。这是代码。我在macOS teminal中得到了这个错误，它与dexie有关，但我不知道出了什么问题。

**错误

Dexie {
_dbSchema:
{ websites:
TableSchema {
name: 'websites',
primKey: [IndexSpec],
indexes: [Array],
instanceTemplate: [Object],
mappedClass: null,
idxByName: [Object] } },
version: [Function],
_allTables:
{ websites:
Table {
name: 'websites',
schema: [TableSchema],
_tx: undefined,
hook: [Function] } },
_createTransaction: [Function],
_whenReady: [Function],
verno: 1,
open: [Function],
close: [Function],
delete: [Function],
backendDB: [Function],
isOpen: [Function],
hasBeenClosed: [Function],
hasFailed: [Function],
dynamicallyOpened: [Function],
name: 'clients',
on:
{ [Function: rv]
addEventType: [Function: add],
populate:
{ subscribers: [],
fire: [Function: nop],
subscribe: [Function: subscribe],
unsubscribe: [Function: unsubscribe] },
blocked:
{ subscribers: [Array],
fire: [Function],
subscribe: [Function: subscribe],
unsubscribe: [Function: unsubscribe] },
versionchange:
{ subscribers: [Array],
fire: [Function],
subscribe: [Function: subscribe],
unsubscribe: [Function: unsubscribe] },
ready:
{ subscribers: [],
fire: [Function: nop],
subscribe: [Function],
unsubscribe: [Function: unsubscribe] } },
transaction: [Function],
_transaction: [Function],
table: [Function],
Collection: [Function: Collection],
Table: [Function: Table],
Transaction: [Function: Transaction],
Version: [Function: Version],
WhereClause: [Function: WhereClause],
websites:
Table {
name: 'websites',
schema:
TableSchema {
name: 'websites',
primKey: [IndexSpec],
indexes: [Array],
instanceTemplate: [Object],
mappedClass: null,
idxByName: [Object] },
_tx: undefined,
hook:
{ [Function: rv]
addEventType: [Function: add],
creating: [Object],
reading: [Object],
updating: [Object],
deleting: [Object] } } }
Promise {
_listeners: [],
onuncatched: [Function: nop],
_lib: false,
_PSD:
{ id: 'global',
global: true,
ref: 16,
unhandleds: [],
onunhandled: [Function: globalError],
pgp: false,
env:
{ Promise: [Function: Promise],
PromiseProp: [Object],
all: [Function: all],
race: [Function: race],
resolve: [Function: resolve],
reject: [Function: reject],
nthen: [Function: then],
gthen: [Function: then] },
finalize: [Function: finalize] },
_stackHolder:
Error
at getErrorWithStack (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:317:12)
at new Promise (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:728:29)
at Promise.then (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:757:22)
at Table.get (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:2354:16)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:54:25)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:72:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12),
_prev:
Promise {
_listeners: [ [Listener] ],
onuncatched: [Function: nop],
_lib: false,
_PSD:
{ id: 'global',
global: true,
ref: 16,
unhandleds: [],
onunhandled: [Function: globalError],
pgp: false,
env: [Object],
finalize: [Function: finalize] },
_stackHolder:
Error
at getErrorWithStack (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:317:12)
at new Promise (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:728:29)
at Promise.then (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:757:22)
at tempTransaction (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:1829:35)
at Table.getTransaction (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:2330:17)
at Table.getIDBObjectStore (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:2339:25)
at Table.get (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:2348:25)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:54:25)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:72:3)
at Module._compile (internal/modules/cjs/loader.js:711:30),
_prev:
Promise {
_listeners: [Array],
onuncatched: [Function: nop],
_lib: false,
_PSD: [Object],
_stackHolder:
Error
at getErrorWithStack (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:317:12)
at new Promise (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:728:29)
at new Dexie (/Users/z/Sites/clients-manager/node_modules/dexie/dist/dexie.js:1522:42)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:8:12)
at Object.<anonymous> (/Users/z/Sites/clients-manager/main.js:72:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
at Function.Module._load (internal/modules/cjs/loader.js:551:3),
_prev: null,
_numPrev: 0,
_state: null,
_value: null },
_numPrev: 1,
_state: null,
_value: null },
_numPrev: 2,
_state: null,
_value: null }

**代码

// 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.
const 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"
});
let mainWindow;
// .once('ready-to-show', () => {
// child.show();
//});
function createMainWindow(){
mainWindow = new BrowserWindow({
width: 480,
height: 150,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile( 'index.html' );
mainWindow.show();
}
app.once('ready', createMainWindow);
ipcMain.on('open-add-form', ( event, arg ) => {
//win.webContents.send('data', arg);
let addWindow = new BrowserWindow({
parent: mainWindow,
width: 1200,
height: 600,
show: false
});
addWindow.loadFile( 'add.html' );
addWindow.show();
addWindow.on( 'close', () => {
addWindow = null
});
});
console.log(db);
ipcMain.on( 'submitForm', ( event, data ) => {
// Access form data here
db.websites.add(data)
console.log(data);
});
console.log(db.websites.get('client_name'));
ipcMain.on( 'open-clients-view', () => {
let clientsWindow = new BrowserWindow({
parent: mainWindow,
width: 1200,
height: 600,
show: false
});
clientsWindow.loadFile( 'view.html' );
clientsWindow.show();
clientsWindow.on( 'close', () => {
clientsWindow = null
});
});
// add.html inline code (will be better to have this in a separate file?)
const ipcRenderer = require('electron').ipcRenderer;
//const saveBtn = document.getElementById('save-btn');
var form = document.forms;
let formData = {}
form[0].addEventListener('submit', (e) => {
e.preventDefault();
let fields = document.getElementsByTagName('input');
for( var i = 0; i < fields.length; i++ ){
// I have also a strange issue on this line
// The key:value of the object will not be the same of the order of the inputs, see dexie table
formData[fields[i].name] = fields[i].value
}
ipcRenderer.send('submitForm', formData);
console.log(formData);
});

正如您从代码的一些注释中看到的，我对传递数据的key:value字段顺序也有一些问题。我会收到这个订单，但它不正确，因为它不尊重的表结构

{ client_name: 'ahaii',
db_host: '',
db_name: '',
db_pwd: '',
db_user: '',
hosting_provider: '',
panel_pwd: '',
panel_user: '',
website_domain: '',
wp_pass: '',
wp_user: '' }

感谢您的帮助。

更新这是我在main.js文件中用来调用dexie-add方法的代码，也许问题出在它身上？

ipcMain.on( 'submitForm', ( event, data ) => {
// Access form data here
//console.log(data.client_name);
db.websites.put({
client_name: data.client_name,
hosting_provider: data.hosting_provider,
website_domain: data.website_domain,
panel_user: data.panel_user,
panel_pwd: data.panel_pwd,
db_host: data.db_host,
db_name: data.db_name,
db_user: data.db_user,
db_pwd: data.db_pwd,
wp_user: data.wp_user,
wp_pwd: data.wp_pass,
}).then( (primaryKey) => {
db.websites.get(primaryKey);
console.log(primaryKey);
}).then( (websites) => {
console.log(websites.client_name);
});
console.log(data);
});
console.log(data);
});

我现在已经评论了它，因为我正在处理应用程序的其他部分。我无法检查该代码是否存储了数据。。。

您不能对JavaScript对象属性的顺序做任何事情(您可以在这里找到更多信息(。在大多数情况下，它将按字母顺序排列属性。在任何情况下，如果函数期望一个对象，那么顺序无论如何都无关紧要。

HTML内联代码适用于小示例。如果您构建了一个完整的系统，您应该将JavaScript代码与HTML分离。将行为(JS(与显示(HTML、CSS(分离是一种很好的做法。

console.log(db.websites.get('client_name'));这可能引发错误。这条线路有几个问题：

  • 调用的格式不适合生成数据库查询。看看Table.where((语法或Table.get((语法。表中的主键是自动递增id。因此，您的调用永远不会得到任何条目
  • 调用在main.js中，而不是在任何回调函数或类似函数中。因此，它几乎会在您启动程序后立即被调用。这意味着
    • 主窗口很可能尚未加载
    • 运行数据库时，您肯定没有向数据库中添加任何内容

如果您希望在向数据库添加某些内容后运行此查询，则需要将该函数添加到submitForm回调中，或者创建另一个可以通过主窗口上的按钮或类似操作触发的回调。

由于Table.add()是异步的，您需要使用async和wait，或者Promise.then((来确保Table.add()在运行查询之前已经完成。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium