在 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>