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

xcLeigh

已于 2023-11-30 16:04:47 修改

阅读量3.2k

点赞数 22

分类专栏： Electron+Ts+Vue+Vite桌面应用文章标签： electron vue.js sqlite

于 2023-11-29 17:08:08 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/134692751

版权

Electron+Ts+Vue+Vite桌面应用专栏收录该内容

4 篇文章 2 订阅

订阅专栏

作者：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数据库基本操作就实现了。

优质资源分享

🧡🧡🧡🧡🤍【总览】程序员前端、后端资源合集

🧡🧡🧡🧡🤍【源码】程序员优质资源汇总

🧡🧡🧡🧡🤍【博主推荐】JAVA SSM框架的后台管理系统（附源码）

🧡🧡🧡🧡🤍【博主推荐】HTML制作一个美观的个人简介网页（附源码）

🧡🧡🧡🧡🤍【博主推荐】html好看的个人简历网页版(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的个人主页(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的邀请函(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的音乐播放器(附源码)

🧡🧡🧡🧡🤍【博主推荐】html好看的拼图小游戏(附源码)

🧡🧡🧡🤍🤍【博主推荐】html好看的拼图验证码(附源码)

🧡🧡🧡🧡🧡【博主推荐】html界面绘制SVG图形(附源码)

🧡🧡🧡🧡🤍【博主推荐】html操作SVG图(附源码)

🧡🧡🧡🧡🤍【博主推荐】html下拉框树形（附好看的登录界面）

🧡🧡🧡🧡🤍【博主推荐】HTML5响应式手机WEB(附源码)

🧡🧡🧡🧡🤍【博主推荐】大数据可视化大屏(源码下载)

🧡🧡🧡🧡🧡【博主推荐】html引用百度地图定位闪烁弹框树形(附源码)

🧡🧡🧡🧡🤍【博主推荐】HTML酷炫动画表白求爱界面(附源码)

请添加图片描述

💞 关注博主带你实现畅游前后端

🏰 加入社区带你体验马航不孤单

💯 神秘个人简介带你体验不一样得介绍

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有） ，https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/134692751（防止抄袭，原文地址不可删除）

xcLeigh

关注

22
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
1
评论
Electron+Ts+Vue+Vite桌面应用系列：sqlite增删改查操作篇

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

扫一扫