在Vue中使用SQLite数据库的基础应用详解
更新时间：2025年02月13日 15:38:37 作者：像素检测仪
这篇文章主要为大家详细介绍了在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 table
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.');
});
// Fetch users
this.fetchUsers(db);
// Close database connection
db.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数据库的基础应用详解的文章就介绍到这了,更多相关Vue使用SQLite数据库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中的路由跳转及传参的多种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下2023-06-06
本文主要介绍了Vue中使用Lodash的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了vue-devtools 打开源码位置实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue实现省市区级联下拉选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了详解.vue文件解析的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
今天小编就为大家分享一篇vue router 跳转后回到顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue 实现可拖曳的树状结构图，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论