Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)
前言
SQLite 是一個進程內(nèi)的庫,實現(xiàn)了自給自足的、無服務(wù)器的、零配置的、事務(wù)性的 SQL
數(shù)據(jù)庫引擎。它是一個零配置的數(shù)據(jù)庫,這意味著與其他數(shù)據(jù)庫不一樣,我們不需要在系統(tǒng)中配置。
就像其他數(shù)據(jù)庫,SQLite
引擎不是一個獨立的進程,可以按應(yīng)用程序需求進行靜態(tài)或動態(tài)連接。SQLite
直接訪問其存儲文件。
特性:
- 不需要一個單獨的服務(wù)器進程或操作的系統(tǒng);
- 一個完整的
SQLite
數(shù)據(jù)庫是存儲在一個單一的跨平臺的磁盤文件中; SQLite
是自給自足的,這意味著不需要任何外部的依賴;SQLite
事務(wù)是完全兼容ACID
的,允許從多個進程或線程安全訪問。
一、SQLite是什么
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎。SQLite是一個輕量級的數(shù)據(jù)庫,可以在各種操作系統(tǒng)上使用,并且支持SQL語言標(biāo)準。
二、SQLite可以做什么
SQLite可以用來存儲和管理大量的數(shù)據(jù),并且可以通過SQL語句來查詢和操作這些數(shù)據(jù)。它可以用于移動應(yīng)用程序、桌面應(yīng)用程序、Web應(yīng)用程序、嵌入式系統(tǒng)等等。
三、安裝依賴
cnpm i sqlite3 --build-from-source
四、創(chuàng)建數(shù)據(jù)庫
在electron目錄下新建db文件夾,存放sqlite3db.js文件。
sqlite3db.js文件內(nèi)容如下:
//數(shù)據(jù)庫連接 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('連接數(shù)據(jù)庫路徑:',app.getAppPath()); console.log('連接數(shù)據(jù)庫路徑:',DB_PATH); // 判斷是否是正式環(huán)境 if (app.isPackaged) { // 正式環(huán)境 DB_PATH = path.join(path.dirname(app.getPath('exe')), '/config/text.db'); } //連接數(shù)據(jù)庫 function connectDatabase() { return new sqlite3.Database(DB_PATH, (err) => { if (err) { console.error('連接數(shù)據(jù)庫錯誤:' + err.message); } console.log('連接數(shù)據(jù)庫成功') }); } const db = connectDatabase(); //創(chuàng)建數(shù)據(jù)庫,如果用戶本地沒有數(shù)據(jù)庫的話就創(chuàng)建否則跳過 function createDataTable() { //創(chuàng)建用戶表 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")
執(zhí)行
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表示去掉頂部導(dǎo)航去掉關(guān)閉按鈕最大化最小化按鈕 width: 1366, height: 768, maxWidth: 1920, minWidth: 1280, minHeight: 600, backgroundColor: '#333', transparent: false, //是否透明 webPreferences: { // 允許使用webview webviewTag: true, // false關(guān)閉CORS,支持跨域請求 webSecurity: false, // 開啟渲染進程使用node,為了解決require 識別問題 nodeIntegration: true, // 是否在獨立 JavaScript 環(huán)境中運行 Electron API和指定的preload 腳本.Electron 12 版本之后它將被默認true contextIsolation: false, // 允許使用remote enableRemoteModule: true, // 子進程路徑 preload: path.join(__dirname, "./preload.js"), } }) console.log("=====", path.join(__dirname, "./preload.js")); // 判斷是否是正式環(huán)境 if (app.isPackaged) { // mainWindow.loadFile(`file://${path.join(__dirname, '../dist/index.html')}`); // 正式環(huán)境下加載html文件 mainWindow.loadFile('dist/index.html') // mainWindow.webContents.openDevTools() } else { mainWindow.loadURL('http://127.0.0.1:3000/'); // dev環(huán)境下加載vite服務(wù)頁面 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(); } })
五、啟動腳本,創(chuàng)建數(shù)據(jù)庫
選擇生成的text.db文件,連接可視化工具
總結(jié)
到此這篇關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的文章就介紹到這了,更多相關(guān)Electron vue3使用SQLite3數(shù)據(jù)庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3前端與Python(Django)后端接口簡單代碼示例
這篇文章主要介紹了如何使用Django創(chuàng)建項目和應(yīng)用,配置跨域訪問,并編寫視圖和API,同時還講述了如何使用Vue3創(chuàng)建項目,編寫組件調(diào)用后端API,需要的朋友可以參考下2025-01-01Vue watch響應(yīng)數(shù)據(jù)實現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應(yīng)數(shù)據(jù)實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07Vue中keyup.enter和blur事件沖突的問題及解決
這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue中Object.assign清空數(shù)據(jù)報錯的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03van-dialog彈窗異步關(guān)閉功能-校驗表單實現(xiàn)
有時候我們需要通過彈窗去處理表單數(shù)據(jù),在原生微信小程序配合vant組件中有多種方式實現(xiàn),其中UI美觀度最高的就是通過van-dialog嵌套表單實現(xiàn),這篇文章主要介紹了van-dialog彈窗異步關(guān)閉-校驗表單,需要的朋友可以參考下2023-11-11