跳到主要内容

2 篇博文 含有标签「tauri-plugin-sql」

查看所有标签

这两天想用待办事项的番茄钟,以前也用过很多其他的产品,包括免费的、付费的,在手机上的还有在电脑上的都有。

然后最近都一直在学Rust的内容,以及之前学过一点Tauri,所以就想着自己写一个番茄钟的应用,然后就有了这个项目。

项目初衷

  1. 用Rust写一个待办事项番茄钟的应用,练习Rust的开发
  2. 足够简单好用,只专注于今天的事情, 不要有太多的功能(以往用的番茄钟都有很多功能,比如统计、报表等等,但是我只想专注于今天的事情, 比如四象限等还要想怎么安排,然后就容易导致事情拖延,托着拖着就不做了)
  3. 既有待办事项,又有番茄钟,两者结合,不要分开,这样就不用来回切换了
  4. 只专注于电脑端,不要有手机端,因为手机端的话,就容易分心,不专注于今天的事情了
  5. 只专注于电脑端,只专注于办公

项目地址

Github Repo: https://github.com/yuxuetr/todo-pomodoro

安装依赖

  1. 安装Rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
  1. 安装Node.js 安装链接和方法

  2. 安装pnpm

npm i -g pnpm

构建方式

  1. 克隆仓库
git clone https://github.com/yuxuetr/todo-pomodoro.git
  1. 安装依赖
cd todo-pomodoro
pnpm install
  1. 构建运行项目
pnpm run tauri dev
  1. 运行结果如图 待办事项番茄钟

设置应用的图标

图标文件存放在src-tauri/icons下,在这下面有针对不同平台的应用图标格式。

图标的设置在tauri.conf.json文件中,如下所示

"bundle": {
"active": true,
"targets": "all",
"identifier": "com.yuxuetr.dev",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
]
}

在MacOS下,应用的图标是icon.icns,所以需要将图标文件放到icons目录下,然后在tauri.conf.json文件中设置图标的路径。

MacOS平台应用的图标大小是1024x1024,所以需要将图标文件转换成1024x1024的大小,然后修改成icon.icns放到icons目录下。

如果需要将图标由直角转换成圆角,可以使用在线工具。也可以试试我写的工具。

有三个不同的版本:

应用发布

第一次发布应用,需要先构建应用需要使用--target参数,指定目标平台

cargo tauri build --target aarch64-apple-darwin
# 或者
pnpm tauri build --target aarch64-apple-darwin

之后每次发布应用,只需要执行下面的命令即可

pnpm tauri build

应用构建与发布

执行命令后,会弹出下面的窗口

应用安装

然后按照Mac应用的方式安装应用,将应用拖到应用文件夹即可

项目后续

  1. 项目后期增加统计功能(如果有必要的话)
  2. 项目后期增加命令行功能(Tauri支持clip命令,可以在命令行中使用)
鱼雪

Tauri是Electron的有利竞争对手,Tauri使用Rust作为后端开发可以适配任意前端框架。 详细介绍可以访问Tauri官网。本文我们使用React作为前端开发框架, 实现一个简单案例,演示在Tauri中如何配置数据库访问。

本次实验的软件版本如下

  • Rust: 1.77.0
  • Node: v20.9.0
  • Vite: 5.0.0
  • pnpm: 8.15.6
  • React: 18.2.0
  • Tauri-plugin-sql: v1

创建项目

首先,我们先创建项目,创建项目有很多方式:

  • 可以使用Rust的包管理工具cargo
  • 或者使用Node.js的包管理工具npmyarnpnpm
  • 或者也可以使用Shell或Windows的PowerShell使用脚本创建
  • 也可以使用Bun的包管理工具bunx

但在创建项目之前,我们首先要安装Rust的编译器,因为Tauri的后端代码以及整个项目要使用 Rust编译器进行编译。虽然不一定需要编写Rust代码,但是一定需要Rust的编译器编译整个项目。

  1. Linux或MacOS操作系统安装方式如下:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  1. Windows操作系统可以直接下载rustup-init可执行文件,参考, 寻找对应平台的软件下载链接。

在本文中由于我们使用React作为Tauri的前端开发框架,所以我们使用Node.js的方式创建项目。 对比npm,yarn,pnpmpnpm会表现的更好,所以我们采用pnpm来创建我们的示例项目。

这里如果没有安装Node.js,可以参考,先下载后安装。

Node安装成功后,自带npm,如要要安装pnpm,使用以下命令:

npm i -g pnpm

创建Tauri项目命令如下:

npm create tauri-app
# 或
pnpm create tauri-app

创建命令执行后,首先需要输入项目工程名,然后根据提示选择自己喜欢的选项即可。

项目创建成功后目录如下:

$ tree tauri-sql-demo
tauri-sql-demo
├── README.md
├── index.html
├── package.json
├── public
│   ├── tauri.svg
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── main.tsx
│   ├── styles.css
│   └── vite-env.d.ts
├── src-tauri
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons
│   │   ├── 128x128.png
│   │   ├── 128x128@2x.png
│   │   ├── 32x32.png
│   │   ├── Square107x107Logo.png
│   │   ├── Square142x142Logo.png
│   │   ├── Square150x150Logo.png
│   │   ├── Square284x284Logo.png
│   │   ├── Square30x30Logo.png
│   │   ├── Square310x310Logo.png
│   │   ├── Square44x44Logo.png
│   │   ├── Square71x71Logo.png
│   │   ├── Square89x89Logo.png
│   │   ├── StoreLogo.png
│   │   ├── icon.icns
│   │   ├── icon.ico
│   │   └── icon.png
│   ├── src
│   │   └── main.rs
│   └── tauri.conf.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

其中:

  • src是我们的前端代码目录,即跟我们平时使用的React代码目录相同,使用tauri-app创建方式, 并且使用React的前端框架,会默认使用Vite来构建前端代码。
  • src-tauri: 是Tauri的后端代码目录,是Rust项目工程组织代码,使用的是cargo做项目管理
  • src-tauri/tauri-config.json: 是用来配置前后端的协作,通信,后端API开放等功能

总而言之,相比于React项目,使用React的Tauri项目比纯React项目多了个src-tauri目录,其余内容就是一个 完整的React项目。

构建和运行初始化项目

初始化完项目,安装完依赖,我们先构建运行一下初始化项目,这样可以检查环境是否正常。

具体操作步骤如下:

  1. 进入到项目根目录
  2. 安装依赖
  3. 使用tauri-cli构建项目

命令如下:

cd tauri-sql-demo
pnpm install
pnpm tauri dev

运行成功后如下图: Tauri初始化界面

安装tauri-plugin-sql插件

初始化项目运行成功后,来开始我们的重头戏,配置Tauri的数据库访问。

这里首先要说明一点,在Tauri官网中默认配置tauri-plugin-sql是用的2.0的beta版本, 我们使用tauri-app创建的项目使用的是Tauri 1.x版本。所以我们在安装插件的时候需要指定v1版本。

配置tauri-plugin-sql分为两步:

  1. 安装核心插件,在Cargo.toml中添加插件配置
src-tauri/Cargo.toml
[dependencies.tauri-plugin-sql]
git = "https://github.com/tauri-apps/plugins-workspace"
branch = "v1"
features = ["sqlite"] # or "postgres", or "mysql"

其中:

  • git: 指定了使用Github的方式安装插件
  • branch: 指定软件版本,这里我们使用v1
  • features: 在Rust中features类似条件编译,我们选择sqlite则指定了我们是使用了sqlite数据库的插件
  1. 安装JavaScript客户端绑定
pnpm add https://github.com/tauri-apps/tauri-plugin-sql#v1
# or
npm add https://github.com/tauri-apps/tauri-plugin-sql#v1
# or
yarn add https://github.com/tauri-apps/tauri-plugin-sql#v1

安装JavaScript 客户端API,使用JS的方式访问tauri-plugin-sql插件中功能,便于与我们的前端项目 结合。

配置tauri-plugin-sql插件

  1. 注册tauri-plugin-sql插件
src-tauri/src/main.rs
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_sql::Builder::default().build())
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

这里,在Rust的main函数中,使用plugin方法注册tauri-plugin-sql插件

使用JavaScript或TypeScript访问数据库

我们使用一个单独的文件封装数据库的连接,数据库的增删改查。

代码如下:

src/dbop.ts
import Database from "tauri-plugin-sql-api";


// 初始化数据库连接
async function initDb() {
// sqlite数据库,路径相对于tauri::api::path::BaseDirectory::App
const db = await Database.load(
"sqlite:example.db"
);
return db;
}

// 创建表
export async function createAuthTable() {
const db = await initDb();
await db.execute(`
CREATE TABLE IF NOT EXISTS auth (
id INTEGER PRIMARY KEY AUTOINCREMENT,
userId TEXT NOT NULL,
scope TEXT NOT NULL
)
`);
}

// 插入数据
export async function insertAuth(userId: string, scope: string) {
const db = await initDb();
await db.execute(`
INSERT INTO auth (userId, scope) VALUES (?, ?)
`, [userId, scope]);
}

// 查询数据
export async function queryAuth() {
const db = await initDb();
return await db.select("SELECT * FROM auth");
}

// 更新数据
export async function updateAuth(id: number, userId: string, scope: string) {
const db = await initDb();
await db.execute(`
UPDATE auth SET userId = ?, scope = ? WHERE id = ?
`, [userId, scope, id]);
}

// 删除数据
export async function deleteAuth(id: number) {
const db = await initDb();
await db.execute(`
DELETE FROM auth WHERE id = ?
`, [id]);
}

首先,我们从tauri-plugin-sql-api中导入Database对象, 关于数据库的操作我们都要依赖这个Database对象

由于tauri-plugin-sql都是支持异步并发操作,所以我们创建的函数都是异步函数, 函数分别是:

  • initDb: 创建数据库连接,这里我们指定SQLite的文件名为example.db,返回创建成功后的数据库db实例
  • createAuthTable: 创建Auth数据库表
  • insertAuth: 插入数据,接收两个参数
  • queryAuth: 查询Auth表数据
  • updateAuth: 更新Auth表数据,接收三个参数
  • deleteAuth: 删除Auth表数据,接收id参数

配置Tauri文件访问权限

在本案例中,我们使用SQLite数据库,tauri-plugin-sql插件,底层是依赖sqlx库来操作数据库。 在连接SQLite数据库时,如果example.db数据库文件不存在,sqlx则会自动创建example.db文件, 那么就需要有文件访问功能开启,否则不能正确创建example.db文件,会导致数据库不能正确创建,导致最终 案例失败。如果这里使用的是MySQL或者Postgres则不需要配置这里。

具体操作如下,我们需要在src-tauri/tauri.config.json中开启fs权限

src-tauri/tauri.conf.json
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devPath": "http://localhost:1420",
"distDir": "../dist"
},
"package": {
"productName": "tauri-sql-demo",
"version": "0.0.0"
},
"tauri": {
"allowlist": {
"all": false,
"fs": {
"all": true
},
"shell": {
"all": false,
"open": true
}
},
"windows": [
{
"title": "tauri-sql-demo",
"width": 800,
"height": 600
}
],
"security": {
"csp": null
},
"bundle": {
"active": true,
"targets": "all",
"identifier": "com.tauri.dev",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
]
}
}
}

在前端中调用数据库操作

src/App.tsx
import { useState, useEffect } from "react";
import { createAuthTable, insertAuth, queryAuth } from './dbop';

function App() {
const [rows, setRows] = useState([]);
useEffect(() => {
async function setupDb() {
await createAuthTable();
await insertAuth('user123', 'admin');
const queriedRows = await queryAuth();
console.log(`Queried Rows Length: ${queriedRows.length}`);
setRows(queriedRows);
}

setupDb();
}, []);

return (
<div className='App'>
<h1>Tauri + React Database Example</h1>
<div>
<h2>Auth Table Rows</h2>
<h2>Queried Rows Length: {rows.length}</h2>
<ul>
{
rows.map((row, index) => (
<li key={index}>
ID: {row.id}, UserId: {row.userId}, Scope: {row.scope}
</li>
))
}
</ul>
</div>
</div>
)
}

export default App;

首先,我们导入我们的数据库操作; 然后使用useState存储数据库的查询结果,存放在rows变量中; 最后,遍历查询出来的的结果做展示,如下图:

tauri-plugin-sql连接数据库结果展示

案例地址

Tauri-SQL-Plugin-Demo

鱼雪