vite+typrscript+electron使用sqlite3案例

好的，下面是一个使用 Vite、TypeScript 和 Electron 的 SQLite3 示例项目。

首先，需要安装以下依赖：

- 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 数据库：

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` 文件，用于操作用户表：

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` 文件中调用这些函数：

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` 目录中。