Electron+Ts+Vue+Vite桌面应用系列：sqlite增删改查操作篇

文章目录

[1️⃣ sqlite应用](#1️⃣ sqlite应用)
- [1.1 sqlite数据结构](#1.1 sqlite数据结构)
- [1.2 初始化数据库](#1.2 初始化数据库)
- [1.3 初始化实体类](#1.3 初始化实体类)
- [1.4 操作数据类](#1.4 操作数据类)
- [1.5 页面调用](#1.5 页面调用)
优质资源分享

作者：xcLeigh

文章地址：https://blog.csdn.net/weixin_43151418/article/details/134692751

Electron+Ts+Vue+Vite桌面应用系列 ：这个系列包括了从桌面应用环境搭建到完整项目运行的全过程。展现一个完整的窗体应用程序，包括对数据的增删改查，各种表单的应用，各种路由的应用，登录注册的实现，窗体的放大缩小，列表的应用，内存的应用等。本篇介绍：sqlite增删改查操作

1️⃣ sqlite应用

1.1 sqlite数据结构

表结构

表数据

1.2 初始化数据库

main.ts 调用初始化数据库类

唯一主入口，通过这个入口实例化数据库，到时候可以直接操作数据。

import initDatabase from "./db/dbHelper";
initDatabase();

dbHelper.ts 数据库初始化相关操作

更加数据文件路径，初始化数据库，并加载实体绑定数据。

import {Op, Sequelize} from "@sequelize/core";
import {initModels} from "./models/init-models";
const path = require('path');
const fs = require('fs')
let sequelize: Sequelize;
export default initDatabase;
function initDatabase() {
    if (sequelize === undefined) {
        const dbFilePath = process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
            ? './db/device.db'
            : path.join(path.join(__dirname, '..'), '../db/mydb.db')

        console.log(dbFilePath);
        if (!fs.existsSync(dbFilePath)) {
            console.log('mydb.db 文件路径不存在!');
        }
        sequelize = new Sequelize({
            dialect: 'sqlite',
            storage: dbFilePath,
            logging: true,
            logQueryParameters: true
        });
        sequelize.authenticate()
            .then(() => {
                console.log('authenticate');
                initModels(sequelize)
            }).catch((e) => {
        }).finally(() => {
		
        });
    }

}

1.3 初始化实体类

init-model.ts 实体类的集合

对应数据库表所有实体类，目前只有用户表一个实体类。

import type {Sequelize} from "@sequelize/core";
import {SysUser as _SysUser} from "./sys_user";

export function initModels(sequelize: Sequelize) {
    const SysUser = _SysUser.initModel(sequelize);

    return {
        SysUser: SysUser,
    };

}

sys_user.ts 实体类

定义每个字段的类型，是否为空，是否是主键，对应数据库表的字段等信息。

import {DataTypes, InferAttributes, InferCreationAttributes, Model, Sequelize} from "@sequelize/core";

export class SysUser extends Model<InferAttributes<SysUser>, InferCreationAttributes<SysUser>>{
    id?: number;
    userName?: string;
    userPass?:string;
    userSort?:string;


    static initModel(sequelize: Sequelize): typeof SysUser {
        return SysUser.init({
            id: {
                autoIncrement: true,
                type: DataTypes.INTEGER,
                allowNull: false,
                primaryKey: true,
                columnName: 'id'
            },
            userName: {
                type: DataTypes.TEXT,
                allowNull: true,
                columnName: 'user_name'
            },
            userPass: {
                type: DataTypes.TEXT,
                allowNull: true,
                columnName: 'user_pass'
            },
            userSort: {
                type: DataTypes.INTEGER,
                allowNull: true,
                columnName: 'user_sort'
            }
        }, {
            sequelize,
            tableName: 'sys_user',
            timestamps: false
        });
    }
}

1.4 操作数据类

user_manager.ts 对表的增删改查操作

import { SysUser } from "../db/models/sys_user";
export class UserManager {
    private static instance: UserManager;
    private _sysUser: Array<SysUser>;
    private readonly _id: string;
    constructor(id: string) {
        this._sysUser = [];
        this._id = id;
        this._loadFromDB();
    }
    private async _loadFromDB() {
        const userModule =await SysUser.findAll({
        
        });
        this.setUser(userModule);
    }
    public static getInstance(): UserManager {
        if (!UserManager.instance) {
            UserManager.instance = new UserManager('');
        }
        return UserManager.instance;
    }
    setUser(menus: Array<SysUser>) {
        this._sysUser = menus;
    }
    //根据参数修改数据
    async update(id: number, userName: string, userPass: string, userSort: string) {
        return await SysUser.update({
            userName: userName,
            userPass: userPass,
            userSort: userSort,
        }, {
            where: {
                id: id,
            },
        })
    }
    //根据参数添加数据
    async addUser(userName: string, userPass: string, userSort: string) {
        return await SysUser.create({
            userName: userName,
            userPass: userPass,
            userSort: userSort
        });
    }
    //根据id删除数据
    async removeUser(dId:string) {
        await SysUser.destroy({
            where: {
                id: dId,
            }
        }).then((value: number) => {
            if (value > 0) {
                this._loadFromDB();
            }
        });
    }
    //查询全部数据
    async getAll() {
        const userModule = await SysUser.findAll({
        
        });
        return userModule;
    }
    //根据id查询数据
    async getByName() {
        const userModule = await SysUser.findAll({
            where: {
                id: this._id,
            }
        });
        return userModule;
    }
}

1.5 页面调用

user.vue 用户操作界面

<script setup lang="ts">
import {UserManager} from "../manager/user_manager";
const tableData=ref();
const dId = ref(0)
const dId1 = ref("")
//加载表的全部数据
const loadData=()=>{
  new UserManager("").getAll().then((data)=>{
    tableData.value=data;
  })
}
//根据参数删除数据
const delData=(id:string)=>{
	new UserManager('').removeUser(id);
}
//新增
const addData=(username:string,password:string,usersort:string)=>{
	new UserManager('').addUser(username,password,usersort).then((data)=>{
          ElMessage({
            message: '新增成功',
          });
        })
}
//修改
const addData=(id:string,username:string,password:string,usersort:string)=>{
	new UserManager('').update(id,username,password,usersort).then((data)=>{
          ElMessage({
            message: '修改成功',
          });
        })
}
</script>

到此，对electron下sqlite数据库基本操作就实现了。