从 React 到全栈：一个项目打通

paths:
  /api/bookmarks:
    get:                          # 列表：分页 + 关键字
      parameters:
        - { name: page, in: query, schema: { type: integer, default: 0 } }
        - { name: q,    in: query, schema: { type: string } }
      responses:
        "200": { description: 分页书签列表 }
    post:                         # 新建：需要登录
      security: [ { bearerAuth: [] } ]
      responses:
        "201": { description: 创建成功 }
  /api/bookmarks/{id}:
    get:
      responses:
        "200": { description: 书签详情 }
        "404": { description: 不存在 }

// 与后端的 PageResp<Bookmark> 一一对应
export interface PageResp<T> {
  content: T[];
  totalElements: number;
  page: number;
  size: number;
}

export interface Bookmark {
  id: number;
  title: string;
  url: string;
  tags: string[];
  createdAt: string;   // ISO 字符串——和后端 LocalDateTime 的序列化格式要提前对齐
}

export interface NewBookmark {
  title: string;
  url: string;
  tags: string[];
}

import { cookies } from "next/headers";

export default async function BookmarksPage() {
  const token = (await cookies()).get("bk_token")?.value;

  const res = await fetch("http://api:8080/api/bookmarks?page=0", {
    headers: { Authorization: `Bearer ${token ?? ""}` },
  });
  const data: PageResp<Bookmark> = await res.json();

  return (
    <main>
      <h1>我的书签（{data.totalElements}）</h1>
      <BookmarkExplorer initial={data} />
    </main>
  );
}

"use client";

import { useBookmarks } from "@/hooks/useBookmarks";
import { useUiStore } from "@/stores/uiStore";

export function BookmarkExplorer({ initial }: { initial: PageResp<Bookmark> }) {
  const keyword = useUiStore((s) => s.keyword);
  const page = useUiStore((s) => s.page);
  const { data, isFetching } = useBookmarks(keyword, page, initial);

  // 搜索框、分页器、书签卡片……（骨架从略）
  return <BookmarkList items={data?.content ?? []} loading={isFetching} />;
}

import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const token = req.cookies.get("bk_token");
  if (!token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

export const config = { matcher: ["/bookmarks/:path*"] };

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Bookmark, NewBookmark, PageResp } from "@/types/api";

export function useBookmarks(q: string, page: number, initial: PageResp<Bookmark>) {
  return useQuery({
    queryKey: ["bookmarks", q, page],     // key 变了自动重新取数
    queryFn: () =>
      api.get<PageResp<Bookmark>>("/bookmarks", { params: { q, page } }),
    initialData: initial,                 // 服务端组件给的首屏数据直接复用
  });
}

export function useAddBookmark() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (body: NewBookmark) => api.post<Bookmark>("/bookmarks", body),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["bookmarks"] }),
    // 新增成功让列表缓存失效——界面自动回到「数据库的最新状态」
  });
}

import { create } from "zustand";

interface UiState {
  keyword: string;
  page: number;
  setKeyword: (k: string) => void;
  setPage: (p: number) => void;
}

export const useUiStore = create<UiState>((set) => ({
  keyword: "",
  page: 0,
  setKeyword: (k) => set({ keyword: k, page: 0 }),   // 换词回第一页，细节见真章
  setPage: (p) => set({ page: p }),
}));

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const schema = z.object({
  title: z.string().min(1, "标题必填"),
  url: z.string().url("URL 不合法"),
  tags: z.array(z.string()).max(5, "最多 5 个标签"),
});
type FormInput = z.infer<typeof schema>;   // 类型从 schema 推导，不用写两遍

const form = useForm<FormInput>({
  resolver: zodResolver(schema),
  defaultValues: { title: "", url: "", tags: [] },
});

services:
  web:                      # 前端：第 42 篇的多阶段构建镜像（Nginx + dist）
    build: ./web
    ports:
      - "80:80"             # 静态资源、回退路由、/api 反代都在这
  api:                      # 后端：Spring Boot jar 的镜像
    build: ./api
    expose:
      - "8080"              # 不对公网暴露，只有 web 访得到
  db:
    image: mysql:8.4
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data: