Electron + Sequelize +SQLite学习

项目背景：Electron + Sequelize + SQLite

需求：添加用户并展示用户列表

第一次接触Electron + Sequelize +SQLite的项目，不太熟悉，这里通过一个示例学习下整个项目的流程逻辑。

一、创建模型：定员数据库表结构

可以在根目录创建：model/user.js

// 引入 Sequelize 类型
const { DataTypes } = require("sequelize");
// 引入数据库连接实例（已连接 SQLite）
const sequelize = require("../config/database");

// 定义模型 user，映射到 SQLite 的 user 表
const User = sequelize.define("user", {
  id: {
    type: DataTypes.INTEGER, // 整型
    primaryKey: true,        // 主键
    autoIncrement: true      // 自动递增
  },
  username: {
    type: DataTypes.STRING,  // 字符串类型
    allowNull: false         // 不允许为 null（必填）
  },
  age: {
    type: DataTypes.INTEGER, // 年龄为整型
    allowNull: false         // 必填
  },
   created_at: {
    type: DataTypes.DATE,           // 创建时间
    defaultValue: DataTypes.NOW     // 默认值为当前时间
  }
}, {
  tableName: "user",     // 映射的表名
  timestamps: false      // 禁用 Sequelize 默认的 createdAt、updatedAt 字段
})

module.exports = User; // 导出模型

二、主进程注册IPC通道：

src/main/api/user.ts

const { ipcMain } = require("electron"); // 引入 Electron 的主进程通信 API
const User = require("../../../model/user"); // 引入模型

// 注册 IPC 通道：添加用户
ipcMain.handle("user:add", async (_, { username, age }) => {
  return await User.create({ username, age }); // 插入一条记录
});

// 注册 IPC 通道：获取所有用户
ipcMain.handle("user:list", async () => {
  const users = await User.findAll({ order: [["id", "DESC"]] }); // 查询所有用户，按 ID 降序
  return users.map(user => user.get({ plain: true })); // 提取纯净的对象（去掉 dataValues 等包装）
});

三、 preload.ts 中暴露 API 到渲染进程

contextBridge.exposeInMainWorld("electronAPI", {
  // 添加用户接口：将数据传给主进程的 "user:add"
  addUser: (data) => ipcRenderer.invoke("user:add", data),

  // 获取用户列表接口：调用主进程的 "user:list"
  getUserList: () => ipcRenderer.invoke("user:list")
});

//以上这些函数前端都可以通过window.electronAPI.addUser(...)使用

四、前端页面使用：添加+展示用户（示例）

<template>
  <el-table :data="users" style="width: 100%">
    <!-- 展示 ID -->
    <el-table-column prop="id" label="ID" width="60" />
    <!-- 展示用户名 -->
    <el-table-column prop="username" label="用户名" />
    <!-- 展示年龄 -->
    <el-table-column prop="age" label="年龄" />
    <!-- 展示添加时间 -->
    <el-table-column prop="created_at" label="添加时间" />
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const users = ref([]) // 存放用户列表

onMounted(async () => {
  // 页面加载时从主进程获取用户列表
  users.value = await window.electronAPI.getUserList()
})
</script>

添加用户调用（例如点击按钮时触发）

// 示例：添加用户
await window.electronAPI.addUser({
  username: "leaf",
  age: 30
})
console.log("用户添加成功")

// 重新加载用户列表
users.value = await window.electronAPI.getUserList()

五、 数据流完整示意

Vue页面（用户点击）
      ⬇
window.electronApi.addUser({...})
      ⬇
preload.ts: 调用ipcRenderer.invoke("user:add")
      ⬇
主进程：ipcMain.handle("user:add")接收
      ⬇
Sequelize 调用SQLite 插入记录
      ⬇
返回结果给前端