设置 Diesel、Actix Web 和 Yew 的 Rust 项目步骤如下： 1. 创建新的 Rust 项目使用 Cargo 创建一个新项目： ```bash cargo new my_project cd my_project ``` 2. 添加依赖项在 `Cargo.toml` 文件中添加以下依赖： - **Diesel**（用于数据库操作）： ```toml [dependencies] diesel = { version = "2.0", features = ["postgres"] } dotenv = "0.15" ``` - **Actix Web**（用于构建 Web 服务）： ```toml [dependencies] actix-web = "4.0" ``` - **Yew**（用于构建前端 Web 应用）： ```toml [dependencies] yew = "0.20" ``` - 可选：若使用 PostgreSQL，还需添加： ```toml postgres = "0.7" ``` 3. 配置 Diesel - 初始化 Diesel： ```bash diesel setup ``` - 创建迁移文件以定义数据库表结构： ```bash diesel migration generate create_users ``` - 编辑生成的迁移文件（在 `migrations/xxxxx_create_users/up.sql` 中）定义表结构，例如： ```sql CREATE TABLE users ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL ); ``` - 应用迁移： ```bash diesel migration run ``` 4. 设置环境变量创建 `.env` 文件，配置数据库连接字符串： ``` DATABASE_URL=postgres://username:password@localhost/mydb ``` 5. 构建 Actix Web 后端服务在 `src/main.rs` 中编写简单的 API 示例： ```rust use actix_web::{get, web, App, HttpResponse, HttpServer}; use diesel::prelude::*; use diesel::pg::PgConnection; use dotenv::dotenv; use std::env; #[derive(serde::Deserialize)] struct User { name: String, } #[get("/")] async fn index() -> HttpResponse { HttpResponse::Ok().body("Hello from Actix Web!") } #[actix_web::main] async fn main() -> std::io::Result<()> { dotenv().ok(); let database_url = env::var("DATABASE_URL").expect("DATABASE_URL must be set"); let connection = PgConnection::establish(&database_url).expect("Failed to connect to database"); HttpServer::new(|| App::new().route("/", web::get().to(index))) .bind("127.0.0.1:8080")? .run() .await } ``` 6. 构建 Yew 前端应用在 `src/lib.rs` 或 `src/main.rs`（根据需要）中创建 Yew 组件： ```rust use yew::prelude::*; struct Model { link: ComponentLink, value: String, } enum Msg { UpdateValue(String), } impl Component for Model { type Message = Msg; type Properties = (); fn create(_props: Self::Properties, link: ComponentLink) -> Self { Self { link, value: String::new(), } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::UpdateValue(val) => { self.value = val; true } } } fn view(&self) -> Html { html! {

{ "Welcome to Yew!" }

{ &self.value }

} } } fn main() { yew::Renderer::::new().render(); } ``` 7. 运行项目 - 启动 Actix Web 服务： ```bash cargo run --bin server ``` - 启动 Yew 前端（需使用 `wasm-pack` 构建为 WASM）： ```bash wasm-pack build --target web ``` 然后将生成的 `pkg/` 目录内容嵌入到 HTML 页面中，并通过本地服务器运行。 8. 整合前后端 - 将 Yew 构建的前端静态资源部署到 Actix Web 服务中，或通过代理方式访问。 - 在 Actix Web 中提供 API 接口供 Yew 调用，如 `/api/users` 获取用户数据。 9. 开发与调试 - 使用 `cargo watch` 自动重新编译。 - 利用浏览器开发者工具调试前端逻辑。 - 使用日志输出调试后端行为（可加入 `tracing` 或 `log` crate）。完成以上步骤后，即可拥有一个集成了 Diesel（数据库）、Actix Web（后端服务）和 Yew（前端框架）的完整 Rust Web 应用。

创建和编辑页面

课程内容已锁定