SolidStart

npm create solid@latest solidstart-catalog
cd solidstart-catalog
npm install
npm run dev

import { solidStart } from "@solidjs/start/config";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [solidStart()],
});

import {
  createAsync,
  query,
  type RouteDefinition,
} from "@solidjs/router";
import { For, Suspense } from "solid-js";

const getProjects = query(async () => {
  "use server";

  return [
    { id: "1", name: "SolidStart" },
    { id: "2", name: "SolidJS" },
  ];
}, "projects");

export const route = {
  preload: () => getProjects(),
} satisfies RouteDefinition;

export default function ProjectsPage() {
  const projects = createAsync(() => getProjects());

  return (
    <main>
      <h1>开源项目</h1>
      <Suspense fallback={<p>正在加载…</p>}>
        <ul>
          <For each={projects()}>
            {(project) => <li>{project.name}</li>}
          </For>
        </ul>
      </Suspense>
    </main>
  );
}

import {
  action,
  redirect,
  useSubmission,
} from "@solidjs/router";

const createProject = action(async (formData: FormData) => {
  "use server";

  const name = String(formData.get("name") ?? "").trim();
  if (!name || name.length > 80) {
    throw new Error("项目名称不合法");
  }

  // 在这里写入数据库，并执行当前用户的授权检查
  throw redirect("/projects");
}, "create-project");

export function CreateProjectForm() {
  const submission = useSubmission(createProject);

  return (
    <form action={createProject} method="post">
      <input name="name" required maxlength="80" />
      <button disabled={submission.pending}>
        {submission.pending ? "正在保存…" : "添加项目"}
      </button>
    </form>
  );
}

import type { APIEvent } from "@solidjs/start/server";

export async function GET({ params }: APIEvent) {
  return Response.json({
    id: params.id,
    name: "SolidStart",
  });
}