1. 技术文章
  2. Dexie.js not store electron form submitted data

Dexie.js not store electron form submitted data

由 让人想犯罪 __ 提交于 2020-04-18 03:49:21

问题


I'm not sure what's wrong, I'm trying to save my data inside a dixie.js table I've created. I'm using electron and I've binded the data to an ipc event. I can see the passed data inside the macOS terminal, I suppose that the data are available also for the main process. I have passed the data directly to dexie but I'm not able to save or get them. Here is the code. I get this error inside the macOS teminal, it's dexie related but I don't know what's wrong.

**ERROR

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 }

**CODE

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

As you can see from some comments on the code I also having a little issue with the key:value fields order of the passed data. I will get this order and it's not correct because it will not respect the table structure

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

Any help is appreciated, thanks.

UPDATE this is the code I use in the main.js file to call dexie add method, maybe the problem is with it?

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

I've commented it for now because I'm working on other parts of the app. whit that code I'm not able to check if data are stored...


回答1:


You cannot do anything about the order of JavaScript object attributes (you can find more information about that here). It will order the attributes alphabetically in most cases. In any case, if the function expects an object, the order will not matter anyway.

HTML inline code is fine for small examples. If you build a complete system, you should separate your JavaScript code from HTML. It is a good practice to separate behavior (JS) from display (HTML, CSS).

console.log(db.websites.get('client_name')); This probably throws the error. There are several problems with this line:

  • The call is not in the right format to generate a database query. Take a look at Table.where() syntax or Table.get() syntax. The primary key in your table is the auto-increment id. Therefore your call will never get any entries.
  • The call is in the main.js, not in any callback function or similar. Therefore, it will get called nearly immediately after you start the program. This means that
    • the main window is most likely not loaded yet
    • you definitely did not add anything to the database when it is run

If you want this query to be run after you added something to your database, you either need to add the function to the submitForm callback, or create another callback that you could trigger via a button on your mainWindow or something similar.

Since Table.add() is asynchronous, you either need to use async and await, or Promise.then() to make sure that the Table.add() has finished before running your query.



来源：https://stackoverflow.com/questions/60818461/dexie-js-not-store-electron-form-submitted-data

标签
javascript
electron
dexie
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!