如何在Vue3和Vite项目中用SQLite数据库进行数据存储
作者：A丶尘土
本篇文章将介绍如何在 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 = 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 的类，用于表示待办事项的数据模型。在构造函数中，我们定义了 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 数据库集成到您的
到此这篇关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的文章就介绍到这了,更多相关Vue3 Vite用SQLite数据存储内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！