Wasp 实战：30分钟搭建带认证的全栈应用

npm install -g @wasp.sh/wasp-cli@latest
wasp new todo-app
cd todo-app

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  username  String   @unique
  tasks     Task[]
}

model Task {
  id          Int     @id @default(autoincrement())
  description String
  isDone      Boolean @default(false)
  user        User    @relation(fields: [userId], references: [id])
  userId      Int
}

cd ext/db
npx prisma migrate dev
npx prisma generate

app todo-app {
  wasp: { version: "^0.16.0" },
  title: "Todo App"
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true,
  component: import MainPage from "@ext/MainPage"
}

query getTasks {
  fn: import { getTasks } from "@ext/queries",
  entities: [Task]
}

action createTask {
  fn: import { createTask } from "@ext/actions",
  entities: [Task]
}

auth {
  userEntity: User,
  methods: {
    usernameAndPassword: {}
  },
  onAuthFailedRedirectTo: "/login"
}

authRoute LoginPage { path: "/login", to: LoginPageComponent }
page LoginPageComponent {
  component: import { LoginPage } from "@wasp/auth"
}

import { useQuery, useAction } from "wasp/client";
import { getTasks } from "wasp/client/operations";
import { createTask } from "wasp/client/operations";
import { useState } from "react";

export default function MainPage() {
  const { data: tasks, isLoading } = useQuery(getTasks);
  const [description, setDescription] = useState("");
  const handleCreate = useAction(createTask);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (description.trim()) {
      await handleCreate({ description });
      setDescription("");
    }
  };

  if (isLoading) return <div>加载中...</div>;

  return (
    <div style={{ maxWidth: 400, margin: "40px auto", padding: 20 }}>
      <h2>我的 Todo 列表</h2>
      <form onSubmit={handleSubmit}>
        <input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="新任务..." style={{ width: "calc(100% - 80px)", padding: 8, marginRight: 8 }} />
        <button type="submit" style={{ padding: "8px 16px" }}>添加</button>
      </form>
      <ul style={{ listStyle: "none", padding: 0, marginTop: 20 }}>
        {tasks?.map((task) => (
          <li key={task.id} style={{ padding: 8, borderBottom: "1px solid #eee" }}>
            <span style={{ textDecoration: task.isDone ? "line-through" : "none" }}>{task.description}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// src/queries.ts
import { Task } from "wasp/entities";
export const getTasks = async (_args: void, context: any): Promise<Task[]> => {
  if (!context.user) throw new Error("Unauthorized");
  return context.entities.Task.findMany({ where: { userId: context.user.id }, orderBy: { id: "desc" } });
};

// src/actions.ts
import { Task } from "wasp/entities";
export const createTask = async (args: { description: string }, context: any): Promise<Task> => {
  if (!context.user) throw new Error("Unauthorized");
  return context.entities.Task.create({ data: { description: args.description, userId: context.user.id } });
};

wasp start