在 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 中线程的几种状态及其转换条件 题目分析:这是多线程基础中的基础,考查对线程生命周期的理解,在多线程编程中&…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
