Electron 框架 + Vue3 + Prisma + SQLite笔记

1.创建Electron-vite项目 
 

yarn create electron-vite

2.初始化项目

yarn install

3.安装orm框架prisma

yarn add prisma@5.14.0 --save

electron 使用 prisma 安装客户端工具

yarn add @prisma/client@5.14.0 --save

初始化Prisma生成 prisma/schema.prisma 文件

yarn prisma init

 prisma/schema.prisma 文件

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./sqllite.db"
}

model user {
  id      Int      @id @default(autoincrement())
  parentId Int? 
  name    String
  password    String
  addTime DateTime
  loginTime DateTime
  loginCount Int
  rolesId Int
  email   String 
} 

配置数据库文件 .env

将 Prisma 模型推送到数据库

yarn prisma db push

生成SQL迁移文件

yarn prisma migrate dev

重新生成 Prisma 客户端

yarn prisma generate

4.electron 操作 Prisma 代码片段

//myprisma.ts
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
export default prisma


//user.ts

import { ipcMain} from 'electron'; 
import prisma from './prisma';  
ipcMain.handle('data-priviter-getUserList', async (_event): Promise<any> => {
    const data= await prisma.user.findFirst()
    return {data}
 }); 

//electron-env.d.ts
interface Window {
  ipcRenderer: import('electron').IpcRenderer
  myAPI:any
}

5.前端代码片段

<template> 
  <div>
  <button @click="triggerEvent()">触发服务端发送事件处理结果triggerEvent</button>
  {{ serverData }}
 </div>
</template>

<script setup lang="ts">
    import {reactive} from 'vue'
    const serverData = reactive({});
    async function triggerEvent() { 
    const v = await window.myAPI.dataPriviter.user.getUserList();
    Object.assign(serverData, v); 
} 
</script> 

一.错误提示

下面错误，有可能是通过 yarn prisma db push 推送时建立的数据库有问题，

解决方法，使用其他sqllite管理软件手动建立数据库 然后再执行推送建。