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

文章目录

  • 1️⃣ sqlite应用
    • 1.1 sqlite数据结构
    • 1.2 初始化数据库
    • 1.3 初始化实体类
    • 1.4 操作数据类
    • 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数据库基本操作就实现了。


优质资源分享

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

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

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

🧡🧡🧡🧡🤍【博主推荐】SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)

🧡🧡🧡🧡🤍【博主推荐】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(防止抄袭,原文地址不可删除)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/187479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++学习专栏【基础知识2】C++数据类型

1、内置数据类型 基本内置类型 C为程序员提供了丰富的内置数据类型以及用户自定义数据类型。以下表格列出了七种基本的 C 数据类型 - 类型关键字布尔值bool字符char整数int浮点数float双精度浮点数double无值void宽字符wchar_t 基本类型中的几种可以使用一个或多个类型修饰符…

Kubernetes 安全最佳实践:保护您的秘密

Kubernetes 是一个可用于微服务的开源容器编排平台。当我们想要部署容器化应用程序、自动化管理和扩展应用程序时&#xff0c;Kubernetes 非常有用。 在容器中运行单个微服务而不是在同一虚拟机中运行多个进程几乎总是更安全。每当我们在 Kubernetes 中启动任何 pod 时&#x…

键盘敲入一个字母,操作系统发生了什么?

一、设备控制器 我们的电脑设备可以接非常多的输入输出设备&#xff0c;比如鼠标键盘网卡硬盘打印机等&#xff0c;每个设备的用法和功能都不相同&#xff0c;那操作系统是如何把这些输入输出设备统一管理的呢&#xff1f; 为了屏蔽设备之间的差异&#xff0c;每个设备都有一…

Zookeeper从零入门笔记

Zookeeper从零入门笔记 一、入门1. 概述2. 特点3. 数据结构4. 应用场景 二、本地1.安装2. 参数解读 三、集群操作3.1.1 集群安装3.2 选举机制1. 第一次启动2. 非第一次启动 3.3 ZK集群启动停止脚本3.4 客户端命令行操作3.2.1 命令行语法3.2.2 节点类型&#xff08;持久/短暂/有…

六:Day01_Spring Boot01

一、Spring Boot简介 1. 概念简介 Spring Boot是Spring公司的一个顶级项目&#xff0c;和Spring Framework是一个级别的。 Spring Boot实际上是利用Spring Framework 4 自动配置特性完成。编写项目时不需要编写xml文件。 2. 启动器介绍 Spring Boot的启动器实际上就是一个依赖…

热部署怎么部署

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言操作流程&#xff1a;在这里插入图片描述 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a832d83c091742eda9d9325931a89df4.png) 这里的跟上面的…

WPF实战项目十九(客户端):修改RestSharp的引用

修改HttpRestClient&#xff0c;更新RestSharp到110.2.0&#xff0c;因为106版本和110版本的代码不一样&#xff0c;所以需要修改下代码 using Newtonsoft.Json; using RestSharp; using System; using System.Threading.Tasks; using WPFProjectShared;namespace WPFProject.S…

算法通关村第十八关青铜挑战——透析回溯的模板

大家好&#xff0c;我是怒码少年小码。 回溯是最重要的算法思想之一&#xff0c;主要解决一些暴力枚举也搞不定的问题&#xff08;组合、子集、分割、排列、棋盘等等&#xff09;。性能并不高&#xff0c;但是哪些暴力枚举都无法ko的问题能解出来就可以了&#x1f923;。 这一…

BUUCTF [GXYCTF2019]BabySQli 1 详解!(MD5与SQL之间的碰撞)

题目环境burp抓包 随便输入值 repeater放包 在注释那里发现某种编码 MMZFM422K5HDASKDN5TVU3SKOZRFGQRRMMZFM6KJJBSG6WSYJJWESSCWPJNFQSTVLFLTC3CJIQYGOSTZKJ2VSVZRNRFHOPJ5 看着像是base编码格式 通过测试发现是套加密&#xff08;二次加密&#xff09; 首先使用base32对此编码…

项目11:豆瓣首页-页脚 完结撒花!

这次我们就来制作豆瓣首页的最后一部分页脚。 同样&#xff0c;页脚也在container中&#xff0c;页脚分为左区域和右区域&#xff0c;左区域里是多个p元素与a元素结合完成的&#xff0c;还要插入一些图片&#xff0c;右区域里里有几个横向菜单&#xff0c;以及一张图片。 左右…

近期知识点

aop (1) 要求利用AOP记录用户操作日志。内容包含以下信息&#xff1a;ip地址、用户名、请求的地址&#xff0c;请求的时间 &#xff08; 4 分&#xff09; &#xff08;2&#xff09;要求利用AOP记录用户操作日志&#xff0c;日志记录到文本文件。内容包含以下信息&#xff…

在Spring Boot中使用JavaMailSender发送邮件

用了这么久的Spring Boot&#xff0c;我们对Spring Boot的了解应该也逐步进入正轨了&#xff0c;这篇文章讲的案例也在我们的实际开发中算是比较实用的了&#xff0c;毕竟我们完成注册功能和对用户群发消息&#xff0c;都可以采用到邮箱发送功能&#xff0c;往下看&#xff0c;…

寿险公司通过开源治理保障数字创新,安全打通高质量服务新通道

某寿险公司致力于为消费者提供人性化的产品和服务&#xff0c;在中国保险市场中始终保持前列。该寿险公司以挖掘和满足客户需求为出发点&#xff0c;从产品开发、渠道销售、运营流程和售后服务等各环节&#xff0c;借助数字化工具&#xff0c;不断地努力探索并提升服务品质。 精…

C++ :运算符重载

运算符重载&#xff1a; 运算符重载概念&#xff1a;对已有的运算符重新进行定义&#xff0c;赋予其另一种功能&#xff0c;以适应不同的数据类型 运算符的重载实际是一种特殊的函数重载&#xff0c;必须定义一个函数&#xff0c;并告诉C编译器&#xff0c;当遇到该重载的运算符…

IDEA中的Postman!

Postman是大家最常用的API调试工具&#xff0c;那么有没有一种方法可以不用手动写入接口到Postman&#xff0c;即可进行接口调试操作&#xff1f;今天给大家推荐一款IDEA插件&#xff1a;Apipost Helper&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还…

SAP 如何检查已安装的SAP UI5 版本

第一个方法是直接从FLP中查看 但是部分高版本的FLP中没有这个about&#xff0c; 那么在当前界面可以使用&#xff1a;CTRL ALT SHIFT S 查看当前版本 根据此版本&#xff0c;去进行你的UI5的开发吧

观察者模式

1.观察者模式是什么呢&#xff1f; 观察者模式&#xff08;有时又被称为发布-订阅Subscribe>模式、模型-视图View>模式、源-收听者Listener>模式或从属者模式&#xff09;是软件设计模式的一种。在此种模式中&#xff0c;一个目标物件管理所有相依于它的观察者物件&am…

2分图匹配算法

定义 节点u直接无边&#xff0c;v之间无边&#xff0c;边只存在uv之间。判断方法&#xff1a;BFS染色法&#xff0c;全部染色后&#xff0c;相邻边不同色 无权二部图中的最大匹配 最大匹配即每一个都匹配上min&#xff08;u&#xff0c; v&#xff09;。贪心算法可能导致&…

【Unity】Blender场景导入

素材 下载场景&#xff1a;https://www.aplaybox.com/details/model/keDSIks72Qh3 blender文件导出为.fbx文件&#xff0c;路径选择复制&#xff08;做的过程太乱了不知道有没有影响&#xff09;&#xff0c;物理类型选择网格&#xff0c;勾选应用变换 blender下的物体长度是u…

SS8813T 打印机驱动芯片

SS8813为打印机和其它电机一体化应用提供一种双通道集成电机驱动方案。SS8813有两路H桥驱动&#xff0c;每个H桥可提供最大峰值电流2.5A和均方根电流1.75A(在24V和Ta 25C适当散热条件下)&#xff0c;可驱动两个刷式直流电机&#xff0c;或者一个双极步进电机&#xff0c;或者螺…