如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲

更新時間：2024年03月22日 11:50:48 作者：A丶塵土

SQLite是一種嵌入式關系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務器的、自給自足的、事務性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關資料,需要的朋友可以參考下

創(chuàng)建項目

首先，我們需要創(chuàng)建一個新的 Vue3 項目?？梢允褂靡韵旅顒?chuàng)建一個名為 vue-sqlite 的新項目：

vue create vue-sqlite

然后，安裝所需的依賴項，包括 better-sqlite3：

npm install better-sqlite3

創(chuàng)建 SQLite 數(shù)據(jù)庫

接下來，我們需要創(chuàng)建 SQLite 數(shù)據(jù)庫。可以在項目根目錄下創(chuàng)建一個名為 database.js 的文件，并將以下代碼添加到文件中：

const sqlite = require('better-sqlite3')
const path = require('path')

const dbPath = path.join(__dirname, 'database.sqlite')
const db = new sqlite(dbPath)

const initDb = () => {
  db.prepare(`
    CREATE TABLE IF NOT EXISTS todos (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      text TEXT NOT NULL,
      completed INTEGER NOT NULL DEFAULT 0
    );
  `).run()
}

module.exports = {
  db,
  initDb,
}

在上述代碼中，我們使用 better-sqlite3 庫創(chuàng)建了一個名為 db 的 SQLite 數(shù)據(jù)庫實例，并將其導出。同時，我們還定義了一個名為 initDb 的函數(shù)，用于初始化數(shù)據(jù)庫。在 initDb 函數(shù)中，我們使用 SQL 語句創(chuàng)建了一個名為 todos 的表，該表包括 id、text 和 completed 三個字段。

創(chuàng)建數(shù)據(jù)模型

接下來，我們需要創(chuàng)建數(shù)據(jù)模型?？梢栽陧椖扛夸浵聞?chuàng)建一個名為 Todo.js 的文件，并將以下代碼添加到文件中：

const { db } = require('./database')

class Todo {
  constructor(text, completed = false) {
    this.text = text
    this.completed = completed
  }

  save() {
    const stmt = db.prepare(`
      INSERT INTO todos (text, completed)
      VALUES (?, ?)
    `)
    stmt.run(this.text, this.completed ? 1 : 0)
  }

  static findAll() {
    const stmt = db.prepare(`
      SELECT *
      FROM todos
    `)
    const rows = stmt.all()
    return rows.map(row => new Todo(row.text, row.completed))
  }

  static findById(id) {
    const stmt = db.prepare(`
      SELECT *
      FROM todos
      WHERE id = ?
    `)
    const row = stmt.get(id)
    return row ? new Todo(row.text, row.completed) : null
  }

  update() {
    const stmt = db.prepare(`
      UPDATE todos
      SET text = ?, completed = ?
      WHERE id = ?
    `)
    stmt.run(this.text, this.completed ? 1 : 0, this.id)
  }

  delete() {
    const stmt = db.prepare(`
      DELETE FROM todos
      WHERE id = ?
    `)
    stmt.run(this.id)
  }
}

module.exports = Todo

在上述代碼中，我們定義了一個名為 Todo 的類，用于表示待辦事項的數(shù)據(jù)模型。在構造函數(shù)中，我們定義了 text 和 completed 兩個屬性。同時，我們還定義了 save、findAll、findById、update 和 delete 等方法，用于對數(shù)據(jù)進行增刪改查操作。

在 save 方法中，我們使用 SQL 語句將當前待辦事項插入到 todos 表中。在 findAll 方法中，我們使用 SQL 語句查詢所有的待辦事項，并將查詢結果轉換為 Todo 類的實例。在 findById 方法中，我們使用 SQL 語句查詢指定 ID 的待辦事項，并將查詢結果轉換為 Todo 類的實例。在 update 方法中，我們使用 SQL 語句更新指定 ID 的待辦事項。在 delete 方法中，我們使用 SQL 語句刪除指定 ID 的待辦事項。

創(chuàng)建界面

接下來，我們需要創(chuàng)建界面?？梢栽陧椖扛夸浵聞?chuàng)建一個名為 TodoList.vue 的文件，并將以下代碼添加到文件中：

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo"> 
      <input v-model="newTodoText" type="text" placeholder="Add a new todo">
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" @change="updateTodo(todo)">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import Todo from './Todo'

export default {
  data() {
    return {
      newTodoText: '',
      todos: [],
    }
  },
  async mounted() {
    const rows = await Todo.findAll()
    this.todos = rows
  },
  methods: {
    async addTodo() {
      const todo = new Todo(this.newTodoText)
      todo.save()
      this.todos.push(todo)
      this.newTodoText = ''
    },
    async updateTodo(todo) {
      todo.update()
    },
    async deleteTodo(todo) {
      todo.delete()
      this.todos = this.todos.filter(t => t.id !== todo.id)
    },
  },
}
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

在上述代碼中，我們定義了一個名為 TodoList 的 Vue組件，用于展示待辦事項列表。在 data 中，我們定義了 newTodoText 和 todos 兩個屬性。在 mounted 生命周期鉤子中，我們使用 Todo 類的 findAll 方法查詢所有的待辦事項，并將查詢結果賦值給 todos 屬性。在模板中，我們使用 v-for 指令渲染 todos 列表，并通過 v-model 指令和 @change 事件實現(xiàn)待辦事項的勾選和更新。同時，我們也通過 @click 事件實現(xiàn)了待辦事項的刪除。

集成 SQLite

現(xiàn)在，我們已經(jīng)可以使用 Todo 類對 SQLite 數(shù)據(jù)庫進行增刪改查操作，也已經(jīng)可以通過 TodoList 組件展示待辦事項列表。接下來，我們需要將它們集成起來。可以在 src/main.js 文件中將以下代碼添加到文件中：

import { createApp } from 'vue'
import App from './App.vue'
import { initDb } from './database'

initDb()

createApp(App).mount('#app')

在上述代碼中，我們首先調(diào)用了 initDb() 函數(shù)，用于初始化 SQLite 數(shù)據(jù)庫。然后，我們使用 createApp 函數(shù)創(chuàng)建一個 Vue 應用，并將其掛載到 HTML 中的 #app 元素上。

現(xiàn)在，我們已經(jīng)完成了使用 Vue3 和 Vite 創(chuàng)建 SQLite 數(shù)據(jù)庫并進行數(shù)據(jù)存儲的過程?？梢酝ㄟ^運行以下命令啟動應用程序：

npm run dev

打開瀏覽器并訪問 http://localhost:3000，即可看到待辦事項列表頁面?，F(xiàn)在，我們可以添加、更新和刪除待辦事項，并且它們的數(shù)據(jù)會存儲在 SQLite 數(shù)據(jù)庫中。

結語

本文介紹了如何在 Vue3 和 Vite 項目中使用 SQLite 數(shù)據(jù)庫進行數(shù)據(jù)存儲。我們使用了 better-sqlite3 庫來創(chuàng)建和管理 SQLite 數(shù)據(jù)庫，并使用 Vue3 來開發(fā)前端界面。通過本文的指導，您可以輕松地將 SQLite 數(shù)據(jù)庫集成到您的

到此這篇關于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的文章就介紹到這了,更多相關Vue3 Vite用SQLite數(shù)據(jù)存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: