前言

Tauri 跨端笔记实战项目是基于 Notegen 开源项目，本系列深度解析如何运用Tauri框架开发跨平台AI笔记应用。涵盖核心技术选型、架构设计、典型场景开发及常见问题解决方案，通过代码级演示带您掌握集成AI能力的全流程开发技巧。

NoteGen 应用截图：

存储分类

在前端开发中，我们很少接触本地数据存储的功能，这部分工作通常是后端来实现，前端使用到的本地存储一般为浏览器提供的方式，例如 localstorage、indexDB 这类，对于文件的操作仅限于对话框打开或保存文件。现在使用使用 Tauri 时，官方提供了相应的插件，可以实现系统级别的存储操作。

我将数据存储分为三类：文件、数据库、简单键值存储，它们所对应的功能和实现方式：

1. 文件，在记录时，需要在本地存放截图、插图的图片文件，在写作时，需要操作 .md 类型的文件。这类文件操作在 Tauri 中统一称为文件系统，官方提供了 @tauri-apps/plugin-fs 插件访问文件系统。
2. 数据库，一般前端都是调用后端接口，几乎没有使用过数据库，可能比较陌生，有些同学可能使用过 IndexDB，复杂程度要比 localstorage 复杂的多。但作为一款 APP，数据存在浏览器中可不是一个明智的选择。更好的选择是采用本地数据，我更倾向使用 SQLite，官方提供了 @tauri-apps/plugin-sql 插件，让前端可以通过 sqlx 与 SQL 数据库进行通信，支持 SQLite、MySQL 和 PostgreSQL。
3. 键值，这种很简单，类似平时使用的 localstorage，主要可以应用在系统配置或其他设置的记录上。官方提供了 @tauri-apps/plugin-store 来实现简单、持久的键值存储。

下图为 NoteGen 的数据目录，可以看到有图片、数据库文件、json。

接下来，我将具体介绍如何使用 Tauri 提供的插件进行这三种存储的实际操作。

文件系统

如果你接触过 node，对于这部分应该很好理解。

常见的文件操作包括对文件或文件夹的创建、删除、移动和重命名等。这些操作允许我们读取文件的内容和相关信息，同时也可以判断文件的状态。常见的状态判断包括检查文件或文件夹是否存在。在进行操作之前，一般都会先进行检查，因为对不存在的文件进行操作将会导致错。

通过以下命令进行安装：

pnpm tauri add fs

文件系统插件提供的方法，可以查看官方文档。所有的接口参数几乎都类似，一般为 path，options，path 很好理解，就是操作的路径，一般还会带上文件名和后缀。options 中，一般需要填写 baseDir 参数。接下来以 writeTextFile 方法来讲解一下如何使用：

function writeTextFile(path, data, options?): Promise<void>

参数：

一般情况下，我们不需要写完整的 path，因为可以通过 options.baseDir 参数来补全前置的路径，baseDir 对应的类型为 BaseDirectory，它是一个 enum 类型，比如常见的 BaseDirectory.AppData 对应了应用程序的数据路径，在 NoteGen 这个项目中，它对应的 path 为：/Users/xu/Library/Application Support/com.codexu.NoteGen，如果你想在这个文件夹下写入一个 demo.md 文件，那么你可以这样调用：

import{ writeTextFile, BaseDirectory } from '@tauri-apps/plugin-fs'

await writeTextFile('demo.md', 'balabala', {baseDir: BaseDirectory.AppData})

执行后，即可看到 demo.md 已被创建，其他方法也是类似的，理解这一点之后，你便能够轻松上手其他方法了。

SQL

如果没有特殊要求，数据库直接无脑选择 SQLite 即可，因为它是一个轻量级的关系数据库管理系统，它的设计目的是实现自包含、无服务器、零配置的数据库，数据库文件通常只有几百KB，适合作为嵌入式数据库使用。并且 SQLite 是一个跨端的数据库，不论是 PC 还是移动端都完美支持。

首先，在你的 Cargo.toml 文件中添加以下内容来安装插件:

然后使用以下命令安装 SQLite 插件：

pnpm tauri add sql

创建和使用数据库

import Database from '@tauri-apps/plugin-sql';
const db = await Database.load('sqlite:note.db');

这个命令用于创建或使用数据库。如果数据库不存在，则会自动创建，存储路径为前文提到的 BaseDirectory.AppData。

可以看到创建了一个叫 note.db 的文件。

创建表

export async function initMarksDb() {
  const db = await Database.load('sqlite:note.db');
  await db.execute(`
    create table if not exists marks (
      id integer primary key autoincrement,
      tagId integer not null,
      type text not null,
      content text default null,
      url text default null,
      desc text default null,
      deleted integer default 0,
      createdAt integer
    )
  `)
}

这里需要自己写 SQL，如果不了解如何写 SQL，可以先去学习一下，或者直接通过 AI 来生成代码。

在 NoteGen 项目中，我在 src/db 下创建了多个文件，来管理数据库，如果有不理解的地方可以参考源码。

如果你没有合适的数据库可视化工具，推荐使用 github.com/dbeaver/dbe…，这是一款免费的 SQL 可视化工具，并且他支持 SQLite。

键值

键值存储一般用于系统设置等选项，通常不会存储非常重要的信息，功能类似于浏览器中的 LocalStorage，通过命令安装 Store：

pnpm tauri add store

使用方式，由于非常简单，直接引用官方示例：

import { Store } from '@tauri-apps/plugin-store';

// Store 会在 JavaScript 绑定时自动加载。
const store = new Store('store.json');

// 设置一个值。
await store.set('some-key', { value: 5 });

// 获取一个值。
const val = await store.get('some-key');
console.log(val); // { value: 5 }

// 您可以在进行更改后手动保存存储
// 否则如上所述，它将在正常退出时保存。
await store.save();

这里有一点修改，是 store.json，这样我们将本地键值对存储为一个 json 文件，另外需要注意的是，这些操作都是异步的。

总结

有了本地文件和数据库的加持，就可以顺利完成后续记录和笔记的数据存储，这对于一个离线应用至为重要。

相关链接

Github 仓库：github.com/codexu/note…

官网：notegen.top/