从头开始创建一个自动产生文档/类型安全的现代API(15) 创建前端页面

从零搭建

现在我们开始创建前端页面。

利用 v0 快速输出前端页面

打开 v0 输入以下提示词：

帮忙编写一个网页，风格为现代偏科技，支持显示task list，task有name 和 done 两个属性，用户可以添加/修改/删除 task。
未完成的任务 最好显示为方框，完成后显示为打勾。
任务清单支持拖曳 调整 顺序。

通过几轮调整，页面基本符合要求。

More...

从头开始创建一个自动产生文档/类型安全的现代API(13) 设置测试环境

从零搭建

下面我们设置一下单元测试的环境，避免测试影响正常环境的数据。

添加测试环境配置文件

添加文件 .env.test:

1
2
3
4
NODE_ENV=development
PORT=3001
LOG_LEVEL=silent
DATABASE_URL=file:./test.db

修改环境变量读取程序

修改文件 utility/env.ts:

1
2
3
4
5
6
7
8
9
10
...
import path from "node:path";

expand(config({
  path: path.resolve(
    process.cwd(),
    process.env.NODE_ENV === "test" ? ".env.test" : ".env",
  ),
}));
...
More...

从头开始创建一个自动产生文档/类型安全的现代API(11) 按id删除任务

从零搭建

下面我们给 API 添加按id删除任务。

添加根据 ID 修改任务

添加路径

添加路径，修改app/api/[[...route]]/routes/tasks/tasks.routes.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
export const deleteById = createRoute({
  tags: ["Tasks"],
  path: "/tasks/{id}",
  method: "delete",
  request: {
    params: IdParamsSchema,
  },
  responses: {
    [HttpStatusCodes.NO_CONTENT]: {
      description: "Task deleted",
     },
    [HttpStatusCodes.NOT_FOUND]: jsonContent(
      notFoundSchema,
      "The task was not found",
    ),
    [HttpStatusCodes.UNPROCESSABLE_ENTITY]: jsonContent(
      createErrorSchema(IdParamsSchema),
      "Invalid id error",
    ),
  },
});

...
export type DeleteByIdRoute = typeof deleteById;

添加实现

添加实现，修改 app/api/[[...route]]/routes/tasks/tasks.handlers.ts :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
export const deleteById: AppRouteHandler<DeleteByIdRoute> = async (c) => {
  const { id } = c.req.valid("param");
 
  const result = await db
    .delete(tasks)
    .where(eq(tasks.id, id));

  if ( result.rowsAffected === 0 ) {
    return c.json({ message: HttpstatusPhase.NOT_FOUND }, HttpStatusCodes.NOT_FOUND);
  };

  return c.body(null, HttpStatusCodes.NO_CONTENT );
};

...

添加引用

添加引用，修改 `` :

1
2
3
...
  .openapi(routes.deleteById, handlers.deleteById);
...
More...

从头开始创建一个自动产生文档/类型安全的现代API(10) 按id修改任务

从零搭建

下面我们给 API 添加按id修改任务。

添加根据 ID 修改任务

添加路径

添加路径，修改app/api/[[...route]]/routes/tasks/tasks.routes.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
...
import { notFoundSchema, IdParamsSchema, badRequestSchema } from "@/utility/constants";
...
export const patch = createRoute({
  tags: ["Tasks"],
  path: "/tasks/{id}",
  method: "patch",
  request: {
    params: IdParamsSchema,
    body: jsonContentRequired(
      patchTasksSchema,
      "The task to be changed",
    )
  },
  responses: {
    [HttpStatusCodes.OK]: jsonContent(
      selectTasksSchema,
      "The changed task",
    ),
    [HttpStatusCodes.NOT_FOUND]: jsonContent(
      notFoundSchema,
      "The task id was not found",
    ),
    [HttpStatusCodes.BAD_REQUEST]: jsonContent(
      badRequestSchema,
      "Update data is empty",
    ),
    [HttpStatusCodes.UNPROCESSABLE_ENTITY]: jsonContent(
      createErrorSchema(IdParamsSchema)
        .or(createErrorSchema(patchTasksSchema)),
      "The validation errors",
    ),
  },
});
...
export type PatchRoute = typeof patch;
More...

如何修改 git 最近一次 commit 的描述

当日所学

首先，确保你的工作树是干净的（即，所有更改都已经被提交或暂存）。

  1. 使用以下命令来修改最近一次 commit 的描述：

    1
    git commit --amend

    这将打开默认的文本编辑器，允许你编辑上次提交的 commit 信息。

  2. 修改描述后，保存并关闭编辑器。（我这边默认会打开Nano，按Ctrl+X 退出）新的描述会覆盖原来的描述，但请注意，这相当于创建了一个新的 commit，旧的 commit 会被删除。

  3. 如果你已经将代码推送到远程仓库，需要强制推送：

    1
    git push --force
More...

从头开始创建一个自动产生文档/类型安全的现代API(9) 建立校验规则/按id读取任务

从零搭建

下面我们给 API 参数添加校验功能。

在Schema中添加规则

修改 db/schema.ts:

1
2
3
4
5
6
7
8
9
10
11
12
...
export const insertTasksSchema = createInsertSchema(
  tasks,
  {
    name: z.string().min(1).max(255),
    done: z.boolean(),
  },
  ).omit({
    id: true,
    createdAt: true,
    updatedAt: true,
  });

这里我添加了规则，name的长度只能在1到255之间，规避了0长度和过长的name。

访问 localhost:3000/reference, 可以看到API已更新：

More...

从头开始创建一个自动产生文档/类型安全的现代API(8) 创建数据

从零搭建

下面我们给API添加创建功能。

添加路径

修改文件 app/api/[[...route]]/routes/tasks/tasks.routes.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
export const create = createRoute({
  tags: ["Tasks"],
  path: "/tasks",
  method: "post",
  request: {
    body: jsonContentRequired(
      insertTasksSchema,
      "The task to create",
    )
  },
  responses: {
    [HttpStatusCodes.OK]: jsonContent(
      selectTasksSchema,
      "The created task",
    ),
  },
});

export type CreateRoute = typeof create;
...
More...

如何设置 Drizzle Schema 让 SQLite 支持自动填入创建时间

日常练习

背景

之前用下面的Schema创建了表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export const tasks = sqliteTable("tasks", {
  id: integer("id", { mode: "number" })
    .primaryKey({ autoIncrement: true }),
  name: text("name")
    .notNull(),
  done: integer("done", { mode: "boolean" })
    .notNull()
    .default(false),
  createdAt: integer("created_at", { mode: "timestamp" })
    .$defaultFn(() => new Date()),
  updatedAt: integer("updated_at", { mode: "timestamp" })
    .$defaultFn(() => new Date())
    .$onUpdate(() => new Date()),
});

发现这个创建时间和更新时间并没有生效，研究了一下，这样写可能有问题。

解决方案

查询了一下，修改为下面的语句：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { sql } from "drizzle-orm";
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
import { createSelectSchema } from "drizzle-zod";

export const tasks = sqliteTable("tasks", {
  id: integer("id", { mode: "number" })
    .primaryKey({ autoIncrement: true }),
  name: text("name")
    .notNull(),
  done: integer("done", { mode: "boolean" })
    .notNull()
    .default(false),
  createdAt:  text('created_at')
    .notNull()
    .default(sql`(current_timestamp)`),
  updatedAt:text('updated_at')
    .notNull()
    .default(sql`(current_timestamp)`)   
});

export const selectTasksSchema = createSelectSchema(tasks);

updateAt字段无效，需要更新时主动更新。

效果

修改完后，利用 drizzle-kit 重新生成数据库：

1
2
bun drizzle-kit generate
bun drizzle-kit push

试了一下，插入数据后自动产生了时间：

1
1|Hello Hone|0|2025-02-24 06:13:34|2025-02-24 06:13:34
More...

请我喝杯咖啡吧~

支付宝
微信