javascript - Dexie.js 不存储 Electron 表单提交的数据

Question

我不确定出了什么问题，我正在尝试将数据保存在我创建的 dixie.js 表中。我正在使用 Electron 并将数据绑定(bind)到 ipc 事件。我可以在 macOS 终端内看到传递的数据，我想这些数据也可用于主进程。我已将数据直接传递给 dexie，但我无法保存或获取它们。这是代码。我在 macOS 终端内收到此错误，它与 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);
});

我现在已经对此发表了评论，因为我正在开发应用程序的其他部分。使用该代码我无法检查数据是否已存储...

Answer 1

您无法对 JavaScript 对象属性的顺序执行任何操作(您可以找到有关该 here 的更多信息)。在大多数情况下，它会按字母顺序对属性进行排序。无论如何，如果函数需要一个对象，那么顺序就无关紧要了。

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

console.log(db.websites.get('client_name')); 这可能会引发错误。该行有几个问题:

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

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

由于 Table.add() 是异步的，因此您需要使用 async and await ，或Promise.then()确保在运行查询之前 Table.add() 已完成。