后端数据库ORM【免费下载链接】sea-orm A powerful relational ORM for Rust项目地址https://gitcode.com/gh_mirrors/se/sea-orm点击查看免费下载导读本指南以 examples/react_admin 示例仓库中的前端 README 为核心完整讲解如何安装、开发、构建并认证登录这套基于 react-admin 的 GraphQL 管理后台前端。该示例前端并非孤立存在它对应一个由 Loco 框架承载、SeaORM 驱动数据访问、Seaography 自动生成 GraphQL API 的后端服务见 examples/react_admin/backend前端通过 axios 向/api/graphql发送 GraphQL 查询完成列表与详情展示。读完本文你将掌握该前端的全部运行命令、认证账号的使用方式与安全边界以及前端各模块authProvider、dataProvider、App 入口与后端 GraphQL 层的实际对应关系可作为自建 GraphQL 管理后台的落地参考。一、示例整体架构速览在动手运行前端之前先厘清这个示例的两端组成位于仓库 examples/react_admin 目录下前端react-admin Vite React 18 TypeScript位于examples/react_admin/frontend本篇文章的主角。后端Loco SeaORM Seaography位于examples/react_admin/backend以 Axum 承载 GraphQL 端点监听3000端口提供/api/graphqlPOST与 GraphQL PlaygroundGET接口。后端 GraphQL 端点的核心实现位于 backend/src/controllers/graphql.rs它通过query_root::schema(ctx.db.clone(), DEPTH, COMPLEXITY)动态构建 GraphQL Schema其中DEPTH 1_000限制查询嵌套深度、COMPLEXITY 1_000限制查询复杂度。Schema 的构建则位于 backend/src/graphql/query_root.rs使用 Seaography 的Builder配合register_entity_modules自动把 SeaORM 实体注册为 GraphQL 对象——这正是 SeaORM 生态中从实体定义自动生成 CRUD GraphQL API的核心机制。前端dataProvider.ts中的apiUrl http://localhost:3000/api/graphql与后端路由.prefix(graphql)遥相呼应前后端通过 GraphQL 协议解耦前端不关心 SQL、不关心表结构只关心 GraphQL 字段如notes、paginationInfo。二、安装依赖npm install命令npm install在examples/react_admin/frontend目录下执行该命令会按照 frontend/package.json 安装全部依赖。依赖清单与说明package.json中的关键依赖如下依赖版本范围用途react/react-dom^18.3.0UI 基础框架react-admin^5.0.0管理后台框架提供Admin、Resource、List、Datagrid、TextField、Show等开箱组件axios^1.7.2向 GraphQL 端点发起 HTTP 请求ra-data-json-server^5.0.5react-admin 数据提供器依赖示例中实际以自定义dataProvider为主开发依赖方面项目使用Vite 4作为构建与开发服务器vitejs/plugin-react配合 TypeScript 5、ESLint 8、Prettier 2 保证代码质量。Vite 配置位于 frontend/vite.config.ts其中server.host: true允许局域网访问base: ./使构建产物可部署于任意相对路径。三、开发模式运行npm run dev命令npm run dev该命令实际执行vite见 package.json 的scripts.dev启动 Vite 开发服务器提供**热更新HMR**能力修改src下的组件代码后浏览器即时刷新。运行前置条件由于dataProvider固定请求http://localhost:3000/api/graphql开发模式下请先保证后端服务已在本机3000端口启动Loco 服务端口在 backend/config/development.yaml 中配置为3000后端数据库已迁移并可连接development.yaml中database.uri默认指向 PostgreSQLloco_seaography_development且auto_migrate: true会在启动时自动执行迁移后端已开启 CORSdevelopment.yaml中server.middlewares.cors.enable: true否则浏览器跨域请求会被拦截。登录进入后台开发服务器启动后在浏览器打开 Vite 输出的地址默认http://localhost:5173。前端通过authProvider校验登录态只有localStorage中存在user键由login成功写入时checkAuth才会放行页面渲染。因此必须先登录再进入后台页面。四、生产构建npm run build命令npm run build该命令实际执行vite build将 TypeScript/JSX 源码打包为静态资源输出到dist目录Vite 默认输出目录。由于vite.config.ts设置了base: ./构建产物使用相对路径引用资源可部署到任意静态服务器或子路径下。构建完成后若需在本地预览产物可使用npm run serve该命令执行vite preview以生产模式预览构建结果。提示package.json还提供了npm run type-checktsc --noEmit仅做类型检查不产出文件与npm run lint、npm run format等工程化脚本可在 CI 或提交前使用。五、认证机制详解authProvider 与 users.json5.1 认证的定位仅用于开发与测试前端 README 明确强调The included auth provider should only be used for development and test purposes.对应的实现位于 frontend/src/authProvider.ts文件头部注释同样写着This authProvider is only for test purposes. Dont use it in production.也就是说该认证方案不做任何网络请求、不校验服务端会话只在浏览器本地完成比对属于典型的占位/演示实现绝不能直接搬进生产环境生产应接入后端 JWT 登录接口后端auth.jwt配置可参考 backend/config/development.yaml 中的secret与expiration字段。5.2 内置测试账号认证数据来自 frontend/src/users.json包含两个预置用户用户名密码全名janedoepasswordJane DoejohndoepasswordJohn Doe除username、password外每个用户还带有id、fullName与内嵌 base64 的avatar头像数据登录后可用于展示用户身份信息。5.3 登录流程的源码级剖析authProvider.login的实现逻辑authProvider.ts 第 8-25 行在users.json的users数组中查找username与password同时匹配的记录匹配成功用解构语法剔除password字段把剩余用户信息含id、fullName、avatar序列化后写入localStorage.setItem(user, ...)返回Promise.resolve()表示登录成功匹配失败返回Promise.reject(new HttpError(Unauthorized, 401, { message: Invalid username or password }))react-admin 会据此弹出错误提示。其余钩子的职责logout清除localStorage中的user键checkAuthlocalStorage中存在user即通过否则拒绝未登录用户无法进入后台getIdentity从localStorage还原已登录用户对象供界面显示getPermissions当前返回undefined即未实现细粒度权限控制。由此可以推断这套认证属于前端自包含模式登录态完全依赖localStorage刷新页面后依然保持但一旦清空浏览器存储即退出登录。六、数据访问机制详解dataProvider 与 GraphQL6.1 GraphQL 端点frontend/src/dataProvider.ts 第 4 行定义了const apiUrl http://localhost:3000/api/graphql;所有数据操作都通过axios.post(apiUrl, { query: ... })完成即 POST 一段 GraphQL 查询字符串到后端。6.2 getList列表与分页getList把 react-admin 的paginationpage、perPage与sortfield、order参数映射为 Seaography 生成的 GraphQL 查询query { notes ( orderBy: { title: ASC }, pagination: { page: { limit: 10, page: 0 }} ) { nodes { id title createdAt updatedAt } paginationInfo { pages current offset total } } }注意两点映射细节页码从 0 开始GraphQL 中的page: ${page - 1}即 react-admin 的第 1 页对应 GraphQL 的第 0 页分页信息透传paginationInfo.total被用作 react-admin 列表的total实现总条数展示与翻页。6.3 getOne详情查询getOne通过 Seaography 的过滤语法按主键取单条记录query { notes(filters: {id: {eq: 1}}) { nodes { id title content createdAt updatedAt } } }6.4 写入操作的现状dataProvider中的getMany、getManyReference、update、updateMany、create、delete、deleteMany目前均为空实现。因此前端当前支持的操作是只读的列表浏览与详情查看尚未接入 Seaography 的变更Mutation能力。从源码结构看这是示例的刻意取舍演示重点在于GraphQL 只读查询 react-admin 展示层的打通。6.5 页面与组件的对应关系frontend/src/index.tsx 中注册了名为posts的 ResourcePostListListDatagrid展示id、title、createdAt、updatedAt四列并关闭了批量操作按钮bulkActionButtons{false}PostShowShowSimpleShowLayout展示id、title、content、createdAt、updatedAt五个字段。frontend/src/App.tsx 则通过Admin authProvider{authProvider} layout{Layout}装配认证与布局frontend/src/Layout.tsx 基于 react-admin 的Layout包装并挂载了CheckForApplicationUpdate组件用于应用更新检测。可以推断notesGraphQL 资源名与postsreact-admin 资源名是示例中的演示性命名映射字段id、title、content、createdAt、updatedAt与后端迁移定义的 notes 表字段一致迁移文件见 backend/migration/src/m20231103_114510_notes.rs。七、完整运行流程清单将以上各节串联成端到端运行步骤启动后端进入examples/react_admin/backend确保 PostgreSQL 可用后启动 Loco 服务development.yaml中auto_migrate: true会自动执行迁移确认3000端口可访问/api/graphql安装前端依赖进入examples/react_admin/frontend执行npm install启动开发服务器执行npm run dev打开 Vite 提供的地址登录使用janedoe / password或johndoe / password登录仅开发/测试用途浏览数据在posts资源下查看 notes 列表与详情数据来自后端 GraphQL 查询生产构建执行npm run build产出静态资源配合npm run serve本地预览。八、安全边界与后续扩展建议认证必须替换当前authProvider将明文密码保存在前端users.json中并通过localStorage管理会话仅适合本地演示。生产环境应改由后端签发 JWT后端已有auth.jwt配置骨架前端在login中请求真实接口并保存 token同时实现checkError如 401 时自动登出。GraphQL 安全限制已就位后端通过limit_depth(1_000)与limit_complexity(1_000)约束查询深度与复杂度query_root.rs前端无需关心但接入生产时建议按业务收紧这两个阈值。可扩展写入能力dataProvider的写操作为空实现后续可参考 Seaography 文档为notes增加 create/update/delete 的 Mutation 查询并在 react-admin 侧补充Create、Edit组件即可把只读后台升级为完整 CRUD 管理台。关注示例文档主线本示例在仓库 examples/react_admin/README.md 中被定位为GraphQL 管理后台 Seaography Loco教程的组成部分前端 README 的安装/开发/构建三步曲正是这套教程中前端落地的最小闭环。结语examples/react_admin/frontend是一个麻雀虽小、五脏俱全的 react-admin GraphQL 前端样板三个命令npm install/npm run dev/npm run build覆盖了从依赖安装到生产构建的完整链路两个测试账号让开发者开箱即可登录体验authProvider与dataProvider则以不到百行代码演示了 react-admin 与 Seaography GraphQL API 的标准对接姿势。以本指南为线索结合仓库中的前端源码与后端 GraphQL 实现你可以快速复刻并扩展出自己的 GraphQL 管理后台。赞分享后端数据库ORM【免费下载链接】sea-orm A powerful relational ORM for Rust项目地址https://gitcode.com/gh_mirrors/se/sea-orm点击查看免费下载相关推荐Loco 模型实战指南基于 SeaORM 的 ActiveRecord 建模、迁移与测试Loco 模型实战指南基于 SeaORM 的 ActiveRecord 建模、迁移与测试 本文围绕 Loco 框架Rust中 Models 一节的完整后端Loco 前端开发指南基于 Rsbuild 的 SaaS 前端开发、构建与集成Loco 前端开发指南基于 Rsbuild 的 SaaS 前端开发、构建与集成 Locoloco rs是一个面向副业项目与初创公司的 Rust 全栈框架。后端KernelSU 官方韩语文档解读内核级 root 方案的功能全景、兼容边界与源码实证KernelSU 官方韩语文档解读内核级 root 方案的功能全景、兼容边界与源码实证 本文以仓库中的韩语官方文档 docs/README_KR.md htt后端数据库ORM上一篇从原理到实践Gemma-4-12B-it-qat-q4_0-gguf量化感知训练(QAT)技术深度解析下一篇开源气象数据服务的技术革命Open-Meteo如何重塑天气预报API生态创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
