Electron+vue3项目使用SQLite3数据库详细步骤(超详细)

 更新时间:2024年01月02日 10:48:14   作者:qq_31819445  
Electron是一个基于vue.js的新框架,它可以构建桌面应用,这篇文章主要给大家介绍了关于Electron+vue3项目使用SQLite3数据库的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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

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

特性:

  • 不需要一个单独的服务器进程或操作的系统;
  • 一个完整的 SQLite 数据库是存储在一个单一的跨平台的磁盘文件中;
  • SQLite 是自给自足的,这意味着不需要任何外部的依赖;
  • 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文件,连接可视化工具

总结

到此这篇关于Electron+vue3项目使用SQLite3数据库的文章就介绍到这了,更多相关Electron vue3使用SQLite3数据库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue动态设置页面title的方法实例

    vue动态设置页面title的方法实例

    这篇文章主要给大家介绍了关于vue动态设置页面title的相关资料,文中通过实例代码结束的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • Vue.js中该如何自己维护路由跳转记录

    Vue.js中该如何自己维护路由跳转记录

    这篇文章主要给大家介绍了关于Vue.js中该如何自己维护路由跳转记录的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • vue+canvas实现简易的九宮格手势解锁器

    vue+canvas实现简易的九宮格手势解锁器

    这篇文章主要为大家详细介绍了如何流vue+canvas实现一个简易的九宮格手势解锁器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-09-09
  • 详解vue2路由vue-router配置(懒加载)

    详解vue2路由vue-router配置(懒加载)

    本篇文章主要介绍了详解vue2路由vue-router配置(懒加载),实例分析了vue-router懒加载的技巧,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • 详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue使用$emit传递参数方式

    vue使用$emit传递参数方式

    这篇文章主要介绍了vue使用$emit传递参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 一文彻底教会你在vue中写jsx

    一文彻底教会你在vue中写jsx

    以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue 解决setTimeOut和setInterval函数无效报错的问题

    vue 解决setTimeOut和setInterval函数无效报错的问题

    这篇文章主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件,实现页面渲染等步骤,需要的小伙伴可以参考一下
    2021-12-12
  • vue使用lottie-web实现web动画效果

    vue使用lottie-web实现web动画效果

    在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上,这篇文章主要介绍了vue使用lottie-web实现web动画,需要的朋友可以参考下
    2024-06-06

最新评论