我是JavaScript和electron js的初学者。我正在创建一个待办事项列表管理器。我试图通过这个列表的标题检索sqlite todos.db,并填充它在一个选择菜单。我不知道如何将从数据库检索到的变量传递到HTML渲染页面。当我真正点击相应的按钮时,列表会填充一秒钟,然后消失。需要一些指导。
main.js的代码片段:
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('todos.db');
ipcMain.on("deleteList", (event, data) => {
db.all('SELECT title FROM lists', [], function (error, rows) {
if (error) {
console.error(error);
return;
}
const listNames = rows.map(row => row.title);
mainWindow.webContents.send("listNames", listNames);
mainWindow.loadFile(path.join(__dirname, 'delete-list.html'));
console.log("main js working");
});
});
字符串
index.js的片段:
const ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on("listNames", (event, listNames) => {
const listSelect = document.getElementById("list-select");
console.log("index.js working")
listNames.forEach(listName => {
const option = document.createElement("option");
option.text = listName;
option.value = listName;
listSelect.appendChild(option);
});
});
型
delete-list.html:
<!DOCTYPE html>
<html>
<head>
<title>Task Master</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@200&display=swap" rel="stylesheet">
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div class="header">
<h2 id="heading">Task Master V1.0</h2>
</div>
<div class="operations">
<select id="list-select">
<option disabled selected>Select the list</option>
</select>
<button onclick="deleteList()" id="submit">Delete</button>
<button id="home" onclick="window.location.href = 'index.html';">Back To Home</button>
</div>
</div>
</body>
</html>
型
1条答案
按热度按时间xbp102n01#
我认为问题是这样的:
字符串
您通过以下方式填充列表
型
然后重新加载文件,通过以下方式有效地删除列表
型
尝试像这样切换:
型
请记住,发送可能会在html页面完成加载之前触发。
例如,你可以在delete-list.html中获取页面加载时的列表名
希望这对你有帮助!