在 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 中线程的几种状态及其转换条件 题目分析:这是多线程基础中的基础,考查对线程生命周期的理解,在多线程编程中&…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
