用Tauri构建桌面端应用程序：初探TodoMVC（上）

前端

2024-01-11 13:59:41

Rust学不下去？错，是太难了根本学不会，直接上实践就完事了！

就用学习一个框架最经典的实战项目TodoMVC，我们实现一个rust+sqlite做后端、react做前端的跨平台桌面端。

前言

Rust是一种强大的系统编程语言，以其内存安全性和高性能而闻名。但是，对于初学者来说，Rust的学习曲线可能有点陡峭。为了让学习Rust的过程更加轻松，我们可以从实践开始，尝试使用Rust构建一个实际的项目。

TodoMVC 是一个经典的示例应用程序，它展示了如何使用不同的技术栈构建一个简单的待办事项列表。本文将指导你使用Tauri和Rust构建一个跨平台的TodoMVC桌面应用程序。

Tauri简介

Tauri是一个基于Rust和Web技术的跨平台桌面应用程序框架。它允许你使用HTML、CSS和JavaScript构建用户界面，同时利用Rust强大的功能处理后端逻辑。

Tauri的优势包括：

跨平台支持： 在Windows、macOS和Linux系统上构建和部署应用程序。
原生性能： 利用Rust的高性能，构建响应迅速的应用程序。
Web技术： 使用熟悉的Web技术（HTML、CSS、JavaScript）构建用户界面。
易于使用： Tauri提供了简单的API，使开发人员能够轻松集成Rust和Web组件。

TodoMVC示例应用程序

在本文中，我们将使用Tauri构建一个TodoMVC桌面应用程序。该应用程序将允许用户创建、更新和删除待办事项。我们将使用Rust作为后端，使用React作为前端。

入门

首先，确保你已经安装了Rust和Node.js。然后，按照以下步骤创建新的Tauri项目：

cargo new my_todo_app --bin
cd my_todo_app
tauri new my_todo_app

这将创建一个新的Tauri项目，其中包含一个Rust后端和一个React前端。

创建Rust后端

在src/main.rs文件中，我们将定义Rust后端逻辑。首先，我们需要导入必要的模块：

use tauri::{AppHandle, Manager, State, StateWrapper};

接下来，我们将创建一个状态管理器来管理我们的待办事项列表：

#[derive(Clone, State)]
struct TodoState {
    todos: Vec<String>,
}

然后，我们将定义一些事件处理程序来处理前端的事件：

fn add_todo(state: State<TodoState>, description: String) {
    state.todos.push(description);
}

fn remove_todo(state: State<TodoState>, index: usize) {
    state.todos.remove(index);
}

最后，我们将注册我们的状态管理器和事件处理程序：

fn main() {
    let todo_state = StateWrapper::new(TodoState { todos: vec![] });

    tauri::Builder::default()
        .manage(todo_state)
        .invoke_handler(tauri::generate_handler![add_todo, remove_todo])
        .run(tauri::generate_context!())
        .expect("Failed to run application");
}

创建React前端

在src-tauri/src/App.js文件中，我们将定义React前端。首先，我们需要导入必要的模块：

import React, { useState, useEffect } from 'react';
import { useInterval } from 'react-use';
import { useTauri } from '@tauri-apps/tauri';

接下来，我们将创建一个函数来调用Rust事件处理程序：

const addTodo = description => {
  tauri.invoke('add_todo', { description });
};

const removeTodo = index => {
  tauri.invoke('remove_todo', { index });
};

最后，我们将使用状态管理和事件处理程序渲染我们的待办事项列表：

const App = () => {
  const todos = useState([]);
  const { invoke } = useTauri();

  const getTodos = async () => {
    const todos = await invoke('get_todos');
    setTodos(todos);
  };

  useInterval(() => { getTodos(); }, 1000);

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo} <button onClick={() => removeTodo(index)}>X</button></li>
        ))}
      </ul>
      <input type="text" placeholder="Add a new todo" onKeyPress={(e) => { if (e.key === 'Enter') addTodo(e.target.value); }} />
    </div>
  );
};