查看“Electron+vue+sqlite3”的源代码


== 安装sqlite3 ==

<pre>npm install better-sqlite3</pre>
<br>

<span id="创建-sqlite-数据库"></span>
== 创建 SQLite 数据库 ==

在项目根目录下创建一个名为 database.js 的文件

<pre>const sqlite = require('better-sqlite3')
const path = require('path')

const dbPath = './database.sqlite'
const db = new sqlite(dbPath)

const initDb = () =&gt; {
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,
}
export {
db,
initDb,
}</pre>
<br>

== 创建界面 ==

在项目根目录下创建一个名为 TodoList.vue 的文件

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

&lt;script&gt;
import {db, initDb} from './database.js'

initDb();

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 =&gt; 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)
}
}

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 =&gt; t.id !== todo.id)
    },
},
}
&lt;/script&gt;

&lt;style&gt;
.completed {
text-decoration: line-through;
}
&lt;/style&gt;</pre>
<br>

<span id="集成-sqlite"></span>
== 集成 SQLite ==

<pre>&lt;script setup&gt;
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import TodoList from './TodoList.vue'
&lt;/script&gt;

&lt;template&gt;
&lt;header&gt;
    &lt;img alt=&quot;Vue logo&quot; class=&quot;logo&quot; src=&quot;@/assets/logo.svg&quot; width=&quot;125&quot; height=&quot;125&quot; /&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
    &lt;HelloWorld msg=&quot;You did it!&quot; /&gt;

    &lt;nav&gt;
        &lt;RouterLink to=&quot;/&quot;&gt;Home&lt;/RouterLink&gt;
        &lt;RouterLink to=&quot;/about&quot;&gt;About&lt;/RouterLink&gt;
    &lt;/nav&gt;
    &lt;/div&gt;
    &lt;TodoList&gt;&lt;/TodoList&gt;
&lt;/header&gt;

&lt;RouterView /&gt;
&lt;/template&gt;

&lt;style scoped&gt;
header {
line-height: 1.5;
max-height: 100vh;
}

.logo {
display: block;
margin: 0 auto 2rem;
}

nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}

nav a.router-link-exact-active {
color: var(--color-text);
}

nav a.router-link-exact-active:hover {
background-color: transparent;
}

nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
border: 0;
}

@media (min-width: 1024px) {
header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
}

.logo {
    margin: 0 2rem 0 0;
}

header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
}

nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
}
}
&lt;/style&gt;</pre>
<br>