首页 > 解决方案 > 对如何构建 Electron 应用程序感到困惑

问题描述

我刚开始使用 Electron,对如何构建项目有点困惑。

对于基本网页,您显然会使用包含指向您的 JS 和 CSS 链接的 HTML 页面

使用 MERN 应用程序,您可以将您的前端与您的路线分开,然后将您的后端与使用“要求”功能将所有内容放在一起的后端分开。

我已经构建了一个简单的练习应用程序,可以创建一个待办事项列表。目前它有以下文件:

package.json main.js mainWindow.html addWindow.html

现在我已经开始添加到数据库的连接,我不知道把它放在哪里。目前,当从 addWindow.html 添加一个项目,并且 IPC Renderer 将参数发送到 main.js 时,我在该函数中添加代码以调用数据库插入函数:

ipcMain.on('item:add', function(e, inputItems){
    console.log("shop item" + inputItems)
    dbInsert(inputItems)
    mainWindow.webContents.send('item:add', inputItems)
})

然后我在 main.js 中也有我的 dbInsert() 函数

function dbInsert(inputItem){
    let db = new sqlite3.Database('sldb.db', (err) => {
        if (err) {
          console.error(err.message);
        }
        console.log('Connected to the sqlite database.');
      });
    db.run(`INSERT INTO items (itemName, itemCat) VALUES(?, ?)`, inputItem.shopItem,     inputItem.shopItemCat), function(err) {
        if (err) {
          return console.log(err.message);
        }
      };
}

最终,尽管我的 main.js 将是一团糟。在 Electron 中构造事物的正确方法是什么?我应该如何分离这些不同的功能,我应该如何将它们连接在一起?我是在 main.js 文件中简单地“包含”JS 文件还是有“要求”的做事方式?

标签: javascriptelectron

解决方案


请查看secure-electron-template,我注意到您指的是 IPC 消息传递,该模板已内置以及许多评论和良好的文档。

我建议您保存到数据库的问题是创建一个单独的模块来处理这个问题,并像我在这一行中所做的那样简单地在您的 main.js 文件中设置绑定:https ://github.com/reZach/secure -电子模板/blob/master/app/electron/main.js#L60

该主题相当大且详细,但我认为您也可以通过查看此文件找到灵感:https ://github.com/reZach/i18next-electron-fs-backend/blob/master/src/index.js


推荐阅读