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

目录

  • 一、环境准备
  • 二、数据库连接与操作
    • [1. 创建数据库连接](#1. 创建数据库连接)
    • [2. 创建表](#2. 创建表)
    • [3. 插入数据](#3. 插入数据)
    • [4. 查询数据](#4. 查询数据)
    • [5. 更新数据](#5. 更新数据)
    • [6. 删除数据](#6. 删除数据)
  • [三、在 Vue 组件中使用 SQLite](#三、在 Vue 组件中使用 SQLite)

一、环境准备

安装 Node.js 和 npm:确保已安装 Node.js 和 npm。

创建 Vue 项目:使用 Vue CLI 创建一个新的 Vue 项目:

javascript 复制代码
vue create vue-sqlite-project

安装 SQLite 驱动:在项目中安装 sqlite3 库:

javascript 复制代码
npm install sqlite3

二、数据库连接与操作

1. 创建数据库连接

在 Vue 组件中,可以使用 sqlite3 模块连接 SQLite 数据库:

javascript 复制代码
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 语句创建表:

javascript 复制代码
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. 插入数据

插入数据到表中:

javascript 复制代码
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. 查询数据

查询表中的数据:

javascript 复制代码
db.all(`SELECT * FROM users`, [], (err, rows) => {
  if (err) {
    console.error(err.message);
  }
  rows.forEach((row) => {
    console.log(row);
  });
});

5. 更新数据

更新表中的数据:

javascript 复制代码
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. 删除数据

删除表中的数据:

javascript 复制代码
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 数据库的增删改查操作:

javascript 复制代码
<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>
相关推荐
程序员编程指南7 分钟前
Qt OpenGL 集成:开发 3D 图形应用
c语言·数据库·c++·qt·3d
婪苏(Python学习ing)1 小时前
MySQL 与 Redis 基础入门:从安装到核心操作
数据库
幻灭行度2 小时前
通过redis_exporter监控redis cluster
数据库·redis·缓存
Wang's Blog2 小时前
Nestjs框架: 基于Mongodb的多租户功能集成和优化
数据库·mongodb·多租户
Britney⁺♛&?ꪶꪫꪜꫀ2 小时前
Vue2上
vue.js·npm
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
Edingbrugh.南空2 小时前
Aerospike架构深度解析:打造web级分布式应用的理想数据库
数据库·架构
Cxzzzzzzzzzz4 小时前
数据库索引详解:原理、设计原则与应用场景
数据库·mysql
Alla T4 小时前
【通识】数据库
数据库·oracle
烙印6014 小时前
MySQL的底层原理--InnoDB数据页结构
java·数据库·mysql