如何在Yew等前端框架中使用Rust Diesel？调用报错如何解决

Diesel是面向原生Rust运行环境（服务端、本地CLI工具）设计的ORM，完全无法直接运行在Yew所在的浏览器WASM环境中，你遇到的报错只是最表层的问题：

• Diesel依赖的PostgreSQL驱动需要调用本地系统C库、走原生TCP套接字连接数据库，浏览器WASM沙箱既不支持直接链接本地C库，也没有开放任意TCP连接的权限，本身就不具备直连数据库的能力
• 报错中提到的无法解析env模块，是因为Diesel读取DATABASE_URL环境变量的逻辑依赖服务端/本地环境的环境变量能力，浏览器环境不存在对应实现，编译到WASM时自然无法解析对应依赖。
• 退一步说，就算绕过编译报错，把数据库账号密码、连接地址直接写在前端代码里，等于把数据库完全暴露给所有访问站点的用户，会造成严重的安全漏洞。

不要在Yew前端代码中直接引入Diesel做数据库操作，采用前后端分层的架构实现：

• 把所有Diesel数据库操作逻辑迁移到独立的后端服务中，你之前写的CLI下可正常运行的Diesel代码可以直接复用在后端。后端可以用axum、actix-web等Rust Web框架编写，对外提供HTTP接口，接口收到请求后用Diesel查询PostgreSQL，再将结果以JSON格式返回。
  后端接口参考实现：

  use axum::{Json, routing::get, Router};
  use serde::Serialize;
  // 引入你之前写好的establish_connection和Post模型
  use database::{establish_connection, models::Post};
  
  async fn list_posts() -> Json<Vec<Post>> {
      use database::schema::posts::dsl::*;
      let conn = establish_connection();
      let post_list = posts
          .filter(published.eq(true))
          .limit(5)
          .load::<Post>(&conn)
          .expect("数据库查询失败");
      Json(post_list)
  }
  
  #[tokio::main]
  async fn main() {
      // 本地开发注意配置CORS，允许前端端口的跨域请求
      let app = Router::new().route("/api/posts", get(list_posts));
      axum::Server::bind(&"127.0.0.1:3000".parse().unwrap())
          .serve(app.into_make_service())
          .await.unwrap();
  }
  

• Yew前端侧移除Diesel相关依赖，通过HTTP请求调用后端接口获取数据即可，推荐用gloo-net作为前端请求库：

  use gloo_net::http::Request;
  use serde::Deserialize;
  
  #[derive(Deserialize, Clone, PartialEq)]
  pub struct Post {
      pub id: i32,
      pub title: String,
      pub body: String,
      pub published: bool,
  }
  
  pub async fn get_posts() -> Result<Vec<Post>, gloo_net::Error> {
      let resp = Request::get("http://127.0.0.1:3000/api/posts")
          .send()
          .await?;
      let post_list = resp.json::<Vec<Post>>().await?;
      Ok(post_list)
  }
  

• 本地开发阶段如果前后端运行在不同端口，记得在后端配置CORS规则，允许前端源的跨域请求，否则浏览器会拦截接口调用。

所有依赖原生数据库驱动的Rust ORM（包括Diesel、SeaORM原生模式、SQLx原生驱动模式）都不支持直接运行在浏览器WASM环境，不存在可以让前端直接调用Diesel连数据库的兼容方案。如果需要前端操作本地浏览器存储（比如IndexedDB），可以用专门面向WASM的库（比如idb、rexie），但这类库操作的是浏览器本地存储，和你用的远端PostgreSQL没有关系。

内容的提问来源于stack exchange，提问作者Ali Husham