从头开始制作应用程序是我最喜欢的学习应用程序工作原理的方式。这篇文章将讨论如何从头开始制作 URL 缩短器。

URL 缩短器非常容易制作，在我看来，这是初学者学习语言的好方法。更困难的部分是添加自定义域、分析、分组链接以及在 URL 缩短服务之上添加的其他功能。因此，您可以按照以下方法从头开始制作一个。

在本教程中，我们将使用 hono (nodejs)、drizzle orm 和 postgres，但它可以使用任何语言和框架来完成，请查看我的 sveltekit/golang 实现 kon.sh，github 中的源代码。

首先创建一个新的 hono 项目

npm create hono@latest

然后填写以下信息

[email protected]
Ok to proceed? (y)
create-hono version 0.13.1
? Target directory url-shortener
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm

确保您已准备好 postgres 数据库并创建一个名为 url-shortener 的新数据库。

在 src/ 文件夹下应该有一个 index.ts 文件，该文件包含运行 api 服务器的代码。这里我们需要添加2个api路由。

• 创建缩短器
• 用于重定向传入请求的全部路由

src/index.ts

app.post("/api/shortener", async (c) => {
    // create shortener route
    return c.text("Not yet implemented");
});

app.get("/:code", async (c) => {
    // redirect
    return c.text("Not yet implemented");
});

现在我们可以安装 drizzle orm 并初始化我们的数据库。首先，安装所需的软件包

npm i drizzle-orm postgres
npm i -D drizzle-kit

然后我们需要在src文件夹下新建db文件夹，并添加index.ts用于初始化db客户端，schema.ts用于数据库schema。

src/db/schema.ts

import { pgTable, text, varchar } from "drizzle-orm/pg-core";

export const shortener = pgTable("shortener", {
    id: text("id").primaryKey(),
    link: varchar("link", { length: 255 }).notNull(),
    code: varchar("code", { length: 255 }).notNull().unique(),
});

src/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const queryClient = postgres(
    "postgres://postgres:[email protected]:5432/url-shortener"
);
export const db = drizzle(queryClient, { schema });

然后在根文件夹创建一个 drizzle.config.ts 文件。

drizzle.config.ts

// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
    schema: "./src/db/schema.ts",
    out: "./drizzle",
    dialect: "postgresql",
    dbCredentials: {
        url: "postgres://postgres:[email protected]:5432/url-shortener",
    },
});

运行 npx drizzle-kit push 将架构推送到数据库。

npx drizzle-kit push

完成所有设置后，我们终于可以处理 api 了，运行 npm run dev 来启动服务器

npm run dev

首先制作一个随机字符串生成器。在src下新建一个文件夹，命名为utils，然后创建一个index.ts文件。

index.ts

export function generateId(length: number) {
    let result = "";
    const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (let i = 0; i 



然后更新创建缩短路线。



app.post("/api/shortener", async (c) => {
    const body = await c.req.json();

    const link = body.link;

    const code = generateId(6);

    await db.insert(shortener).values({
        id: generateId(8),
        link,
        code,
    });

    return c.json({ code });
});




然后您可以向包含链接的端点发出发布请求以生成新的缩短器。这是在我的 VSCode 中使用 Thunder Client 的示例：



最后，更新重定向api。



app.get("/:code", async (c) => {
    const code = c.req.param("code");

    const link = await db
        .select()
        .from(shortener)
        .where(eq(shortener.code, code));

    if (link.length === 0) {
        return c.text("Invalid code");
    }

    return c.redirect(link[0].link);
});




然后在浏览器上导航至 http://localhost:3000/{code}，您将被重定向到原始链接。

就是这样。 URL 缩短器是开始学习新语言的好方法，您可以使用该语言流行的后端框架并学习使用该语言与数据库进行通信。

还有很多东西需要探索，例如为缩短程序生成 QR 代码、记录分析重定向、自定义域等等。这些不在本教程中涵盖。

查看我的 github 查看我的作品，我的所有项目都是开源的，免费供任何人学习和贡献。

我也乐于接受新想法，尽管我目前的技能可能与难度不相匹配。欢迎在评论中分享。