rust + react 全栈开发一个笔记本 app （上）

原创

TPEngineer

发布于 2024-06-16 11:02:45

2920

前言

为了提高 rust 熟练度，笔者用 rust + react 全栈开发了一个笔记本 app ，其中 rust 中涉及到 actix-web 框架处理 http 请求、sqlx 连接数据库。

一、截图展示

二、技术栈

前端

react

tailwind

后端

rust

sqlx/mysql

actix/actix-web

三、开发环境

笔者的电脑是 ubuntu 24.04 amd 64位系统，因此环境的准备步骤如下。

1.安装 docker

sudo snap install docker

2.安装 mysql

sudo docker pull docker.kubesre.xyz/mysql:latest

注意 dockerhub 已经被封，我们得加上公益镜像地址如 docker.kubesre.xyz 。

3.安装 rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

4.配置 rust crates 镜像

官方镜像源实在太慢，我们采用 ustc 的镜像源。

mkdir -vp ${CARGO_HOME:-$HOME/.cargo}

cat << EOF | tee -a ${CARGO_HOME:-$HOME/.cargo}/config.toml
[source.crates-io]
replace-with = 'ustc'

[source.ustc]
registry = "sparse+https://mirrors.ustc.edu.cn/crates.io-index/"
EOF

5.安装 nodejs

我们用nvm 安装 nodejs，考虑到从 github 安装 nvm 非常慢，我们从 gitee 安装，如下命令。

bash -c "$(curl -fsSL https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh)"

nvm安装完毕后，即可安装 nodejs

nvm install 20
nvm use 20

6.准备前端开发环境

首先我们进入前端代码目录，安装依赖并运行。

npm install pnpm -g
pnpm install
pnpm dev

7.准备后端开发环境

首先我们先启动 mysql 服务器，配置端口和密码。

sudo docker run -itd --name mysql-server -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql

注意我们要初始化数据库。

CREATE DATABASE notes
    DEFAULT CHARACTER SET = 'utf8mb4';

然后我们进入后端代码目录，修改配置文件。

MYSQL_DATABASE=notes
MYSQL_USER=root
MYSQL_PASSWORD=123456
MYSQL_ROOT_PASSWORD=123456

# Don't worry about the placeholders. Rust supports this feature.
DATABASE_URL=mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@localhost:3306/${MYSQL_DATABASE}

接下来进行数据迁移