本篇文章將介紹如何在 Vue3 和 Vite 項(xiàng)目中使用 SQLite 數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)。我們將使用 better-sqlite3 庫(kù)來(lái)創(chuàng)建和管理 SQLite 數(shù)據(jù)庫(kù)，并將使用 Vue3 來(lái)開(kāi)發(fā)前端界面。

創(chuàng)建項(xiàng)目

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

vue create vue-sqlite

然后，安裝所需的依賴項(xiàng)，包括 better-sqlite3：

npm install better-sqlite3

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

接下來(lái)，我們需要?jiǎng)?chuàng)建 SQLite 數(shù)據(jù)庫(kù)。可以在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 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 庫(kù)創(chuàng)建了一個(gè)名為 db 的 SQLite 數(shù)據(jù)庫(kù)實(shí)例，并將其導(dǎo)出。同時(shí)，我們還定義了一個(gè)名為 initDb 的函數(shù)，用于初始化數(shù)據(jù)庫(kù)。在 initDb 函數(shù)中，我們使用 SQL 語(yǔ)句創(chuàng)建了一個(gè)名為 todos 的表，該表包括 id、text 和 completed 三個(gè)字段。

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

接下來(lái)，我們需要?jiǎng)?chuàng)建數(shù)據(jù)模型?？梢栽陧?xiàng)目根目錄下創(chuàng)建一個(gè)名為 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

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

在 save 方法中，我們使用 SQL 語(yǔ)句將當(dāng)前待辦事項(xiàng)插入到 todos 表中。在 findAll 方法中，我們使用 SQL 語(yǔ)句查詢所有的待辦事項(xiàng)，并將查詢結(jié)果轉(zhuǎn)換為 Todo 類(lèi)的實(shí)例。在 findById 方法中，我們使用 SQL 語(yǔ)句查詢指定 ID 的待辦事項(xiàng)，并將查詢結(jié)果轉(zhuǎn)換為 Todo 類(lèi)的實(shí)例。在 update 方法中，我們使用 SQL 語(yǔ)句更新指定 ID 的待辦事項(xiàng)。在 delete 方法中，我們使用 SQL 語(yǔ)句刪除指定 ID 的待辦事項(xiàng)。

創(chuàng)建界面

接下來(lái)，我們需要?jiǎng)?chuàng)建界面?？梢栽陧?xiàng)目根目錄下創(chuàng)建一個(gè)名為 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>

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

集成 SQLite

現(xiàn)在，我們已經(jīng)可以使用 Todo 類(lèi)對(duì) SQLite 數(shù)據(jù)庫(kù)進(jìn)行增刪改查操作，也已經(jīng)可以通過(guò) TodoList 組件展示待辦事項(xiàng)列表。接下來(lái)，我們需要將它們集成起來(lái)。可以在 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ù)庫(kù)。然后，我們使用 createApp 函數(shù)創(chuàng)建一個(gè) Vue 應(yīng)用，并將其掛載到 HTML 中的 #app 元素上。

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

npm run dev

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

結(jié)語(yǔ)

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

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

最新評(píng)論