使用 Dexie.js 创建一个离线笔记应用

maply

于 2025-01-12 06:30:00 发布

阅读量475

点赞数 9

分类专栏： vue Node.js 文章标签： javascript 笔记开发语言 Dexie.js 离线应用 vue.js

本文链接：https://blog.youkuaiyun.com/maply/article/details/145081983

版权

Node.js 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

使用 Dexie.js 创建一个离线笔记应用

创建一个使用 Dexie.js 的小型离线笔记应用，可以分为以下几个步骤。Dexie.js 是一个轻量级、强大的 IndexedDB 库，非常适合在浏览器中存储离线数据。

1. 初始化项目

安装必要工具

确保你已经安装了 Node.js 和 npm。
创建一个新的项目文件夹并初始化项目：

mkdir offline-notes
cd offline-notes
npm init -y

安装 Dexie.js 和其他工具（如 Vite 用于开发）：

npm install dexie
npm install vite --save-dev

添加必要的依赖，比如 Vue.js（前端框架，可选）：

npm install vue

2. 配置项目结构

创建以下文件结构：

offline-notes/
├── index.html
├── src/
│   ├── main.js
│   ├── db.js
│   ├── components/
│   │   ├── NoteList.vue
│   │   ├── AddNote.vue
├── package.json
└── vite.config.js

3. 设置 Vite 配置

在项目根目录创建 vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

4. 配置 Dexie 数据库

在 src/db.js 中创建并配置 Dexie 数据库：

import Dexie from 'dexie';

// 创建数据库实例
const db = new Dexie('NotesDatabase');

// 定义表结构
db.version(1).stores({
  notes: '++id, title, content, createdAt',
});

export default db;

5. 编写核心组件

NoteList.vue

显示所有笔记的组件：

<template>
  <div>
    <h1>笔记列表</h1>
    <ul>
      <li v-for="note in notes" :key="note.id">
        <h3>{{ note.title }}</h3>
        <p>{{ note.content }}</p>
        <small>{{ new Date(note.createdAt).toLocaleString() }}</small>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '../db';

export default {
  data() {
    return {
      notes: [],
    };
  },
  async mounted() {
    this.notes = await db.notes.toArray(); // 获取所有笔记
  },
};
</script>

AddNote.vue

添加新笔记的组件：

<template>
  <div>
    <h1>添加新笔记</h1>
    <form @submit.prevent="addNote">
      <input v-model="title" placeholder="标题" required />
      <textarea v-model="content" placeholder="内容" required></textarea>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
import db from '../db';

export default {
  data() {
    return {
      title: '',
      content: '',
    };
  },
  methods: {
    async addNote() {
      await db.notes.add({
        title: this.title,
        content: this.content,
        createdAt: new Date().toISOString(),
      });
      this.title = '';
      this.content = '';
      alert('笔记已保存！');
    },
  },
};
</script>

6. 整合应用入口

在 src/main.js 中挂载 Vue 应用：

import { createApp } from 'vue';
import NoteList from './components/NoteList.vue';
import AddNote from './components/AddNote.vue';

const app = createApp({
  components: {
    NoteList,
    AddNote,
  },
  template: `
    <div>
      <add-note></add-note>
      <note-list></note-list>
    </div>
  `,
});

app.mount('#app');

7. 创建 HTML 文件

在根目录的 index.html 中引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>离线笔记应用</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>