2024最新版本 electron + vite + sqlite 开发收藏夹程序【完结】
这是一个使用Electron、Vite和SQLite构建的简单收藏夹程序的教程。以下是一个简化的代码示例，展示了如何创建一个简单的Electron应用程序，它可以用来添加和查看收藏夹条目。
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
addBookmark: (title, url) => ipcRenderer.send('add-bookmark', title, url),
getBookmarks: () => ipcRenderer.sendSync('get-bookmarks'),
});
// index.html
<!DOCTYPE html>
<html>
<head>
<title>收藏夹</title>
</head>
<body>
<h1>收藏夹</h1>
<input type="text" id="title" placeholder="标题">
<input type="text" id="url" placeholder="URL">
<button onclick="addBookmark()">添加</button>
<ul id="bookmarks"></ul>
<script>
function addBookmark() {
const title = document.getElementById('title').value;
const url = document.getElementById('url').value;
api.addBookmark(title, url);
}
function displayBookmarks(bookmarks) {
const bookmarksList = document.getElementById('bookmarks');
bookmarksList.innerHTML = '';
bookmarks.forEach(bookmark => {
const listItem = document.createElement('li');
listItem.textContent = `${bookmark.title} - ${bookmark.url}`;
bookmarksList.appendChild(listItem);
});
}
window.onload = function() {
const bookmarks = api.getBookmarks();
displayBookmarks(bookmarks);
};
</script>
</body>
</html>
// SQLite操作略，需要具体实现
// 假设有一个SQLite操作的模块db.js，它提供了addBookmark和getBookmarks方法
// 在preload.js中，我们使用ipcRenderer发送消息到主进程，然后在主进程中通过db.js与SQLite交互这个示例展示了如何使用Electron和Vite创建一个简单的桌面应用程序，并使用SQLite作为数据库。在preload.js中，我们使用contextBridge暴露了两个方法给渲染进程，分别用于添加书签和获取书签列表。在index.html中，我们使用这些方法与SQLite数据库交互，并在页面上显示书签列表。
请注意，这个示例并没有包含SQLite数据库的具体操作实现，这部分需要根据实际数据库表结构和操作进行具体实现。
评论已关闭