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, InferCreationAttributes>{
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;
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) {
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 用户操作界面
到此，对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（防止抄袭，原文地址不可删除）