Почему импорт роутера для экспресса в TypeScript не работает

Question

Я пытаюсь настроить простой сервис REST Hello World, используя NodeJS и машинопись.Я хочу разделить маршрутизаторы на разные файлы, но как-то не получается.

Проще говоря, для вызова GET на http://localhost:3000/welcome/hi, почему Проект 1 работает, а Проект 2 - нет?Я пытался искать учебники, но код, кажется, не работает так, как я хочу.

Проект 1

import express from "express";
import { Router, Request, Response } from "express";

const app: express.Application = express();
const port: any = process.env.PORT || 3000;

const router: Router = Router();
const welcomeRouter: Router = Router();

welcomeRouter.get("/", (req: Request, res: Response) => {
    res.send({"message": "Welcome!"});
});

welcomeRouter.get("/:name", (req: Request, res: Response) => {
    let { name } = req.params;

    res.send(`Hello, ${name}!`);
});

router.get("/", (req: Request, res: Response) => {
    res.send({"message":"Hello, World!"});
});

app.use("/", router);
app.use("/welcome", welcomeRouter);


app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}/`);
});

Проект 2

. / App.ts

import { Router, Request, Response } from "express";

const router: Router = Router();

router.get("/", (req: Request, res: Response) => {
    res.send({"message": "Welcome!"});
});

router.get("/:name", (req: Request, res: Response) => {
    let { name } = req.params;

    res.send(`Hello, ${name}!`);
});

export default router;

. / Server.ts

import express from "express";
import { Router, Request, Response } from "express";

import welcomeRouter from "./app";

const app: express.Application = express();
const port: any = process.env.PORT || 3000;

const router: Router = Router();

app.use("/welcome", welcomeRouter);

router.get("/", (req: Request, res: Response) => {
    res.send({"message":"Hello, World!"});
});

app.use("/", router);
app.use("/welcome", welcomeRouter);

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}/`);
});

Answer 1

Порядок, в котором вы «монтируете» или app.use каждый маршрутизатор, имеет значение.Кроме того, чтобы следовать порядку, в котором вы их монтируете, путь также имеет значение.Думайте о них как о стеке .

Итак, для первого у вас есть:

1. /welcome -> welcomeRouter
2. / -> router

Поэтому, когда вы делаете GET http://localhost:3000/welcome/hi, welcomeRouter будет обрабатывать запрос, поскольку он является первым в стеке, который соответствует пути /welcome.

Просто GET http://localhost:3000/welcome дает {"message": "Welcome!"}, правильно?Затем, наконец, получим GET http://localhost:3000/welcome/hi выход: Hello hi.

Для второго у вас есть:

1. / -> router (я предполагаю, что этот маршрутизаторссылается на тот, который вы определили в app.ts)
2. /welcome -> welcomeRouter

В пределах app.ts, куда вы экспортируете объект router, у вас естьмаршрут, определенный как /:name.

Это будет обрабатывать что угодно: /*.Это означает, что он также будет обрабатывать /welcome, где welcome становится параметром name.

Таким образом, перемещение welcomeRouter над router должно заставить его работать как проект 1.