当前位置：首页 > news >正文

在 Vue 项目中使用 SQLite 数据库的基础应用

news 来源：原创 2025/5/9 22:18:52

一、环境准备

安装 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 创建一个…...

编程日记 2025/5/9 22:18:52

《安富莱嵌入式周报》第350期：Google开源Pebble智能手表，开源模块化机器人平台，开源万用表，支持10GHz HRTIM的单片机，开源CNC控制器

周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版： https://www.bilibili.com/video/BV1YPKEeyEeM/ 《安富莱嵌入式周报》第350期：Google开…...

编程日记 2025/5/9 21:43:31

多线程基础面试题剖析

一、线程的创建方式有几种创建线程的方式有两种，一种是继承Thread，一种是实现Runable 在这里推荐使用实现Runable接口，因为java是单继承的，一个类继承了Thread将无法继承其他的类，而java可以实现多个接口&#xff0…...

编程日记 2025/5/8 0:02:43

C++ Primer 函数重载

欢迎阅读我的【CPrimer】专栏专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...

编程日记 2025/5/9 21:30:56

10bit VS 8bit 视频：色彩深度的较量，谁才是视觉盛宴的王者？

10bit 和 8bit 视频 10bit 视频和 8bit 视频的主要区别在于色彩深度和细节表现能力。10bit 视频具有更高的色彩深度和更丰富的细节表现，能够提供更平滑的色彩过渡和更真实的图像质量，但需要更多的存储空间和带宽。8bit 视频则在存储和传输方面更加高效，适合于对存储空间和带…...

编程日记 2025/5/9 21:35:56

从零开始-将小爱接入大模型

文章目录前言一、学习教程二、docker安装二、项目下载和配置三、文件修改文件.env.exampledeepseek模型注册gitee并获取密钥文件.migpt.example.js连接小爱同学三、运行项目创建目录启动docker容器总结前言基于当前人工智能的发展，大模型使用越来越方便&…...

编程日记 2025/5/9 21:48:50

关于 IoT DC3 中设备（Device）的理解

在物联网系统中，设备（Device）是一个非常宽泛的概念，它可以指代任何能够接入系统并进行数据交互的实体。包括但不限于手机、电脑、服务器、网关、硬件设备甚至是某些软件程序等所有能接入到该平台的媒介。内容定义目的示例 …...

编程日记 2025/5/3 17:29:50

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 周跳 1. 高次差法2. 相位减伪距法3. TurboEdit算法（MW+GF组合）4. 多项…...

编程日记 2025/5/2 17:15:04

Centos搭建python环境

在 CentOS 上配置 Python 环境可以通过以下步骤完成： 1. 检查系统自带 Python 版本 CentOS 7/8 可能已经自带了 Python： python3 --version 如果没有，或者版本过低，可以手动安装。 2. 安装 Python（推荐&#xff0…...

编程日记 2025/5/8 0:03:47

Python 字典思维导图

在本章中，你将学习能够将相关信息关联起来的Python字典。你将学习如何访问和修改字典中的信息。鉴于字典可存储的信息量几乎不受限制，因此我们会演示如何遍历字典中的数据。另外，你还将学习存储字典的列表、存储列表的字典和存储字典的字典。…...

编程日记 2025/5/5 3:45:01

springboot与springcloud对应版本

Spring Boot 与 Spring Cloud Alibaba 版本对应关系请根据您使用的 Spring Boot 版本，选择兼容的 Spring Cloud Alibaba 版本： Spring Boot Version Spring Cloud Alibaba Version Spring Cloud Version 3.0.2 2022.0.0.0 Spring Cloud 2022.0.0 3.0.2…...

编程日记 2025/5/7 3:52:15

verilog程序设计及SystemVerilog验证

1.Verilog测试程序设计基础 1.1Testbench及其结构在仿真的时候Testbench用来产生测试激励给待验证设计( Design Under Verification, DUV)，或者称为待测设计(Design UnderTest, DUT) 。测试程序的一般结构： Testbench是一个测试平台，信号…...

编程日记 2025/5/6 2:28:37

游戏引擎学习第104天

Z轴有点悬而未决我们正在进行渲染器相关的工作。之前我们已经完成了法线贴图的代码，虽然基本完成，但还有一些与光照相关的工作待完成。目前，天空和地面部分的光照处理已经相对正常，但局部光源的处理还没有做好。为了进行光照部…...

编程日记 2025/5/3 17:06:46

‌OpenAI GPT-4.5技术详解与未来展望

一、GPT-4.5的技术突破‌ OpenAI在人工智能领域的持续创新再次引领了技术潮流。近期，OpenAI内部已经成功实现了GPT-4.5的开发，这一版本相较于前代在多个方面实现了显著的技术突破‌。 GPT-4.5在算法优化和数据处理上进行了多项创新，使得模型在对自然语言的理解上，尤其是在…...

编程日记 2025/5/9 22:16:45

【科技革命】颠覆性力量与社会伦理的再平衡

目录 2025年科技革命：颠覆性力量与社会伦理的再平衡目录技术突破全景图认知智能的范式转移量子霸权实现路径生物编程技术革命能源结构重构工程产业生态链重构医疗健康新范式教育系统智能进化金融基础设施变革制造范式革命科技伦理与文明演进 2025年科技革命&#…...

编程日记 2025/5/9 22:07:16

好好说话：深度学习扫盲

大创项目是和目标检测算法YOLO相关的，浅浅了解了一些有关深度学习的知识。在这里根据本人的理解做一些梳理。深度学习是什么？ 之前经常听到AI，机器学习，深度学习这三个概念，但是对于三者的区别一直很模糊。 AI&…...

编程日记 2025/5/9 22:01:54

一款基于若依的wms系统

Wms-Ruoyi-仓库库存管理若依wms是一套基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单。毫无保留给个人及企业免费使用。前端采用Vue、Element UI。后端采用Spring Boot、Spring Security、Redis & Jwt。权限认证使用Jwt，支持多终…...

编程日记 2025/5/9 21:45:39

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析⑥】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase06 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-006测试用例用例ID测试场景验证要点参考条款预期…...

编程日记 2025/5/9 3:57:54

img标签的title和alt

img标签的title和alt 显示上 title:鼠标移入到图片上时候显示的内容； alt:图片无法加载时候显示的内容; <div class"box"><div><h3>title</h3><img src"./image/poster.jpg" title"这是封…...

编程日记 2025/5/9 21:59:38

redis cluster测试

集群节点信息这时候停掉一个master 172.30.60.31 从集群信息集中我们可以看到172.30.60.31的slave是172.30.60.41，查看41的日志，发现他成为了新的master 这时候我们在将172.30.60.41也杀死，会发现集群异常了尝试把172.30.60.31启动&#xff…...

编程日记 2025/5/6 0:14:23

harmonyOS的文件的增、删、读、写相关操作(fs/content)

注意: 操作harmonyOS的文件只能对app沙箱内的文件进行操作牵扯到两个支持点: fs和content这两个API; 具体的操作方法看下图: 创建文件 //js 引入 import fs from "ohos.files.fs" import featureAbility from "ohos.ability.featureAbility"; // 上下…...

编程日记 2025/5/9 21:55:18

12. Function Call实践

本文主要讲解大模型的function call能力，包括使用国内外在线模型和本地模型，以及如何微调以增强大模型的function call能力。回顾下大模型学习思路： 1. 环境准备 1.1 平台上【模型调试】中创建 2. 调用国内外大模型测试 2.1 调用GPT-4 代…...

编程日记 2025/5/5 20:51:24

随机生成多孔介质matlab程序

matlab生成随机分布纤维代码，用于后续模拟处理资源文件列表随机生成多孔介质matlab程序.pdf , 5821...

编程日记 2025/4/15 2:20:24

华为云kubernetes基于keda自动伸缩deployment副本（监听redis队列长度）

1 概述 KEDA（Kubernetes-based Event-Driven Autoscaler，网址是https://keda.sh）是在 Kubernetes 中事件驱动的弹性伸缩器，功能非常强大。不仅支持根据基础的CPU和内存指标进行伸缩，还支持根据各种消息队列中的长度、…...

编程日记 2025/5/9 12:45:55

是时候说再见了

说再见 2018 to 2025 2018：学习 2018年开始读研。师兄师姐们说可以写写CSDN博客，对找工作也有帮助。于是在12月4日，发布了自己的第一篇文章[翻译] 神经网络与深度学习首页 - Index。当时还在学习各种基础知识，看到了这个英文文…...

编程日记 2025/5/6 19:59:32

数据结构与算法-栈与队列的应用递归表达式求值

参考学习：B站-逊哥带你学编程栈与队列的应用题1： 答案：B 题2： 答案：C 题3： 答案：D 题4： 答案：C 题5： 答案：B 题6： 答案&…...

编程日记 2025/5/4 7:26:33

vue3.x 的shallowReactive 与 shallowRef 详细解读

在 Vue 3.x 中，shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似，但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。 1. shallowReactive 作用 shallowReactive 创建一个浅层响应式对…...

编程日记 2025/5/5 8:37:09

前缀和(Prefix Sum)算法笔记C++

前缀和(Prefix Sum)算法介绍前缀和是一种预处理技术, 用于快速计算数组中任意子区间的元素之和. 它通过一次遍历创建一个辅助数组来存储从数组起始位置到当前索引位置所有元素的累加和, 从而使得后续查询操作的时间复杂度降低至 O ( 1 ) O(1) O(1). 定义对于给定的数组 n…...

编程日记 2025/5/6 22:41:40

负载测试工具有哪些？

Apache JMeter Apache JMeter 是一款开源的性能测试工具，主要用于对 Web 应用程序进行功能、负载和压力测试。JMeter 支持多种协议和技术，包括 HTTP, HTTPS, FTP 和 WebSocket 等。通过模拟大量并发用户访问来评估应用程序的表现1。 jmeter -n -t testp…...

编程日记 2025/5/8 15:57:06

ROS进阶：使用URDF和Xacro构建差速轮式机器人模型

前言本篇文章介绍的是ROS高效进阶内容，使用URDF 语言（xml格式）做一个差速轮式机器人模型，并使用URDF的增强版xacro，对机器人模型文件进行二次优化。差速轮式机器人：两轮差速底盘由两个动力轮位于底盘左…...

编程日记 2025/5/5 15:48:40

windows编译使用gtest

下载： Release v1.12.1 google/googletest GitHub 编译： 编译源码中的CMakeLists.txt： 编译后生成的目录是BUILD: *(编译之前需要安装cmake: ) 关注下面这两个目录： 在vs中打开： 配置属性： 点击编译&a…...

编程日记 2025/5/6 7:57:13

C++编程，#include ＜iostream＞详解,以及using namespace std；作用

在C编程中，#include <iostream> 是用来包含输入/输出流头文件的预处理指令。它允许程序使用标准的输入/输出对象如 std::cout 和 std::cin，以便与标准输入和输出流进行交互。这一头文件是编写输入输出操作时必不可少的部分。讲到这里&#xff0c…...

编程日记 2025/5/8 20:01:04

【愚公系列】《Python网络爬虫从入门到精通》008-正则表达式基础

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/5/7 5:58:37

Golang并发编程最佳实践：协程与通道

Golang并发编程最佳实践：协程与通道本文旨在介绍Golang并发编程的最佳实践，重点讨论协程和通道的使用方法，以及相关的实际案例和代码示例。一、Golang并发编程简介又称Go语言）是一种由Google开发的编程语言，旨在提供…...

编程日记 2025/4/29 20:59:47

neural_gcm模型进行气象预测教程

简介 NeuralGCM （General circulation models）是Google开发的一种新型的天气和气候模型，它结合了传统的物理建模与机器学习技术，相关论文于2024年发表在nature上。它既可以做短期的天气预报，也可以做长期的气候预测。…...

编程日记 2025/5/3 17:21:20

怎么让DeepSeek自动化写作文案

在数字化时代，内容创作已成为企业争夺用户注意力的核心竞争力。面对海量信息需求，企业往往面临内容创作效率低下、质量参差不齐、周期长等问题。如何用技术手段解决这些痛点，成为企业迫切需要破解的难题。今天，我们将以DeepSeek为…...

编程日记 2025/5/8 10:52:19

淘宝/天猫获得淘宝商品评论 API 返回值说明||API评论接口

item_review-获得淘宝商品评论 taobao.item_review 公共参数名称类型必须描述keyString是调用key（必须以GET方式拼接在URL中）secretString是调用密钥api_nameString是API接口名称（包括在请求地址中）[item_search,item_get,ite…...

编程日记 2025/5/7 15:40:48

全面理解-c++11的引用折叠

在 C 中，引用折叠（Reference Collapsing） 是一组用于处理多重引用（如 T& & 或 T&& &&）的规则，主要出现在模板参数推导、auto 类型推导和 decltype 的上下文中。它是实现**通用引用…...

编程日记 2025/5/9 15:21:42

考研高数复习规范

前言这里记录我的高数复习规范与规划，希望能给需要考研的同学一点启发规范原因高数的内容很多，关键的是：会做题、拿高分首先最重要的就是抓住概念。比如有界无界的概念，间断点的概念、极限的概念其次是做题过程中得到的方法…...

编程日记 2025/5/9 14:43:40

2025 docker可视化管理面板DPanel的安装

1.什么是 DPanel ？ DPanel 是一款 Docker 可视化管理面板，旨在简化 Docker 容器、镜像和文件的管理。它提供了一系列功能，使用户能够更轻松地管理和部署 Docker 环境。软件特点： 可视化管理：提供直观的用户界面&#…...

编程日记 2025/5/9 14:39:20

「vue3-element-admin」Vue3 + TypeScript 项目整合 Animate.css 动画效果实战指南

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页： GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...

编程日记 2025/5/9 14:55:17

Python函数进阶250215

函数返回值进阶函数返回的内容也是地址 def func01():data [1, 2, 3]# 执行到此步后，[1, 2, 3]这块内存会有一个引用计数器，且值为2，因为内部的data与外部的v1都指向这块空间return data v1 func01()# v1 point the address of data, if…...

编程日记 2025/5/6 22:45:08

VMware Workstation Pro 下载（无需注册账号）

VMware Workstation Pro 目前对个人用户完全免费。有两种下载方式，分别为 1、Broadcom 官网下载需要注册账号，我懒得注册 2、VMware 更新服务器下载如果不想注册账号，可以通过 VMware 更新服务器直接下载。访问以下链接： ht…...

编程日记 2025/5/9 14:54:17

USB2.03.0摄像头区分UVC相机在linux中的常用命令

这里是引用一. USB2.0 & 3.0接口支持区分 1.1. 颜色判断 USB接口的颜色并不是判断版本的可靠标准，但根据行业常见规范分析如下： USB接口颜色与版本对照表： 接口颜色常见版本内部触点数量传输速度黑色USB2.04触点480 Mbps (60 MB/s)白…...

编程日记 2025/5/9 14:18:53

Linux入侵检查流程

1. 初步信息收集 1.1 系统信息 • 目的：了解当前系统的基本情况，包括操作系统版本、内核版本等。 • 命令： # 查看操作系统发行版信息 cat /etc/os-release # 查看内核版本 uname -r 1.2 网络信息 • 目的：查看网络连接状态、…...

编程日记 2025/5/9 15:09:40

（尚硅谷 Java 学习 B 站大学版）Day17 多态练习

Instanceof 关键字一：引言不能调用子类特有的方法、属性； 如何才能调用子类特有的属性和方法向下转型：使用强制类型转换符 Man m1(Man) p2 注：其中p2 为 Person 类型使用强转时，可能出现 ClassCastException …...

编程日记 2025/5/9 7:05:04

vscode配置django环境并创建django项目（全图文操作）

文章目录创建项目工作路径下载python插件：创建虚拟环境 1. 命令方式创建2. 图文方式创建在虚拟环境中安装Django创建Django项目安装Django插件选择虚拟环境创建项目工作路径输入 code . 下载python插件： 创建虚拟环境 1. 命令方式创建切换在工作…...

编程日记 2025/4/24 15:13:14

NLP 八股 DAY1：BERT

BERT全称：Pre-training of deep bidirectional transformers for language understanding，即深度双向Transformer。模型训练时的两个任务是预测句⼦中被掩盖的词以及判断输⼊的两个句⼦是不是上下句。在预训练好的BERT模型后⾯根据特定任务加上相应的⽹…...

编程日记 2025/5/9 13:57:53