跳转到主要内容

标签(标签)

资源精选(342) Go开发(108) Go语言(103) Go(99) angular(82) LLM(75) 大语言模型(63) 人工智能(53) 前端开发(50) LangChain(43) golang(43) 机器学习(39) Go工程师(38) Go程序员(38) Go开发者(36) React(33) Go基础(29) Python(24) Vue(22) Web开发(20) Web技术(19) 精选资源(19) 深度学习(19) Java(18) ChatGTP(17) Cookie(16) android(16) 前端框架(13) JavaScript(13) Next.js(12) 安卓(11) 聊天机器人(10) typescript(10) 资料精选(10) NLP(10) 第三方Cookie(9) Redwoodjs(9) LLMOps(9) Go语言中级开发(9) 自然语言处理(9) PostgreSQL(9) 区块链(9) mlops(9) 安全(9) 全栈开发(8) ChatGPT(8) OpenAI(8) Linux(8) AI(8) GraphQL(8) iOS(8) 软件架构(7) Go语言高级开发(7) AWS(7) C++(7) 数据科学(7) whisper(6) Prisma(6) 隐私保护(6) RAG(6) JSON(6) DevOps(6) 数据可视化(6) wasm(6) 计算机视觉(6) 算法(6) Rust(6) 微服务(6) 隐私沙盒(5) FedCM(5) 语音识别(5) Angular开发(5) 快速应用开发(5) 提示工程(5) Agent(5) LLaMA(5) 低代码开发(5) Go测试(5) gorm(5) REST API(5) 推荐系统(5) WebAssembly(5) GameDev(5) CMS(5) CSS(5) machine-learning(5) 机器人(5) 游戏开发(5) Blockchain(5) Web安全(5) Kotlin(5) 低代码平台(5) 机器学习资源(5) Go资源(5) Nodejs(5) PHP(5) Swift(5) 智能体(4) devin(4) Blitz(4) javascript框架(4) Redwood(4) GDPR(4) 生成式人工智能(4) Angular16(4) Alpaca(4) 编程语言(4) SAML(4) JWT(4) JSON处理(4) Go并发(4) kafka(4) 移动开发(4) 移动应用(4) security(4) 隐私(4) spring-boot(4) 物联网(4) nextjs(4) 网络安全(4) API(4) Ruby(4) 信息安全(4) flutter(4) 专家智能体(3) Chrome(3) CHIPS(3) 3PC(3) SSE(3) 人工智能软件工程师(3) LLM Agent(3) Remix(3) Ubuntu(3) GPT4All(3) 软件开发(3) 问答系统(3) 开发工具(3) 最佳实践(3) RxJS(3) SSR(3) Node.js(3) Dolly(3) 移动应用开发(3) 低代码(3) IAM(3) Web框架(3) CORS(3) 基准测试(3) Go语言数据库开发(3) Oauth2(3) 并发(3) 主题(3) Theme(3) earth(3) nginx(3) 软件工程(3) azure(3) keycloak(3) 生产力工具(3) gpt3(3) 工作流(3) C(3) jupyter(3) 认证(3) prometheus(3) GAN(3) Spring(3) 逆向工程(3) 应用安全(3) Docker(3) Django(3) R(3) .NET(3) 大数据(3) Hacking(3) 渗透测试(3) C++资源(3) Mac(3) 微信小程序(3) Python资源(3) JHipster(3) 大型语言模型(2) 语言模型(2) 可穿戴设备(2) JDK(2) SQL(2) Apache(2) Hashicorp Vault(2) Spring Cloud Vault(2) Go语言Web开发(2) Go测试工程师(2) WebSocket(2) 容器化(2) AES(2) 加密(2) 输入验证(2) ORM(2) Fiber(2) Postgres(2) Gorilla Mux(2) Go数据库开发(2) 模块(2) 泛型(2) 指针(2) HTTP(2) PostgreSQL开发(2) Vault(2) K8s(2) Spring boot(2) R语言(2) 深度学习资源(2) 半监督学习(2) semi-supervised-learning(2) architecture(2) 普罗米修斯(2) 嵌入模型(2) productivity(2) 编码(2) Qt(2) 前端(2) Rust语言(2) NeRF(2) 神经辐射场(2) 元宇宙(2) CPP(2) 数据分析(2) spark(2) 流处理(2) Ionic(2) 人体姿势估计(2) human-pose-estimation(2) 视频处理(2) deep-learning(2) kotlin语言(2) kotlin开发(2) burp(2) Chatbot(2) npm(2) quantum(2) OCR(2) 游戏(2) game(2) 内容管理系统(2) MySQL(2) python-books(2) pentest(2) opengl(2) IDE(2) 漏洞赏金(2) Web(2) 知识图谱(2) PyTorch(2) 数据库(2) reverse-engineering(2) 数据工程(2) swift开发(2) rest(2) robotics(2) ios-animation(2) 知识蒸馏(2) 安卓开发(2) nestjs(2) solidity(2) 爬虫(2) 面试(2) 容器(2) C++精选(2) 人工智能资源(2) Machine Learning(2) 备忘单(2) 编程书籍(2) angular资源(2) 速查表(2) cheatsheets(2) SecOps(2) mlops资源(2) R资源(2) DDD(2) 架构设计模式(2) 量化(2) Hacking资源(2) 强化学习(2) flask(2) 设计(2) 性能(2) Sysadmin(2) 系统管理员(2) Java资源(2) 机器学习精选(2) android资源(2) android-UI(2) Mac资源(2) iOS资源(2) Vue资源(2) flutter资源(2) JavaScript精选(2) JavaScript资源(2) Rust开发(2) deeplearning(2) RAD(2)

Blitz.js采用零API方法将Next.js前端连接到后端数据存储。以下是它的工作原理

Blitz.js是一个基于React和Next.js的新兴JavaScript框架。它是一个全栈的、有主见的框架,这意味着它对如何构建JavaScript应用程序做出了某些假设。Blitz最有趣的方面可能是所谓的零API方法,其中框架完成将用户界面连接到后端数据存储的工作。

让我们亲身体验一下JavaScript应用程序开发的这一有趣而独特的观点。

目录

  • 设置闪电战演示
  • 创建新项目
  • Blitz.js中的RPC
  • 身份验证
  • 结论

设置闪电战演示

首先,使用以下命令将Blitz添加为全局NPM包:NPM iblitz@alpha-g。现在,您可以使用该工具创建一个新项目,方法是键入:blitz new demo app。清单1显示了演示应用程序的设置。

 

清单1。创建新的Blitz应用程序

$ blitz new demo-app
✔ Pick which language you'd like to use for your new blitz project › Javascript
✔ Pick which template you'd like to use for your new blitz project › full
✔ Install dependencies? … yes
✔ Pick which form you'd like to use for your new blitz project › React Hook Form
Hang tight while we set up your new Blitz app!

Blitz完成所有依赖项的安装后,您可以移动到刚刚创建的新目录cd demo app中,并使用命令Blitz dev启动开发服务器。该服务器现在运行在localhost:3000上,您将看到一个欢迎屏幕,如下图所示:

The Blitz.js welcome screen.

图1。闪电战欢迎屏幕。

你可能会注意到的第一件事是,与大多数前端框架不同,Blitz的生成器提供了更精细的全栈脚手架;特别是,支持用户创建和登录。如果你使用这些功能,你会发现你可以创建一个用户并让他们登录和注销。

添加模型

现在,让我们按照欢迎页面的建议,通过命令行添加一个模型。转到命令行并点击CTRL-C以停止开发服务器。输入blitz generate all项目名称:string。这个命令告诉Blitz添加一个新的模型对象,称为project,并使用一个名为name的字符串字段。

通过Prisma迁移数据库

出现提示时,确认要运行prisma migrate dev.Blitz已安装并正在使用基于文件的SQLite数据库,该数据库通过对象关系映射(ORM)层prisma进行映射。SQLite和Prisma是数据对象持久化的位置和方式。prisma migrate dev命令通知prisma更新自身以反映dev数据库(用于开发的默认数据库)中的更改。

2024年IT最佳工作场所提名开放

选择您自己的数据库和ORM层

请注意,Blitz中的数据库和ORM层是模块化的,因此如果您愿意,可以更改默认值并使用MongoDB之类的东西。您需要为Blitz的更改提供一个名称,用于跟踪目的。

创建新项目

生成器完成后,使用命令blitz dev再次启动服务器。返回浏览器并访问localhost:3000/projects。您将看到一个新的用户界面,您可以使用它来创建一个新项目。(点击创建项目。)

如果您在尝试创建新项目时未登录,则会收到消息:“错误:您未通过身份验证。”这将确认授权已在工作。

现在以用户身份登录,然后再次尝试“创建项目”选项。这一次,您将看到一个包含单个名称字段的表单。您可以创建一些项目,您会发现Blitz为您搭建了一个合理的RESTful模式。

localhost:3000/projects页面为您提供了一个项目列表,您可以单击该列表在localhost:3000-projects/<ID>上获取项目详细信息。请注意,您还可以编辑和删除:一个完整的CRUD往返体验。

闪电战项目的布局

让我们来看看Blitz中的项目布局。这让我们感觉到闪电战是如何为我们做这么多的。

  • /project-root
    • /db
      • /db.sqlite: The SQLite engine and schema
      • /schema.prisma: The Prisma ORM mappings
      • /migrations: The directory showing the migrations (useful for rollbacks)
    • /mailers: Contains stubs for configuring mailers like the Forgot Password mailer
    • /jest.config.js: The JEST testing framework config
    • /next.config.js: The Next.js config file
    • /pages: The React.js and Next.js front-end files
      • /api: Support for external (non-Blitz) API access
      • /auth: The log in, log out, and signup pages
      • /projects: Pages for the project entity. Other objects follow the same pattern.
    • /test: Test files (JEST)
    • /app: App infrastructure
      • /blitz-client.js: The client-side config
      • /blitz-server.js: The server-side config
        • /core: The components, hooks, and layouts for the application
        • /projects: The queries, mutations, and components for the project object
        • /auth and /user: Auth related queries, mutations, and components
      • /integrations: Third-party integrations like Auth0 and Sentry
      • /package.json: The Node config file including Blitz scripts like dev
      • /public: Static files like favicon

Blitz.js中的RPC

Blitz最不寻常的地方是它使用了远程过程调用(RPC)。不使用REST或GraphQL API,而是将服务器端代码直接导入客户端JavaScript。Blitz然后将服务器端代码转换为RPC调用。您可以直接从客户端JavaScript访问服务器端代码,Blitz将连接网络交互,使其全部工作。

现在,让我们在blitz-demo/pages/projects/[projectId]/edit.js中打开该文件。请注意,方括号语法是Next.js处理路径阻塞的方式。(projectID变量将暴露给处理请求的页面,在路径中的那个位置保存参数的值。)

清单2包含Blitz演示的主要重要部分。

清单2。项目编辑.js

import { Suspense } from "react";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useQuery, useMutation } from "@blitzjs/rpc";
import { useParam } from "@blitzjs/next";
import Layout from "app/core/layouts/Layout";
import getProject from "app/projects/queries/getProject";
import updateProject from "app/projects/mutations/updateProject";
import { ProjectForm, FORM_ERROR } from "app/projects/components/ProjectForm";
export const EditProject = () => {
  const router = useRouter();
  const projectId = useParam("projectId", "number");
  const [project, { setQueryData }] = useQuery(
    getProject,
    { id: projectId },
    { staleTime: Infinity }
  );
  const [updateProjectMutation] = useMutation(updateProject);
  return (
    <>
      <Head>
        <title>Edit Project {project.id}</title>
      </Head>

      <div>
        <h1>Edit Project {project.id}</h1>
        <pre>{JSON.stringify(project, null, 2)}</pre>

        <ProjectForm
          submitText="Update Project" initialValues={project}
          onSubmit={async (values) => {
            try {
              const updated = await updateProjectMutation({
                id: project.id,
                ...values,
              });
              await setQueryData(updated);
              router.push({
                pathname: `/projects/[projectId]`,
                query: {
                  projectId: updated.id,
                },
              });
            } catch (error) {
              console.error(error);
              return {
                [FORM_ERROR]: error.toString(),
              };
            }
          }}
        />
      </div>
    </>
  );
};

const EditProjectPage = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <EditProject />
      </Suspense>

      <p>
        <Link
          href={{
            pathname: "/projects",
          }}
        >
          <a>Projects</a>
        </Link>
      </p>
    </div>
  );
};

EditProjectPage.authenticate = true;

EditProjectPage.getLayout = (page) => <Layout>{page}</Layout>;

export default EditProjectPage;

首先,请注意,导入行让我们很好地了解了Blitz的工作原理:该演示导入了React.js、Next.js和Blitz.js库的混合,以及项目特定组件和Blitz生成的RPC。

表单本身是从app/projects/components/ProjectForm.js中提取的,它是从app/core/components/form.js派生而来的。form.js扩展了react钩子表单库,它完成了使表单工作的重任。此外,请注意,表单中预先填充了以下属性:initialValues={project}。页面是如何首先获得项目对象的?

项目对象通过useQuery钩子(来自Blitz)填充,行const[project,{setQueryData}]=useQuery{…}。项目变量设置为最终保存useQuery钩子结果的变量。setQueryData是Blitz中的一个函数,用于更新对象的缓存,使其执行。

有关查询的详细信息

有关useQuery和setQueryData的更多信息,请参阅Blitz文档。

useQuery挂钩依赖于getProject函数,该函数使用路径中的projectId值进行参数化。getProject函数来自app/projects/queries/getProject.js。如果你遵循这个线程,你会发现getProject.js依赖于对db对象的调用,Blitz在/d目录中创建并导出该对象。清单3显示了如何实现getProject调用。

清单3。getProject.js

import db from "db";
//...
const project = await db.project.findFirst({
    where: {
      id: input.id,
    },
  })

因此,db对象在项目成员上公开一个查询API。在这里,我们使用它通过标准API找到项目,使用我们传递回的projectId参数。dbneneneba API主要是Prisma库,Blitz用一些助手对其进行了装饰。

对象的突变与对象的创建和查询类似,视图依赖于Blitz基础设施,该基础设施将前端与后端连接起来,而不需要显式的API调用。

身份验证

如果您查看projects/create.js以了解如何在那里处理身份验证,您会注意到导出的页面设置了一个authenticate字段,该字段设置为true,如清单4所示。

清单4。保护页面

NewProjectPage.authenticate = true;
export default NewProjectPage;

Blitz再一次向我们隐藏了很多工作和细节。同样,在主页面/index.js中,当前用户是通过useCurrentUser钩子检索的。在查询和突变的情况下,ctx对象会自动作为参数传入,其中包含会话对象。您可以在稍后的querys/getProject.js文件中看到这一功能,该文件通过检查ctx.session.$isAuthorized()来保护调用。

结论

Blitz是对全栈框架的一种独特而强大的表现。它在幕后做了大量的工作,而没有完全混淆这些底层操作。一旦您了解了Blitz.js及其惯用语,开发就可以沿着许多愉快的道路快速进行,比如围绕基本对象图构建CRUD和执行直接的授权。

 

文章链接