在 Vue 项目中使用 SQLite 数据库的基础应用
目录
- 一、环境准备
- 二、数据库连接与操作
- 1. 创建数据库连接
- 2. 创建表
- 3. 插入数据
- 4. 查询数据
- 5. 更新数据
- 6. 删除数据
- 三、在 Vue 组件中使用 SQLite
一、环境准备
安装 Node.js 和 npm:确保已安装 Node.js 和 npm。
创建 Vue 项目:使用 Vue CLI 创建一个新的 Vue 项目:
vue create vue-sqlite-project
安装 SQLite 驱动:在项目中安装 sqlite3 库:
npm install sqlite3
二、数据库连接与操作
1. 创建数据库连接
在 Vue 组件中,可以使用 sqlite3 模块连接 SQLite 数据库:
import sqlite3 from 'sqlite3';const db = new sqlite3.Database('./database.db', (err) => {if (err) {console.error(err.message);}console.log('Connected to the SQLite database.');
});
2. 创建表
使用 SQL 语句创建表:
db.run(`CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,username TEXT NOT NULL,email TEXT NOT NULL
)`, (err) => {if (err) {console.error(err.message);}console.log('Table created.');
});
3. 插入数据
插入数据到表中:
const user = { username: 'Alice', email: 'alice@example.com' };
db.run(`INSERT INTO users (username, email) VALUES (?, ?)`, [user.username, user.email], (err) => {if (err) {console.error(err.message);}console.log('A row has been inserted.');
});
4. 查询数据
查询表中的数据:
db.all(`SELECT * FROM users`, [], (err, rows) => {if (err) {console.error(err.message);}rows.forEach((row) => {console.log(row);});
});
5. 更新数据
更新表中的数据:
db.run(`UPDATE users SET email = ? WHERE username = ?`, ['newemail@example.com', 'Alice'], (err) => {if (err) {console.error(err.message);}console.log('A row has been updated.');
});
6. 删除数据
删除表中的数据:
db.run(`DELETE FROM users WHERE username = ?`, ['Alice'], (err) => {if (err) {console.error(err.message);}console.log('A row has been deleted.');
});
三、在 Vue 组件中使用 SQLite
以下是一个完整的 Vue 组件示例,展示如何在组件中实现对 SQLite 数据库的增删改查操作:
<template><div><h2>User Management</h2><form @submit.prevent="addUser"><input v-model="newUser.username" placeholder="用户名" /><input v-model="newUser.email" placeholder="邮箱" /><button type="submit">添加用户</button></form><ul><li v-for="user in users" :key="user.id">{{ user.username }} - {{ user.email }}<button @click="deleteUser(user.id)">删除用户</button></li></ul></div>
</template><script>
import sqlite3 from 'sqlite3';export default {data() {return {newUser: { username: '', email: '' },users: []};},methods: {async initDatabase() {const db = new sqlite3.Database('./database.db', (err) => {if (err) {console.error(err.message);}console.log('Connected to the SQLite database.');});// Create tabledb.run(`CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT,username TEXT NOT NULL,email TEXT NOT NULL)`, (err) => {if (err) {console.error(err.message);}console.log('Table created.');});// Fetch usersthis.fetchUsers(db);// Close database connectiondb.close();},fetchUsers(db) {db.all(`SELECT * FROM users`, [], (err, rows) => {if (err) {console.error(err.message);}this.users = rows;});},addUser() {const db = new sqlite3.Database('./database.db');db.run(`INSERT INTO users (username, email) VALUES (?, ?)`, [this.newUser.username, this.newUser.email], (err) => {if (err) {console.error(err.message);}console.log('User added.');this.fetchUsers(db);});db.close();},deleteUser(id) {const db = new sqlite3.Database('./database.db');db.run(`DELETE FROM users WHERE id = ?`, [id], (err) => {if (err) {console.error(err.message);}console.log('User deleted.');this.fetchUsers(db);});db.close();}},mounted() {this.initDatabase();}
};
</script>
相关文章:
在 Vue 项目中使用 SQLite 数据库的基础应用
目录 一、环境准备二、数据库连接与操作1. 创建数据库连接2. 创建表3. 插入数据4. 查询数据5. 更新数据6. 删除数据 三、在 Vue 组件中使用 SQLite 一、环境准备 安装 Node.js 和 npm:确保已安装 Node.js 和 npm。 创建 Vue 项目:使用 Vue CLI 创建一个…...
AI会话问答的页面滚动处理(参考deepseek页面效果)
近期在接入deepseekR1的深度思考,研究了下deepseek官网的滚动效果,大概如下:用户发出消息后,自动滚动到页面最底部,让最新消息展示在视野中,这时候,我们先处理一次滚动: const scrol…...
GRN前沿:DGCGRN:基于有向图卷积网络的基因调控网络推理
1.论文原名:Inference of gene regulatory networks based on directed graph convolutional networks 2.发表日期:2024 DGCGRN框架 中心节点和节点的构建 局部增强策略 1. 问题背景 在基因调控网络中,许多节点的连接度较低(即…...
MongoDB 入门操作指南
文章目录 MongoDB 入门操作指南1. 连接到 MongoDB 数据库2. 查看当前数据库3. 显示所有数据库4. 切换或创建数据库5. 查看当前数据库中的所有集合6. 创建集合7. 插入文档插入单个文档插入多个文档 8. 查询文档查询所有文档查询匹配条件的文档格式化查询输出 9. 更新文档更新单个…...
共享设备管理难?MDM助力Kiosk模式一键部署
目录 1. 简化设备部署与配置:实现一键式部署 2. 自动化应用更新与内容推送:确保设备始终保持最新状态 3. 权限控制与设备安全:防止滥用与数据泄露 4. 远程管理与故障诊断:保障设备长期稳定运行 5. 数据分析与报告:…...
HttpClient-Java程序中发送Http请求
配置 <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</version> </dependency> ps:aliyun-sdk-oss中已引入上述配置 HttpClient的核心API: Htt…...
硬件-电源-隔离与非隔离的区别
文章目录 一:隔离电源与非隔离电源1.1 充电器触电新闻1.2 电路拓扑1.3 隔离电源与非隔离电源的优缺点1.3 隔离电源与非隔离电源的选择1.3.1 隔离电源1.3.2 非隔离电源 二:注意事项2.1 隔离电源结构图2.1 隔离耐压测试方法 三:感悟道友&#x…...
Kubernetes 最佳实践:Top 10 常见 DevOps/SRE 面试问题及答案
1. 如何在 Kubernetes 中设置资源请求和限制? 资源请求确保容器有最小资源量(CPU/内存),而限制则强制容器消耗的最大资源量。这有助于高效资源分配并防止资源争用。 示例: resources:requests:memory: "256Mi&…...
Training for Computer Use
Training for Computer Use 核心事件:多家科技公司推出能操控计算机的智能体,字节跳动和清华大学团队引入UI - TARS模型,展示了训练模型实现计算机操控能力的新成果。 UI - TARS模型 基本信息:是视觉 - 语言模型Qwen2 - VL的微调版…...
PH热榜 | 2025-02-14
1. Beatoven.ai 标语:能创作完美背景音乐的AI作曲家 介绍:Beatoven.ai 能根据简单的提示生成惊艳的背景音乐,用于你的内容创作。它是由世界各地的真实音乐家倾力打造(并使用了大量数据)。无需任何音乐专业知识&#…...
工业物联网远程监控系统优化方案,基于巨控GRM553Y-CHE
工业物联网远程监控系统优化方案 ——基于巨控GRM553Y-CHE的西门子S7-1500 PLC多站点无线集成方案 1. 项目背景与概述 巨控科技作为工业物联网解决方案提供商,专注于PLC无线通信与远程监控技术研发,其YunPLC安全平台已服务超30,000工业终端,…...
报名丨Computer useVoice Agent :使用 TEN 搭建你的 Mac Assistant
与 TEN 相聚在「LET’S VISION 2025」大会,欢迎来展位上跟我们交流。这次我们还准备了一场聚焦「computer use」的工作坊,功能新鲜上线,线下首波体验! 📅 TEN 展位:2025年3月1日-2日 TEN workshop&#x…...
Flutter 中的生命周期
在 Flutter 中,StatefulWidget 和 StatelessWidget 这两种 Widget 的生命周期不同,主要关注的是 StatefulWidget,因为它涉及到状态的管理和更新。 StatefulWidget 的生命周期: 1. 创建阶段 (Create) createState():…...
深度整理总结MySQL——redoLog日志工作原理
redo log的工作原理 前言概念为什么需要redo log修改undo页面,会记录对应的redo log吗redo log 和undo log 区别在哪什么是WAL技术redo log要写入磁盘,数据也要写入磁盘,为什么多此一举产生的redo log直接写入磁盘吗redo log 什么时候刷盘innodb_flush_log_at_trx_commit 参数参…...
备战蓝桥杯 Day1 回顾语言基础
开启蓝桥杯刷题之路 Day1 回顾语言基础 1.配置dev 工具->编译选项->勾选编译时加入以下命令->设定编译器配置(release和debug)都要-> -stdc11 ->代码生成/优化->代码生成/优化->语言标准(-std)->ISO C11 ->代码警告->显示最多警告信息(-Wall)…...
小记大模型本地部署:vllm, lmdeploy, ollama
记录一下最近折腾的大模型本地部署。由于学校有部署deepseek的竞赛(觉得扯不?)所以首选ollama这种超级简单的来过关,但我最希望的还是用专门的推理工具部署,因为做应用开发推理速度一定最重要。所以先尝试自己想搞的vl…...
MySQL查看存储过程和存储函数
【图书推荐】《MySQL 9从入门到性能优化(视频教学版)》-CSDN博客 《MySQL 9从入门到性能优化(视频教学版)(数据库技术丛书)》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...
从零到一:开发并上线一款极简记账本小程序的完整流程
从零到一:开发并上线一款极简记账本小程序的完整流程 目录 前言需求分析与功能设计 2.1 目标用户分析2.2 核心功能设计2.3 技术栈选择 开发环境搭建 3.1 微信开发者工具安装与配置3.2 项目初始化3.3 版本控制与协作工具 前端开发 4.1 页面结构与布局4.2 组件化开发…...
卷积神经网络实战人脸检测与识别
文章目录 前言一、人脸识别一般过程二、人脸检测主流算法1. MTCNN2. RetinaFace3. CenterFace4. BlazeFace5. YOLO6. SSD7. CascadeCNN 三、人脸识别主流算法1.deepface2.FaceNet3.ArcFace4.VGGFace5.DeepID 四、人脸识别系统实现0.安装教程与资源说明1. 界面采用PyQt5框架2.人…...
【面试题系列】Java 多线程面试题深度解析
本文涉及Java 多线程面试题,从基础到高级,希望对你有所帮助! 一、基础概念类 1. 请简述 Java 中线程的几种状态及其转换条件 题目分析:这是多线程基础中的基础,考查对线程生命周期的理解,在多线程编程中&…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
