Electron Vue3 Typescript Vite使用typeorm操作SQLite

1,安装typeorm和sqlite3:

        npm install typeorm

        npm install sqlite3

2,  新建一个文件data-source.ts。

import { DataSource } from 'typeorm';
import { User } from '../entity/User';
import * as path from 'path';
import { ItemData } from '../entity/ItemData';


export const AppDataSource = new DataSource({
  type: "sqlite",
  database: "database.sqlite",
  synchronize: true,
  logging: false,
  entities: [User, ItemData],
  migrations: [],
  subscribers: [],
});

AppDataSource.initialize()
    .then(async () => {
        console.log("Data Source has been initialized!")

        // const user = new User();
        // user.firstName = "Timber";
        // user.lastName = "Saw";
        // user.age = "25";
        // await AppDataSource.manager.save(user);
        // console.log("Saved a new user with id: " + user.id);
    })
    .catch((err) => {
        console.error("Error during Data Source initialization", err)
    })

export const getDataSource = (delay = 3000): Promise<DataSource> => {
  if (AppDataSource.isInitialized) return Promise.resolve(AppDataSource);

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (AppDataSource.isInitialized) resolve(AppDataSource);
      else reject("Failed to create connection with database");
    }, delay);
  });
};

3,   在main文件夹中index.ts文件中引入并使用,在创建窗口后调用getDataSource():

import "reflect-metadata";
import {  getDataSource } from '../Config/data-source';


createWindow();
getDataSource();

该文为原创文章,转载请注明原文出处

Author:靓仔建 w: gaolian1025

(希望能帮助到各位,大家的支持是我创作最大动力!现在待业中,希望大家能推荐一下工作。(专注.net C# 6年))

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个使用viteVue3、TypeScriptElectronSQLite3案例: 1. 首先,创建一个新的Electron项目: ``` mkdir my-electron-project cd my-electron-project npm init -y npm install --save-dev electron ``` 2. 安装vite作为前端构建工具: ``` npm install --save-dev vite ``` 3. 创建一个新的Vue3项目: ``` npm install --save-dev vue@next npm install --save-dev @vue/compiler-sfc ``` 4. 集成TypeScript: ``` npm install --save-dev typescript npm install --save-dev @types/node npm install --save-dev @types/electron ``` 5. 安装SQLite3依赖: ``` npm install --save sqlite3 ``` 6. 在你的项目根目录下创建一个`src`文件夹,然后在`src`下创建一个新的`main.ts`文件,作为Electron应用程序的入口点: ``` import { app, BrowserWindow } from 'electron'; let win: BrowserWindow | null = null; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadURL(`http://localhost:3000`); win.webContents.openDevTools(); win.on('closed', () => { win = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); ``` 7. 在`src`下创建一个新的`renderer.tsx`文件,用于渲染Vue3组件: ``` import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 8. 在`src`下创建一个新的`App.vue`文件,这是Vue3的根组件: ``` <template> <div id="app"> <h1>SQLite3 Example</h1> <p v-if="data">Data: {{ data }}</p> <button @click="fetchData">Fetch Data</button> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import sqlite3 from 'sqlite3'; export default defineComponent({ setup() { const state = reactive({ data: null, }); const fetchData = () => { const db = new sqlite3.Database(':memory:'); db.serialize(() => { db.run('CREATE TABLE lorem (info TEXT)'); const stmt = db.prepare('INSERT INTO lorem VALUES (?)'); for (let i = 0; i < 10; i++) { stmt.run(`Ipsum ${i}`); } stmt.finalize(); const results: string[] = []; db.each('SELECT rowid AS id, info FROM lorem', (err, row) => { results.push(`${row.id}: ${row.info}`); }, (err, count) => { state.data = results.join('\n'); }); }); db.close(); }; return { data: state.data, fetchData, }; }, }); </script> <style> body { font-family: sans-serif; font-size: 16px; margin: 0; padding: 0; } #app { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } button { margin-top: 2em; padding: 1em; font-size: inherit; } </style> ``` 9. 在项目根目录下创建一个新的`index.html`文件,作为Vue3应用程序的入口点: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SQLite3 Example</title> </head> <body> <div id="app"></div> <script type="module" src="/src/renderer.tsx"></script> </body> </html> ``` 10. 在项目根目录下创建一个新的`main.ts`文件,作为vite的入口点: ``` import { app, BrowserWindow } from 'electron'; import path from 'path'; import url from 'url'; import vite from 'vite'; let win: BrowserWindow | null = null; async function createWindow() { const viteServer = await vite.createServer({ server: { middlewareMode: true, }, }); await viteServer.listen(); win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); if (process.env.NODE_ENV === 'development') { win.loadURL(`http://localhost:3000`); } else { win.loadURL( url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, }) ); } win.webContents.openDevTools(); win.on('closed', () => { win = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); ``` 11. 在`package.json`中添加以下脚本: ``` "scripts": { "dev": "cross-env NODE_ENV=development electron .", "build": "cross-env NODE_ENV=production vite build && electron .", "start": "electron ." } ``` 12. 运行开发服务器: ``` npm run dev ``` 13. 运行Electron应用程序: ``` npm run start ``` 这样,你就可以在Electron应用程序中使用SQLite3了。在这个示例中,我们创建了一个内存数据库,并插入了10条数据。当用户点击“Fetch Data”按钮时,我们从数据库中检索这些数据,并在屏幕上显示它们。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值