React Node.js 和 Prisma 构建全栈框架

特点

  • 快速入门:由于其表现力强,您可以使用很少的简洁、一致的声明性代码从头开始创建和部署生产就绪的 Web 应用程序。
  • 无样板代码:通过抽象出复杂的全栈功能,可以减少样板代码。这意味着需要维护和理解的代码更少!这也意味着更容易升级。
  • 无锁定:您可以将此框架上的应用程序部署在任何您喜欢的地方。不存在特定提供商的锁定,您可以完全控制代码。
  • 全栈身份验证
  • RPC(客户端<->服务器)
  • 简单部署
  • 作业
  • 电子邮件发送
  • 全栈类型安全

代码片段

javascript 复制代码
app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, methods: { email: {...} }
  }
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true, // Limit access to logged-in users.
  component: import Main from "@client/Main.tsx" // Your React code.
}

query getTasks {
  fn: import { getTasks } from "@server/tasks.js", // Your Node.js code.
  entities: [Task] // Automatic cache invalidation.
}

entity Task {=psl  // Your Prisma data model.
    id          Int     @id @default(autoincrement())
    description String
    isDone      Boolean @default(false)
psl=}

在配置中定义您的应用程序并获取:

  • 使用 Auth UI 组件登录和注册,
  • 全栈式安全
  • 电子邮件发送
  • 异步处理作业
  • React Query 支持数据获取
  • 安全最佳实践

假设您想要构建一个 Web 应用程序,允许用户创建和分享他们最喜欢的食谱。

让我们从此件开始:它是应用程序的中心文件,您可以在其中从高层描述应用程序。

让我们给我们的应用程序一个标题,然后立即通过用户名和密码打开全栈身份验证:

javascript 复制代码
app RecipeApp {
  title: "My Recipes",
  auth: {
    methods: { usernameAndPassword: {} },
    onAuthFailedRedirectTo: "/login",
    userEntity: User
  }
}

然后让我们为您的食谱添加数据模型。我们希望用户和用户可以拥有食谱:

javacript 复制代码
...

entity User {=psl  // Data models are defined using Prisma Schema Language.
  id          Int @id @default(autoincrement())
  username    String @unique
  password    String
  recipes     Recipe[]
psl=}

entity Recipe {=psl
  id          Int @id @default(autoincrement())
  title       String
  description String?
  userId      Int
  user        User @relation(fields: [userId], references: [id])
psl=}

框架链接

参阅 - 亚图跨际
相关推荐
weixin_405023371 小时前
包资源管理器NPM 使用
前端·npm·node.js
菜鸟‍6 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
Q_Q5110082857 小时前
python+django/flask婚纱摄影拍照管理系统
spring boot·python·django·flask·node.js·php
长空任鸟飞_阿康7 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
CS Beginner7 小时前
【node】运行windows7下的高版本node.js
node.js
前端鳄鱼崽10 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791810 小时前
【React.js】渐变环形进度条
前端·react.js·svg
水冗水孚10 小时前
fastify-sse-v2搭配EventSource实现SSE中的AI流式回复打字机效果&Fetch+ReadableStream+Chunked分块也可实现
node.js
小于小于091211 小时前
npx 与 npm 区别
前端·npm·node.js
Shi_haoliu11 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office