如何在Vue3和Vite项目中用SQLite数据库进行数据存储

vue create vue-sqlite

npm install better-sqlite3

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,
}

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

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

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

initDb()

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

npm run dev