Electron+vue3项目使用SQLite3数据库

SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。它是一个零配置的数据库,这意味着与其他数据库不一样,我们不需要在系统中配置。

就像其他数据库,SQLite 引擎不是一个独立的进程,可以按应用程序需求进行静态或动态连接。SQLite 直接访问其存储文件。

特性:

  1. 不需要一个单独的服务器进程或操作的系统;
  2. 一个完整的 SQLite 数据库是存储在一个单一的跨平台的磁盘文件中;
  3. SQLite 是自给自足的,这意味着不需要任何外部的依赖;
  4. SQLite 事务是完全兼容 ACID 的,允许从多个进程或线程安全访问。

一、SQLite是什么

SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎。SQLite是一个轻量级的数据库,可以在各种操作系统上使用,并且支持SQL语言标准。

二、SQLite可以做什么

SQLite可以用来存储和管理大量的数据,并且可以通过SQL语句来查询和操作这些数据。它可以用于移动应用程序、桌面应用程序、Web应用程序、嵌入式系统等等。

三、安装依赖

 

cnpm i sqlite3 --build-from-source

四、创建数据库

在electron目录下新建db文件夹,存放sqlite3db.js文件。

 

sqlite3db.js文件内容如下:

//数据库连接

const sqlite3 = require('sqlite3')
const NODE_ENV = process.env.NODE_ENV
const path = require('path')
const { app } = require('electron')
let DB_PATH = path.join(app.getAppPath(), '/config/text.db');

console.log('连接数据库路径:',app.getAppPath());
console.log('连接数据库路径:',DB_PATH);

// 判断是否是正式环境
if (app.isPackaged) {
    // 正式环境
    DB_PATH = path.join(path.dirname(app.getPath('exe')), '/config/text.db');
}

//连接数据库
function connectDatabase() {
    return new sqlite3.Database(DB_PATH, (err) => {
        if (err) {
            console.error('连接数据库错误:' + err.message);
        }
        console.log('连接数据库成功')
    });
}
const db = connectDatabase();

//创建数据库,如果用户本地没有数据库的话就创建否则跳过
function createDataTable() {
    //创建用户表
    db.serialize(function () {
        db.run('create table if not exists user (id INTEGER PRIMARY KEY AUTOINCREMENT, name text, email text, phone text);');
    });
    // db.close();
} 
exports.connectDatabase = connectDatabase;
exports.createDataTable = createDataTable;
exports.db = db;

/electron/main.js里面引入sqlite3db.js文件。

const { createDataTable } = require("./db/sqlite3db.js")

执行

createDataTable();

完整/electron/main.js

const {
	app,
	net,
	ipcMain,
	BrowserWindow
} = require('electron')
const path = require("path");
const fs = require('fs');
const { checkUpdate } = require("./updater.js")

const { createDataTable } = require("./db/sqlite3db.js")

const createWindow = () => {
	const mainWindow = new BrowserWindow({
		frame: false, //false表示去掉顶部导航去掉关闭按钮最大化最小化按钮
		width: 1366,
		height: 768,
		maxWidth: 1920,
		minWidth: 1280,
		minHeight: 600,
		backgroundColor: '#333',
		transparent: false, //是否透明
		webPreferences: {
			// 允许使用webview
			webviewTag: true,
			// false关闭CORS,支持跨域请求
			webSecurity: false,
			// 开启渲染进程使用node,为了解决require 识别问题
			nodeIntegration: true,
			// 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.Electron 12 版本之后它将被默认true
			contextIsolation: false,
			// 允许使用remote
			enableRemoteModule: true,
			// 子进程路径
			preload: path.join(__dirname, "./preload.js"),
		}
	})

	console.log("=====", path.join(__dirname, "./preload.js"));
	// 判断是否是正式环境
	if (app.isPackaged) {
		// mainWindow.loadFile(`file://${path.join(__dirname, '../dist/index.html')}`); // 正式环境下加载html文件
		mainWindow.loadFile('dist/index.html')
		// mainWindow.webContents.openDevTools()
	} else {
		mainWindow.loadURL('http://127.0.0.1:3000/'); // dev环境下加载vite服务页面
		mainWindow.webContents.openDevTools()
	}

	createDataTable();
}
app.whenReady().then(() => {
	createWindow()
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit();
		mainWindow.close();
	}
})

五、启动脚本,创建数据库

选择生成的text.db文件,连接可视化工具

 

下面是一个使用vite、Vue3、TypeScript和ElectronSQLite3案例: 1. 首先,创建一个新的Electron项目: ``` mkdir my-electron-project cd my-electron-project npm init -y npm install --save-dev electron ``` 2. 安装vite作为前端构建工具: ``` npm install --save-dev vite ``` 3. 创建一个新的Vue3项目: ``` npm install --save-dev vue@next npm install --save-dev @vue/compiler-sfc ``` 4. 集成TypeScript: ``` npm install --save-dev typescript npm install --save-dev @types/node npm install --save-dev @types/electron ``` 5. 安装SQLite3依赖: ``` npm install --save sqlite3 ``` 6. 在你的项目根目录下创建一个`src`文件夹,然后在`src`下创建一个新的`main.ts`文件,作为Electron应用程序的入口点: ``` import { app, BrowserWindow } from &#39;electron&#39;; let win: BrowserWindow | null = null; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadURL(`http://localhost:3000`); win.webContents.openDevTools(); win.on(&#39;closed&#39;, () => { win = null; }); } app.on(&#39;ready&#39;, createWindow); app.on(&#39;window-all-closed&#39;, () => { if (process.platform !== &#39;darwin&#39;) { app.quit(); } }); app.on(&#39;activate&#39;, () => { if (win === null) { createWindow(); } }); ``` 7. 在`src`下创建一个新的`renderer.tsx`文件,用于渲染Vue3组件: ``` import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; createApp(App).mount(&#39;#app&#39;); ``` 8. 在`src`下创建一个新的`App.vue`文件,这是Vue3的根组件: ``` <template> <div id="app"> <h1>SQLite3 Example</h1> <p v-if="data">Data: {{ data }}</p> <button @click="fetchData">Fetch Data</button> </div> </template> <script lang="ts"> import { defineComponent, reactive } from &#39;vue&#39;; import sqlite3 from &#39;sqlite3&#39;; export default defineComponent({ setup() { const state = reactive({ data: null, }); const fetchData = () => { const db = new sqlite3.Database(&#39;:memory:&#39;); db.serialize(() => { db.run(&#39;CREATE TABLE lorem (info TEXT)&#39;); const stmt = db.prepare(&#39;INSERT INTO lorem VALUES (?)&#39;); for (let i = 0; i < 10; i++) { stmt.run(`Ipsum ${i}`); } stmt.finalize(); const results: string[] = []; db.each(&#39;SELECT rowid AS id, info FROM lorem&#39;, (err, row) => { results.push(`${row.id}: ${row.info}`); }, (err, count) => { state.data = results.join(&#39;\n&#39;); }); }); db.close(); }; return { data: state.data, fetchData, }; }, }); </script> <style> body { font-family: sans-serif; font-size: 16px; margin: 0; padding: 0; } #app { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } button { margin-top: 2em; padding: 1em; font-size: inherit; } </style> ``` 9. 在项目根目录下创建一个新的`index.html`文件,作为Vue3应用程序的入口点: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SQLite3 Example</title> </head> <body> <div id="app"></div> <script type="module" src="/src/renderer.tsx"></script> </body> </html> ``` 10. 在项目根目录下创建一个新的`main.ts`文件,作为vite的入口点: ``` import { app, BrowserWindow } from &#39;electron&#39;; import path from &#39;path&#39;; import url from &#39;url&#39;; import vite from &#39;vite&#39;; let win: BrowserWindow | null = null; async function createWindow() { const viteServer = await vite.createServer({ server: { middlewareMode: true, }, }); await viteServer.listen(); win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); if (process.env.NODE_ENV === &#39;development&#39;) { win.loadURL(`http://localhost:3000`); } else { win.loadURL( url.format({ pathname: path.join(__dirname, &#39;index.html&#39;), protocol: &#39;file:&#39;, slashes: true, }) ); } win.webContents.openDevTools(); win.on(&#39;closed&#39;, () => { win = null; }); } app.on(&#39;ready&#39;, createWindow); app.on(&#39;window-all-closed&#39;, () => { if (process.platform !== &#39;darwin&#39;) { app.quit(); } }); app.on(&#39;activate&#39;, () => { if (win === null) { createWindow(); } }); ``` 11. 在`package.json`中添加以下脚本: ``` "scripts": { "dev": "cross-env NODE_ENV=development electron .", "build": "cross-env NODE_ENV=production vite build && electron .", "start": "electron ." } ``` 12. 运行开发服务器: ``` npm run dev ``` 13. 运行Electron应用程序: ``` npm run start ``` 这样,你就可以在Electron应用程序中使用SQLite3了。在这个示例中,我们创建了一个内存数据库,并插入了10条数据。当用户点击“Fetch Data”按钮时,我们从数据库中检索这些数据,并在屏幕上显示它们。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值