前端 electron使用sqlite3持久化 数据


前言

提示:本人前端妹子一枚,第一次使用sqlite3作为项目的数据储存,不对的请多指教

sqlite是一个轻型,嵌入式的SQL的数据库引擎,起特点是自给自足,无服务器,领配置,支持事务。大部分的桌面应用都用sqlite在客户端保存数据

一、准备工作

  1. 准备好sqlitestudio建库建表
  2. 建立连接应用
  3. 下载地址sqlitestudio

二、使用步骤

1.安装sqlite3

npm install sqlite3 --build-from-source --runtime=electron --target=12.0.5 --dist-url=https://atom.io/download/electron
//以上命令来自node-sqlite3网,此处需要注意,--arget-8.11是写作此案例时使目的Electron版本,读者需把其更改你使用的lectron版本号。

node-sqlite3库只对QLite3单封装,为了完成数据的CRUD操需编
再次包装,完成业务数据访问读写工作。 写传统的SQL语句,开发效率低下。这里推荐大家使用knexjs作为对node-sqlite3的
knexjs是一个SQL指令构建器,开发者可以使用它编写串行化的数据访问代码,它会把开发者编写的代码转换成 QL句,再交由数据库执行处理。数据库返回的数据,它也会格式化成JSON对象。它支持多种数据库,比如 Postgres、MSSQL dySQL、MariaDB、SQLite3、Oracle等,这里我们只用到了 SQLite3。knexjs也是业知名的数据库访问工具

2. 如何在项目中使用DB

1. 创建后缀为 .db 文件

创建文本文件,更改.db后缀,再拖拽到 sqlitestudio 工具中 ,连接上,这样你就可以建表了
在这里插入图片描述
在这里插入图片描述

2. 使用db文件

knexjs官方文档:https://knexjs.org/guide/raw.html#raw-parameter-binding

将db文件放入到项目中

//连接项目
let sqliteDbPath = './DB.db'
const knex = require('knex')({
    client: 'sqlite3',
    useNullAsDefault: true,
    connection: {
        filename: sqliteDbPath 
    },
})
//如果项目中 DB.db 不存在 就创建文件,创建ip表
if (!fs.existsSync(sqliteDbPath)) {
    knex();
    knex.schema
        .raw('CREATE TABLE ip(id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, name TEXT NOT NULL DEFAULT (\'\')')
        .then(() => {
        })
        .catch((err: any) => {
            console.log(err)
        })
}else{
 //判断ip表中是否有topIndex字段,没有该字段就填加
  knex.schema.hasColumn("ip", "topIndex")
        .then((result:boolean)=>{
          //result=false 没有 
          //result=true有
            !result&&knex.schema.raw("ALTER TABLE projectIp ADD topIndex INT (2) NOT NULL DEFAULT (0)").then(()=>{})
        })
}

3. knex.js使用

//安装 knex.js
npm install  knex

CRUD操作样例代码,下方代码使用await关键字,所以使用时应放在async标记的函才能正常执行。

//sql 语句操作
await knex.raw(`insert into ip(name) values('大白兔')`);
//查找
await knex('admins').where({id:0}));
//排序
 await knex('users').orderBy('name', 'desc')
//更新
await knex('admins').where("id", 0).update(password: 'test'));
//删除
await knex('addresses').whereIn("id",[0,1,21).del();
//分页
await knex('addresses').limit(10).offset((1 - 1) * 10)
//添加
await knex('ip').insert({name:'大白兔'})

4. 项目总使用

我不太会写SQL语句 ,想要进一步学习自行百度

例如:
/***
 *数据表:ip
 * 功能:添加ip
 * value { object } ip的名称 和 备注
 * */
export const addIpApi = async (value: any) => {
    return new Promise(function (resolve, reject) {
        //支持sql语句
        //knex.raw(`insert into ip(name) values('大白兔')`);
         knex('ip')
            .insert({...singParams})
            .then((row: any) => {
                resolve({
                    code: 200,
                    msg: '新增成功'
                })
            })
            .catch((err: any) => {
                reject({
                    code: 401,
                    msg: err
                })
            })
    })
}

3. 使用

import { addIpApi } from "./tools";
addIpApi ({name:"大白兔"}).then((base: any) => {
  //逻辑代码
})

总结

我刚接触到sqlite3的时候,不知道怎么下手 ,我以为是node创建服务,再启动服务,然后前端调用API的方式。
后面经过查资料,问问后端的人员,才知道是不需要,是我按照前端的思维来想问题。

总之,感谢帮助过我的人,希望我这篇文章 也可以帮助他人,以上。

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,下面是一个使用 Vite、TypeScript 和 ElectronSQLite3 示例项目。 首先,需要安装以下依赖: - vite - electron - electron-builder(可选,用于将应用程序打包成可执行文件) - sqlite3 - @types/sqlite3(TypeScript 定义文件) 可以使用以下命令进行安装: ``` npm install vite electron electron-builder sqlite3 @types/sqlite3 --save-dev ``` 接下来,创建一个 Vite 项目: ``` npx vite create my-app --template electron-ts ``` 然后,在项目根目录下创建一个 `db` 目录,用于存放 SQLite3 数据库文件。 接着,创建一个 `database.ts` 文件,用于连接 SQLite3 数据库: ```typescript import sqlite3 from 'sqlite3'; const DB_PATH = './db/my-db.db'; export function connectDatabase() { return new sqlite3.Database(DB_PATH, (err) => { if (err) { console.error(err.message); } console.log('Connected to the database.'); }); } ``` 这个文件中,我们首先定义了 SQLite3 数据库文件的路径 `DB_PATH`,然后导出了一个 `connectDatabase` 函数,用于连接到数据库。 接下来,我们可以创建一个 `users.ts` 文件,用于操作用户表: ```typescript import { connectDatabase } from './database'; const db = connectDatabase(); export interface User { id: number; name: string; email: string; } export function getAllUsers(): Promise<User[]> { return new Promise((resolve, reject) => { db.all('SELECT * FROM users', (err, rows) => { if (err) { reject(err); } else { resolve(rows); } }); }); } export function addUser(user: User): Promise<number> { return new Promise((resolve, reject) => { db.run( 'INSERT INTO users(name, email) VALUES(?, ?)', [user.name, user.email], function (err) { if (err) { reject(err); } else { resolve(this.lastID); } } ); }); } ``` 在这个文件中,我们首先导入了 `connectDatabase` 函数,并使用它连接到了数据库。然后,我们定义了一个 `User` 接口,用于表示用户的数据结构。 接着,我们导出了两个函数: - `getAllUsers`:用于获取所有用户记录。 - `addUser`:用于添加一条新的用户记录。 这两个函数都是返回 Promise 对象的,因为它们都是需要异步执行的操作。 最后,我们可以在 `renderer.ts` 文件中调用这些函数: ```typescript import { getAllUsers, addUser, User } from './users'; const userList = document.querySelector('#user-list')!; const nameInput = document.querySelector('#name-input') as HTMLInputElement; const emailInput = document.querySelector('#email-input') as HTMLInputElement; const addBtn = document.querySelector('#add-btn')!; async function loadUsers() { const users = await getAllUsers(); userList.innerHTML = ''; users.forEach((user) => { const li = document.createElement('li'); li.textContent = `${user.id} - ${user.name} (${user.email})`; userList.appendChild(li); }); } addBtn.addEventListener('click', async () => { const user: User = { id: 0, name: nameInput.value, email: emailInput.value, }; await addUser(user); await loadUsers(); }); loadUsers(); ``` 在这个文件中,我们首先导入了 `getAllUsers` 和 `addUser` 函数,以及 `User` 接口。 然后,我们使用 DOM API 获取了一些元素,包括用户列表、姓名输入框、邮箱输入框和添加按钮。 接着,我们定义了一个 `loadUsers` 函数,用于加载所有用户记录,并将它们显示在用户列表中。 最后,我们在添加按钮的点击事件处理程序中,获取了用户输入的姓名和邮箱,创建了一个新的用户对象,并调用了 `addUser` 函数将其添加到数据库中。然后,我们又调用了 `loadUsers` 函数重新加载用户列表。 现在,可以使用以下命令启动应用程序: ``` npm run dev ``` 这将同时启动 Vite 和 Electron,打开应用程序窗口。 在窗口中,可以输入用户的姓名和邮箱,点击添加按钮,然后应该会在用户列表中看到新添加的用户记录。 最后,如果想要将应用程序打包成可执行文件,可以使用以下命令: ``` npm run build ``` 这将使用 Electron Builder 将应用程序打包成可执行文件,并输出到 `dist` 目录中。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值