Tube - Studio Videos

Database - Foreign keys 外键
  • 外键就是在一张表里,存放另一张表主键的字段,用来建立表与表之间的约束和联系
  • 外键是数据库级别的约束,当前例子中,如果用户注销,也就是users.id被删除,那么该用户下的发布的视频都会被删除
  • 外键与 relations 功能类似,但作用级别不同
css 复制代码
export const videos = pgTable("videos", {
  ...
  userId: uuid("user_id").references(() => users.id, { // 外键 - 关联到users表的id字段
    onDelete: "cascade", // 级联删除,如果用户被删除,则删除该用户的所有视频
  }).notNull(),
  categoryId: uuid("category_id").references(() => categories.id, {
    onDelete: "set null", // 级联删除,如果分类被删除,则将视频的分类设置为null,但不删除视频
  }),
  ...
})
Database - Relations 关系
  • 关于relations与foreign key之间的解释,请参考 Drizzle soft relations
  • 表与表之间的逻辑联系,是业务逻辑层面的概念
  • 关系型数据库中常见的关系:One-to-One,One-to-Many,Many-to-Many
  • 视频与用户一对一,视频对应视频分类也是一对一
less 复制代码
export const videoRelations = relations(videos, ({ one }) => ({
  user: one(users, {
    fields: [videos.userId],
    references: [users.id],
  }),
  category: one(categories, {
    fields: [videos.categoryId],
    references: [categories.id],
  }),
}))
  • 用户与视频一对多,或者用户视频为空(不传fields、references)
javascript 复制代码
export const usersRelations = relations(users, ({ many }) => ({
  videos: many(videos), // 一对多关系,用户可以有多个视频,或者为空
}));
Cursor-based pagination 游标分页
  • 我们在获取videos数据的时候,考虑到页面是无限加载滚动的,因此这个tRPC路由使用游标分页
  • 用一个锚点(例如上一条记录的id或时间戳)作为起点,往后取数据;需要记住最后一条记录来精准获取下一页数据
  • 输入参数有2个:cursorlimit
css 复制代码
getAll: protectedProcedure
  .input(
    z.object({
      // 可选游标参数,上一次的最后一条数据,首次请求可不传
      cursor: z.object({ 
          id: z.uuid(),
          updatedAt: z.date(),
      }).nullish(), 
      // 每页数据条数限制
      limit: z.number().min(1).max(100), 
    })
)
  • 使用 prefetchInfinite() 预取数据:预取只加载第一页的数据,因此不用传 cursor
php 复制代码
void trpc.studio.getAll.prefetchInfinite({
  limit: DEFAULT_LIMIT
});
  • 获取缓存数据时使用 useSuspenseInfiniteQuery()
css 复制代码
const [videos, query] = trpc.studio.getAll.useSuspenseInfiniteQuery(
  { limit: DEFAULT_LIMIT },
  { getNextPageParam: lastPage => lastPage.nextCursor }
)
  • tRPC路由中的Sql查询条件:
    • eq(field, value) 等于,field = value
    • and(cond1, cond2, ...) 且,多个条件同时满足,cond1 and cond2 and ...
    • or(cond1, cond2, ...) 或,多个条件只要一个满足,cond1 or cond2 or ...
    • lt(field, value) 小于,Less Than,field < value
    • desc(field) 倒序排序,DESC,根据field字段倒序排序
javascript 复制代码
import { eq, and, or, lt, desc } from 'drizzle-orm'
kotlin 复制代码
getAll: protectedProcedure
  .input(...)
  .query(async ({ ctx, input }) => {
    const { cursor, limit } = input
    const { id: userId } = ctx.user

    const data = await db
      .select()
      .from(videos)
      .where(
        and(
          eq( videos.userId, userId ),  // 只查询当前用户的视频
          cursor ? or(
            lt(videos.updatedAt, cursor.updatedAt),  // 查询更新时间小于游标参数的记录
            and(
              eq(videos.updatedAt, cursor.updatedAt),  // 如果更新时间相同,则查询id小于游标参数的记录
              lt(videos.id, cursor.id)
            )
          ) : undefined
        )
      )
      .orderBy(desc(videos.updatedAt), desc(videos.id))  // 按更新时间和ID降序排列,也就是最新的视频在前面
      .limit(limit + 1)  // 多查询一条数据用于判断是否还有下一页

      const hasMore = data.length > limit // 判断是否还有下一页
      const videosData = hasMore ? data.slice(0, -1) : data // 如果还有下一页,则去掉最后一条数据
      const lastVideo = videosData[videosData.length - 1] // 获取最后一条数据,用于生成下一页的游标
      // 生成下一页的cursor
      const nextCursor = hasMore ? { 
        id: lastVideo.id,
        updatedAt: lastVideo.updatedAt,
      } : null

    return {
      videosData,
      nextCursor, // 是一个对象,包含了id和updatedAt两个字段
    }
  })
相关推荐
李鸿耀2 小时前
主题换肤指南:设计到开发的完整实践
前端
caibixyy6 小时前
Spring Boot 整合 Redisson 实现分布式锁:实战指南
spring boot·分布式·后端
码事漫谈6 小时前
C++编程陷阱:悬空引用检测方法与防范指南
后端
码事漫谈6 小时前
缓存友好的数据结构设计:提升性能的关键技巧
后端
带娃的IT创业者7 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
sheji34167 小时前
【开题答辩全过程】以 springboot高校社团管理系统的设计与实现为例,包含答辩的问题和答案
java·spring boot·后端
聆风吟º8 小时前
远程录制新体验:Bililive-go与cpolar的无缝协作
开发语言·后端·golang
非凡ghost8 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11068 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白8 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记