后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载RedwoodJS 是一个将 React 前端与 GraphQL/Prisma 后端深度捆绑的全栈 Web 应用框架本指南基于仓库内 What is Redwood? 展开逐一拆解其一个命令启动双应用的 monorepo 架构、声明式 Router、Cell 数据获取约定、服务层与 SDL 的安全模型以及生成器、Jest、Storybook 等开箱即用的工程化能力。读完本文你将理解 RedwoodJS 各核心模块之间的调用关系与源码级实现原理并能直接上手搭建、查询与部署一个全栈应用。RedwoodJS 是什么RedwoodJS 是一个React 框架 大量预装包与配置的组合体目标是让开发者用最小的心智负担构建全栈 Web 应用。它内置的核心技术栈包括GraphQL前端与后端之间的数据通信协议Prisma数据库访问、迁移与类型安全的 ORMJest单元与集成测试框架Storybook组件隔离开发与 UI 目录Vite前端打包器与开发服务器Babel后端代码编译器TypeScript全框架严格类型支持所谓全栈 Web 应用指的是浏览器中可见的 UI前端与提供服务的服务器、数据库后端的组合。在 React Server Components 出现之前React 本身并不知道服务器和数据库的存在开发者只能通过fetch()或在构建步骤中把数据预烘到组件里。RedwoodJS 的核心设计原则之一就是让从后端取数据这件事变得尽可能简单它为此建立了强约定让你在组件里加几行代码就能取回数据并且自动处理加载中、出错、以及返回空数据空白页三种状态。一个 Redwood 应用是如何运转的一个 Redwood 应用实际上包含两个应用前端React 部分与后端服务器负责与数据库及第三方系统通信。从结构上看它本质是一个 monorepo包含两个顶层目录web前端代码api后端代码你可以用一条命令同时启动它们yarn redwood dev这条命令会并行拉起 Vite服务web目录与基于 Fastify 的 API 服务器服务api目录开发者无需手工配置端口、代理或跨域这正是 Redwood 将配置交给自己、把复杂度留给框架的体现。前端声明式 Router 与页面组织浏览器打开应用后React 负责初始化并监听 history 变化以切换内容。Redwood 提供了自定义的声明式 Router让你直接以 JSX 声明 URL 与页面页面本身就是一个 React 组件的对应关系。一个典型的路由文件长这样import { Route, Router, Set, PrivateSet } from redwoodjs/router import ApplicationLayout from src/layouts/ApplicationLayout import { useAuth } from ./auth const Routes () { return ( Router useAuth{useAuth} Set wrap{ApplicationLayout} Route path/login page{LoginPage} namelogin / Route path/signup page{SignupPage} namesignup / PrivateSet unauthenticatedlogin Route path/dashboard page{DashboardPage} namedashboard / Route path/products/{sku} page{ProductsPage} nameproducts / /PrivateSet /Set Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) }这段代码即使第一次接触也能大致读懂某些路由被PrivateSet标记为必须登录才能访问另一些则被wrap进一个布局同样只是 React 组件用于在多个页面之间共享统一样式。从源码看Route、Set、PrivateSet都是虚拟组件——它们永远不会真正被渲染而是由 router.tsx 中的analyzeRoutes()一次性提取出路径与页面映射再在 Route.tsx 的类型定义中暴露path、page、name、prerender、renderMode、whileLoadingPage等属性。WrappedPage通过reduceRight把Set wrap{[a,b,c]}层层嵌套为abc.../c/b/a若是PrivateSet还会在最外层包上一个AuthenticatedRoute见 router.tsx。AuthenticatedRoute在未登录时会把用户重定向到unauthenticated指定的路由并附上?redirectTo参数以便登录后回跳见 AuthenticatedRoute.tsx。预渲染Prerender如果你的页面内容可以完全静态化比如面向公众的营销页只需在路由上加上prerender属性该页面就会被完整渲染成 HTML——无论内部组件嵌套多深。这个 HTML 秒开但依然携带 React 所需的 JSReact 加载完成后页面会被水合rehydrate并恢复交互。预渲染同样支持从 URL 提取变量的路由比如上面的/products/{sku}Redwood 会遍历所有可用的 sku为每一个生成一个静态页面。这正是 Redwood 版本的静态站点生成SSG。更妙的是预渲染对 Cell 同样生效——构建时 Redwood 会启动 GraphQL 服务器像真实用户一样发出请求把结果渲染成纯 HTML 交给浏览器瞬间加载。更详细的机制可参考 prerender 文档。认证AuthenticationPrivateSet限制了只有登录用户能访问那用户如何登录Redwood 内置了大量第三方认证服务商的集成包括 Auth0、Supabase、Clerk 等你也可以自托管认证自带登录、注册、重置密码页面甚至支持 TouchID/FaceID 及第三方生物识别设备或编写自定义认证方案。认证配置的完整说明见 authentication.md。登录之后如何判断某个用户能做什么、不能做什么Redwood 提供了**基于角色的访问控制RBAC**辅助工具可同时作用于前后端详见 role-based-access-control 指南。GraphQL前后端的胶水Redwood 用 GraphQL 作为前后端之间的胶水任何来自服务器/数据库的数据都要经由 GraphQL 获取。前端使用Apollo Client它提供useQuery()、useMutation()这类 hooks 来读写数据。但 Redwood 做得远比给你一个 GraphQL 库更深——它把数据获取封装进了组件本身。Cell自带数据获取的超级组件Cell 依然只是一个 React 组件也常被称为单文件组件只是它遵循几条约定从而具备自取数据、自管状态的能力文件名以Cell结尾文件导出若干具名组件至少要有QUERY和Success可选导出Loading、Failure、Empty——看名字就能猜到它们的用途。每当 React 要渲染一个 Cell 时会触发如下生命周期先显示Loading组件触发一次useQuery()使用导出的QUERY数据成功返回后渲染Success组件其中一个 props 就是useQuery()返回的数据若出错则渲染Failure若查询返回null或空数组则渲染Empty若未导出这两个组件则仍渲染Success由你在代码里自行处理错误与空态。回到评价墙testimonials的例子一个拉取并展示评价的 Cell 大概长这样export const QUERY gql query GetTestimonials { testimonials { id author quote } } export const Loading () divLoading.../div export const Failure ({ error }) divAn error occured! {error.message}/div export const Success ({ testimonials }) { return ( ul {testimonials.map((test) { li key{test.id}{test.quote} — {test.author}/li })} /ul ) }本例未导出Empty因此没有评价时页面该区域什么都不渲染也不会提示用户缺少内容。源码层面Cell 的执行逻辑集中在 createCell.tsx它读取QUERY支持beforeQuery在查询前转换 props、afterQuery转换返回数据、isEmpty自定义空态判定等可选 hook随后依次判断renderLoading、Failure、Empty与Success的渲染时机。Cell 的完整约定与高级用法见 cells.md。如果你将来为服务器开发其他客户端比如移动 App从一开始就用 GraphQL 会给你带来巨大的复用优势。另外别忘了预渲染对 Cell 同样生效。Apollo 缓存Apollo Client 会智能缓存上面QUERY的结果用户离开又回到首页时Success会立即从缓存渲染同时后台重新向服务器发起查询若数据发生变化则合并进缓存并触发重渲染。这样既获得了缓存秒开的性能又不会只看到过期数据——缓存始终与服务器最新状态保持同步。你还可以直接操作缓存增删条目甚至把它当作状态管理工具使用。可访问性Redwood 内置了几个辅助屏幕阅读器的组件RouteAnnouncement能让阅读器朗读一段内容尽管它在浏览器中不可见RouteFocus则引导阅读器跳过页面顶部的冗长导航直达正文。实现见 route-announcement.tsx 与 route-focus.tsx更完整的说明见 a11y.md。后端服务层、Prisma 与安全模型接下来进入api目录的后端代码。Prisma数据库访问层Prisma 是 Redwood 用来与数据库通信的包提供自动化迁移、类型安全与 IDE 自动补全。应用内会有一个schema.prisma文件反映当前数据库结构datasource db { provider postgresql url env(DATABASE_URL) } generator client { provider prisma-client-js binaryTargets native } model Testimonial { id Int id default(autoincrement()) author String unique quote String createdAt DateTime default(now()) updatedAt DateTime updatedAt }Prisma 提供若干命令行工具把这些文件变更翻译成 SQL DDL 命令执行到数据库从而让库表结构与 schema 保持一致。变更数据库结构的完整工作流见>import { db } from src/lib/db export const testimonials () { return db.testimonial.findMany() }GraphQL 怎么知道解析器要去找这个函数Redwood 引入了SDL 文件它承载从 GraphQL 到 service 世界的映射export const schema gql type Testimonial { id: Int! author: String! quote: String! createdAt: DateTime! updatedAt: DateTime! } type Query { testimonials: [Testimonial!] skipAuth } type Query里列出的每个定义都期望存在一个同名 service 函数testimonials-testimonials()。服务层的更多模式见 services.md。安全默认安全secure-by-default与指令Redwood 是默认安全的任何未认证用户发出的 GraphQL 请求都不会被处理。你可以选择对某些查询/变更开放公共访问但必须逐个手动开启。考虑一个更完整的 Testimonials SDL 文件export const schema gql type Testimonial { id: Int! author: String! quote: String! createdAt: DateTime! updatedAt: DateTime! } type CreateTestimonialInput { author: String! quote: String! } type Query { testimonials: [Testimonial!] skipAuth } type Mutation { createTestimonal($input: CreateTestimonialInput!): Testimonial! requireAuth deleteTestimonal($id: Int!): Testimonial! requireAuth } testimonials查询标记了skipAuthGraphQL 指令表示该请求不限制为已认证用户而关键的createTestimonial、deleteTestimonial变更标记了requireAuth只能由登录用户调用。这两个内置指令通过createValidatorDirective定义与注册详见 makeDirectives.ts 与 directives.md。后端 GraphQL 服务器由GraphQL Yoga驱动因此你能获得 Yoga 在安全与性能上的全部能力限速rate limiting与深度限制depth limiting、日志、指令以及更多。requireAuth与skipAuth为整个 GraphQL 查询提供了认证与否的闸门而进入闸门之后你还可以基于当前用户是谁做更细粒度的控制。认证上下文如果用户已登录他会在任何 service 的context对象中可用——处处可用、时时可用import { db } from src/lib/db import { AuthenticationError } from redwoodjs/graphql-server export const createTestimonial ({ data }) { if (context.currentUser.roles.includes(admin)) { return db.testimonial.create({ data }) } else { throw new AuthenticationError(You are not authorized to create testimonials) } }生成器Generators与开发者工具命令行工具是许多框架中被忽视的部分而 Redwood 在 CLI 上投入巨大其中最有威力的是生成器generators用于创建文件、配置集成、执行脚本、启动开发服务器等等。生成布局、页面和 Cell 能省下大量时间。Redwood 的文件本身样板代码不多但生成器依然会把它们搭好甚至为最小功能生成配套测试。生成器还提供对开发工具的快捷访问比如GraphiQL直接对服务器执行 GraphQL 查询Prisma Studio提供数据库的完整 GUI。Redwood 还提供针对 UI 库如 Tailwind、Mantine的setup命令以及若干实验性新功能的开关方便随时启用/禁用。此外还有一个交互式控制台可以执行 Prisma 查询从数据库取数——当你想确认查询是否返回了预期数据时不必往代码里塞一堆console.log()再刷新浏览器。CLI 命令全集见 cli-commands.md。测试Jest 与配套 helper全栈应用开发如此顺畅但如何验证它按预期工作这就要靠测试套件。Jest以简单著称Redwood 认为它与框架天然契合因此大多数可生成的文件都会自动附带测试文件——甚至预先填好了一些测试。Redwood 提供若干 Jest helper 与 matcher可 mock GraphQL 请求、数据库数据、登录用户等Scenarios接受一个简单 JSON 对象预先用这些数据填充数据库让测试在已知状态下进行Mock Service Worker模拟 API 调用包括 GraphQL的响应mockCurrentUser()在web或api侧 stub 出登录用户无需真正经过认证提供方。你可以在应用的前端和后端都编写 Jest 测试。全部测试能力见 testing.md。UI 开发StorybookJest 负责测试代码逻辑而Storybook用于编目与测试 UI——它自称在隔离环境中构建 UI 组件的前端工作坊。你可以脱离应用单独构建组件甚至让 props 保持动态并实时观察效果。只需运行yarn redwood storybookRedwood 为 Storybook 增加了数据 mock 能力让那些通常由 GraphQL 填充数据的组件可以在无需服务器运行的情况下展示。Storybook 严格属于前端代码的范畴配置见 storybook.md。构建与类型vite、Babel 与 TypeScript请注意前面介绍的一切都从未出现然后我们需要为这个包写配置……——Redwood 已经把配置全部做好了并在每个新版本中持续跟进。你几乎不会怀念花几小时甚至几天去添加并配置一个包的日子。当然你可以从默认配置中eject出来加入自定义代码但大多数应用永远不需要这么做一切开箱即用。Vite是打包器负责打包前端代码并按页面自动代码分割同时作为web目录的开发服务器api目录的后端代码由Babel编译并由Fastify提供服务整个框架是严格类型化的因此你可以在 IDE 里享受全量自动补全。TypeScript 的严格模式与工具类型见 strict-mode.md 与 utility-types.md。部署Redwood 的职责不止于把应用跑起来还包括把它部署到全世界。它内置了针对主流托管平台的部署命令与配置无论 serverless 还是传统服务器支持CoherenceGWC/AWSFlightcontrol.devAWSEdg.ioNetlifyRenderServerless.comVercel此外你甚至可以通过 SSH 命令部署到自己的服务器——这就是 baremetal 部署方案。各平台部署指南见 deploy 目录。演进方向、版本策略与社区Redwood 仍在积极开发中正围绕 React 生态的最前沿推进一系列功能React Server Components以及全新的、非 GraphQL 的透明 APISSR / Streaming渲染模式Realtime 与 GraphQL SubscriptionsRedwood Studio获取项目运行时洞察Mailer邮件发送能力。Redwood 严格遵守语义化版本规范不会有未经主版本号变更的突然破坏性变更。它因详尽的发布说明与全面的升级指南著称当代码需要修改时几乎都会附带 codemod 脚本替你完成迁移。围绕 Redwood 存在非常活跃的社区Discourse 论坛与 Discord 聊天室核心团队成员也会在其中回答问题。小结从本文可以看出RedwoodJS 的竞争力不在于某个单一技术而在于把 React、GraphQL、Prisma、Jest、Storybook、Vite、Babel 与 TypeScript 有机编排成一套约定优先、配置收敛的全栈开发体验Router 与 Cell 消灭了前后端数据对接的样板代码SDL 与服务层把 GraphQL 解析器映射变成惯例requireAuth/skipAuth让安全默认生效而生成器与预渲染进一步压缩了从想法到上线的时间。如果你想动手实践可以接着阅读教程第一章一步步构建自己的第一个 Redwood 应用。赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐RedwoodJS 全栈框架深度解析React 前端、GraphQL API 与 Prisma 数据层的架构实践RedwoodJS 全栈框架深度解析React 前端、GraphQL API 与 Prisma 数据层的架构实践 RedwoodJS仓库名 RedwoodG后端前端Web框架开发工具TypeGraphQL与RedwoodJS集成全栈框架的GraphQL支持TypeGraphQL与RedwoodJS集成全栈框架的GraphQL支持 在现代全栈开发中GraphQL作为API查询语言正迅速取代传统REST架构。Ty后端GraphQLAPI设计RedwoodJS 1.x 入门导读从 side project 到 startup 的全栈 React GraphQL 一体化框架RedwoodJS 1.x 入门导读从 side project 到 startup 的全栈 React GraphQL 一体化框架 本篇技术指南以 Re后端前端Web框架开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考