在Vue中使用SQLite數(shù)據(jù)庫的基礎應用詳解

更新時間：2025年02月13日 15:38:37 作者：像素檢測儀

這篇文章主要為大家詳細介紹了在Vue中使用SQLite數(shù)據(jù)庫的基礎應用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

一、環(huán)境準備

安裝 Node.js 和 npm：確保已安裝 Node.js 和 npm。

創(chuàng)建 Vue 項目：使用 Vue CLI 創(chuàng)建一個新的 Vue 項目：

vue create vue-sqlite-project

安裝 SQLite 驅(qū)動：在項目中安裝 sqlite3 庫：

npm install sqlite3

二、數(shù)據(jù)庫連接與操作

1. 創(chuàng)建數(shù)據(jù)庫連接

在 Vue 組件中，可以使用 sqlite3 模塊連接 SQLite 數(shù)據(jù)庫：

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. 創(chuàng)建表

使用 SQL 語句創(chuàng)建表：

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. 插入數(shù)據(jù)

插入數(shù)據(jù)到表中：

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. 查詢數(shù)據(jù)

查詢表中的數(shù)據(jù)：

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

5. 更新數(shù)據(jù)

更新表中的數(shù)據(jù)：

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. 刪除數(shù)據(jù)

刪除表中的數(shù)據(jù)：

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 組件示例，展示如何在組件中實現(xiàn)對 SQLite 數(shù)據(jù)庫的增刪改查操作：

<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數(shù)據(jù)庫的基礎應用詳解的文章就介紹到這了,更多相關Vue使用SQLite數(shù)據(jù)庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
SQLite

Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實例
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實例形式分析了vue基于axios庫post傳送表單json格式數(shù)據(jù)相關操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2023-06-06
Vue中使用Lodash的實現(xiàn)示例
本文主要介紹了Vue中使用Lodash的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-devtools 打開源碼位置實現(xiàn)過程
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
vue實現(xiàn)nav導航欄的方法
這篇文章主要為大家詳細介紹了vue項目nav導航欄的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法(解決思路)
這篇文章主要介紹了Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法，解決思路也很簡單，本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2023-07-07
Vue實現(xiàn)省市區(qū)級聯(lián)下拉選擇框
這篇文章主要為大家詳細介紹了Vue實現(xiàn)省市區(qū)級聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
詳解.vue文件解析的實現(xiàn)
這篇文章主要介紹了詳解.vue文件解析的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue router 跳轉(zhuǎn)后回到頂部的實例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖
這篇文章主要介紹了vue 實現(xiàn)可拖曳的樹狀結(jié)構(gòu)圖，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-04-04