本篇文章将介绍如何在 Vue3 和 Vite 项目中使用 SQLite 数据库进行数据存储。我们将使用 better-sqlite3
库来创建和管理 SQLite 数据库,并将使用 Vue3 来开发前端界面。
- 创建项目
首先,我们需要创建一个新的 Vue3 项目。可以使用以下命令创建一个名为 vue-sqlite
的新项目:
vue create vue-sqlite
然后,安装所需的依赖项,包括 better-sqlite3
:
npm install better-sqlite3
- 创建 SQLite 数据库
接下来,我们需要创建 SQLite 数据库。可以在项目根目录下创建一个名为 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
库创建了一个名为 db
的 SQLite 数据库实例,并将其导出。同时,我们还定义了一个名为 initDb
的函数,用于初始化数据库。在 initDb
函数中,我们使用 SQL 语句创建了一个名为 todos
的表,该表包括 id
、text
和 completed
三个字段。
- 创建数据模型
接下来,我们需要创建数据模型。可以在项目根目录下创建一个名为 Todo.js
的文件,并将以下代码添加到文件中:
const { db } = require('./database')class Todo {constructor(text, completed = false) {this.text = textthis.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 todosWHERE id = ?`)const row = stmt.get(id)return row ? new Todo(row.text, row.completed) : null}update() {const stmt = db.prepare(`UPDATE todosSET text = ?, completed = ?WHERE id = ?`)stmt.run(this.text, this.completed ? 1 : 0, this.id)}delete() {const stmt = db.prepare(`DELETE FROM todosWHERE id = ?`)stmt.run(this.id)}}module.exports = Todo
在上述代码中,我们定义了一个名为 Todo
的类,用于表示待办事项的数据模型。在构造函数中,我们定义了 text
和 completed
两个属性。同时,我们还定义了 save
、findAll
、findById
、update
和 delete
等方法,用于对数据进行增删改查操作。
在 save
方法中,我们使用 SQL 语句将当前待办事项插入到 todos
表中。在 findAll
方法中,我们使用 SQL 语句查询所有的待办事项,并将查询结果转换为 Todo
类的实例。在 findById
方法中,我们使用 SQL 语句查询指定 ID 的待办事项,并将查询结果转换为 Todo
类的实例。在 update
方法中,我们使用 SQL 语句更新指定 ID 的待办事项。在 delete
方法中,我们使用 SQL 语句删除指定 ID 的待办事项。
- 创建界面
接下来,我们需要创建界面。可以在项目根目录下创建一个名为 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
事件实现待办事项的勾选和更新。同时,我们也通过 @click
事件实现了待办事项的删除。
- 集成 SQLite
现在,我们已经可以使用 Todo
类对 SQLite 数据库进行增删改查操作,也已经可以通过 TodoList
组件展示待办事项列表。接下来,我们需要将它们集成起来。可以在 src/main.js
文件中将以下代码添加到文件中:
import { createApp } from 'vue'import App from './App.vue'import { initDb } from './database'initDb()createApp(App).mount('#app')
在上述代码中,我们首先调用了 initDb()
函数,用于初始化 SQLite 数据库。然后,我们使用 createApp
函数创建一个 Vue 应用,并将其挂载到 HTML 中的 #app
元素上。
现在,我们已经完成了使用 Vue3 和 Vite 创建 SQLite 数据库并进行数据存储的过程。可以通过运行以下命令启动应用程序:
npm run dev
打开浏览器并访问 http://localhost:3000
,即可看到待办事项列表页面。现在,我们可以添加、更新和删除待办事项,并且它们的数据会存储在 SQLite 数据库中。
结语
本文介绍了如何在 Vue3 和 Vite 项目中使用 SQLite 数据库进行数据存储。我们使用了 better-sqlite3
库来创建和管理 SQLite 数据库,并使用 Vue3 来开发前端界面。通过本文的指导,您可以轻松地将 SQLite 数据库集成到您的