tRPC Panel

本项目采用 tRPC 这一 TypeScript 库来创建类型安全的应用程序接口(API)。tRPC Panel 是用于调试后端接口的实用工具。下面介绍如何使用 tRPC Panel。

trpc panel 预览

初始化

打开方法

在运行了 pnpm dev 后,在浏览器中打开 http://localhost:服务器端口号/panel

登录方法

部分接口操作(由 protectedProcedure 处理的操作)是需要用户登录才能正常执行的。下面介绍如何在 tRPC Panel 中模拟用户登录。

登录

在 tRPC Panel 的 user.login 接口中输入用于测试的用户账号和密码。

trpc panel login

获取令牌

点击 Execute login 后,复制 accessToken 中的全部内容。

trpc panel login response

添加 Headers

点开右上角的 Headers 按钮。点击 Add +。在 Key 中填入 Authorization,在 Value 中填入刚刚复制的 accessToken 的内容。填写完后点击 Confirm

trpc panel headers

若要保持登录状态,请点击 Save Headers

登录完成

术语

  • Router:路由器。 在网页应用开发中,路由是指通过对 URL 中非主机部分的解析来指示网络请求所应到达的位置或用户所应访问的页面的技术,而路由器用于定义和组织 API 端点。 例如在上述 user.login 接口的调试中,浏览器实际访问的 URL 可能是 https://example.com/api/trpc/user.login?xxx=xxx。服务器注意到 URL 非主机部分的 /api/trpc/user,便会把此请求转移给 userRouter 进行处理。userRouter 注意到 .login,便会将此请求转移给 login 进行进一步处理。
  • Mutation:更改操作。 这类操作会对服务器端的数据进行更改,例如创建、更新或删除数据。
  • Query:查询操作。 相较于更改操作而言,这类操作是只读的,不会对数据进行更改。