electron集成sqlite3 MVC封装使用

一:添加依赖 配置环境(注意target electron版本)

1: yarn add sqlite3@latest --build-from-source --runtime=electron --target=8.5.2 --dist-url=https://atom.io/download/electron
2: yarn add electron-rebuild    node > 12.19.0 需要升级最新node版本
3: yarn add aws-sdk             需要先安装aws-sdk  不然 rebuild失败
4: package.json 增加命令    "rebuild:sql": "electron-rebuild -f -w sqlite3"
5: yarn rebuild:sql    验证 可用性 可行

二:封装sql方法 主进程下创建 sqlite.js

// import sqlite3 from 'sqlite3'
const sqlite3 = require('sqlite3');
const sqlite = sqlite3.verbose();
class Sqlite {
  constructor () {
    this.sqlInstance = null;
    this.db = null;
  }

  // 连接数据库
  connect (path) {
    return new Promise((resolve, reject) => {
      this.db = new sqlite.Database(path, (err) => {
        if (err) {
          reject(err);
        } else {
          resolve(1);
        }
      });
    });
  }

  // 运行sql
  run (sql, params) {
    return new Promise((resolve, reject) => {
      this.db.run(sql, params, (err) => {
        if (err) {
          reject(err);
        } else {
          resolve(1);
        }
      });
    });
  }

  // 运行多条sql
  exec (sql) {
    return new Promise((resolve, reject) => {
      this.db.exec(sql, (err) => {
        if (err) {
          reject(err);
        } else {
          resolve(1);
        }
      });
    });
  }

  // 查询一条数据
  get (sql, params) {
    return new Promise((resolve, reject) => {
      this.db.get(sql, params, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
  }

  // 查询所有数据
  all (sql, params) {
    return new Promise((resolve, reject) => {
      this.db.all(sql, params, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
  }

  // 关闭数据库
  close () {
    this.db.close();
  }

  // 单例
  static getInstance () {
    this.sqlInstance = this.sqlInstance ? this.sqlInstance : new Sqlite();
    return this.sqlInstance;
  }
}

export default Sqlite;

三:主进程注册 Sqlite 服务

// 数据库服务
import Sqlite from './utils/sqlite';

const sqlite = new Sqlite();
context.sqlite = sqlite;     //context 定义为全局上下文

四:以User数据 创建  UserListTable  数据模型  UserListTable.js

class UserListTable {
  constructor (context) {
    this.mContext = context;
  }
  insertAllContacts (args, userInfo) {
    const list = args.data;
    let sql = ‘’
    return this.mContext.sqlite.exec(sql);
  }
  searchUserList (params) {
    params = {userId: 123};
    return this.mContext.sqlite.all('SELECT * FROM test');
  }
}
export default UserListTable;

五:创建User 控制器 userListCorl.js 调用

import BaseClass from './baseClass';
class UserListCorl extends BaseClass {
  async insertAllContacts (args, userInfo) {
    return this.userListTable.insertAllContacts(args, userInfo);
  }
}
export default UserListCorl;

补充

baseClass.js

// 所有的models 都在base注册 在其他class 消费
import InitDB from '../models/initDB';
import UserListTable from '../models/userListTable';
class BaseClass {
  constructor (context) {
    this.mContext = context;
    this.mInitDB = new InitDB(context);
    this.userListTable = new UserListTable(context);
  }
}
export default BaseClass;
InitDB.js
class InitDB {
  constructor (content) {
    this.mContext = content;
  }
  connectDB (path) {
    return this.mContext.sqlite.connect(path);
  }
  createTable () {
    // 创建表
    return this.mContext.sqlite.exec(sql);
    // 还需创建 多张表
  }
  insertTestData (params) {
    return this.mContext.sqlite.run(sql);
  }
}
export default InitDB;

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用 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` 目录中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值