前端笔记：路由
从项目直接学习前端
alfa-leetcode-api
对这个项目很感兴趣，正好Copilot免费了，可以直接在github上学习
路由就是URL到函数的映射。
理解Web路由（浅谈前后端路由与前后端渲染）
AI解释（不保证对）
没问题，我来详细解释一下什么是路由。
在 Web 开发中，路由（Routing）是指将用户请求的 URL 映射到特定的代码处理程序或控制器上。简单来说，路由决定了当用户访问某个网址时，服务器应该如何响应。
路由的作用
- 请求处理： 当用户访问一个 URL 时，路由会将这个请求分配给相应的处理函数或控制器。
- URL 结构： 路由定义了应用程序的 URL 结构，使得不同的 URL 可以对应不同的功能。
- 参数传递： 路由可以从 URL 中提取参数，并传递给处理函数。
路由的基本概念
- 路径（Path）：URL 中的具体路径，例如
/user,/profile/:username。 - HTTP 方法（HTTP Methods）：定义请求的类型，例如
GET,POST,PUT,DELETE等。 - 处理函数（Handler Function）：当路由匹配时执行的代码逻辑，通常是一个函数。
在 Express.js 中的路由示例
假设你有一个简单的 Express.js 应用程序，你想要处理用户访问 /hello 路径时的请求。
-
安装 Express.js：
npm install express -
创建一个简单的服务器并定义路由：
// 引入 Express 模块 const express = require('express'); const app = express(); // 定义一个 GET 路由 app.get('/hello', (req, res) => { res.send('Hello, World!'); }); // 启动服务器，监听端口 3000 const PORT = 3000; app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); -
运行服务器：
node app.js现在，当你在浏览器中访问
http://localhost:3000/hello时，服务器会响应并返回Hello, World!。
复杂路由示例
假设你想处理带参数的 URL，例如 /user/:username，并返回指定用户的资料。
// 引入 Express 模块
const express = require('express');
const app = express();
// 定义一个带参数的 GET 路由
app.get('/user/:username', (req, res) => {
const username = req.params.username; // 从 URL 中提取参数
res.send(`User profile for ${username}`);
});
// 启动服务器，监听端口 3000
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
当你访问 http://localhost:3000/user/yang-Alice 时，服务器会响应并返回 User profile for yang-Alice。
总结
- 路由 是将 URL 请求映射到处理函数的过程。
- 路径 和 HTTP 方法 是路由的基本组成部分。
- 处理函数 定义了当路由匹配时应该执行的代码逻辑。
希望这些解释能帮助你理解路由的概念。如果还有问题，随时告诉我！
了解了。我们可以在本地运行这个项目，而不使用 Docker。请按照以下步骤操作：
-
克隆仓库：
git clone https://github.com/alfaarghya/alfa-leetcode-api.git cd alfa-leetcode-api -
安装依赖：
确保你已经安装了 Node.js 和 npm，然后运行以下命令安装项目依赖：npm install -
运行项目：
使用以下命令启动项目：npm start -
实现一个简单的端点：
以获取用户资料详情的端点（GET /:username）为例。我们可以在项目的src目录下创建适当的路由和控制器。
以下是完整的示例代码，包括如何配置和测试路由：
1. 创建 Express 应用程序
首先，确保你有以下文件结构：
project/
├── src/
│ ├── controllers/
│ │ └── userController.ts
│ └── routes.ts
├── app.ts
├── package.json
└── tsconfig.json
2. 安装依赖
确保你已经安装了 Node.js 和 npm，然后在项目根目录下运行以下命令安装依赖：
npm init -y
npm install express typescript ts-node @types/node @types/express node-fetch
3. 配置 TypeScript
在项目根目录下创建 tsconfig.json 文件，内容如下：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": ["src/**/*.ts", "app.ts"],
"exclude": ["node_modules"]
}
4. 实现路由和控制器
src/routes.ts
import express from 'express';
import { getUserProfile } from './controllers/userController';
const router = express.Router();
// 定义带参数的 GET 路由
router.get('/user/:username', getUserProfile);
export default router;
src/controllers/userController.ts
import { Request, Response } from 'express';
import fetch from 'node-fetch';
export const getUserProfile = async (req: Request, res: Response) => {
const { username } = req.params;
// 模拟获取用户资料的逻辑
const userProfile = await fetchUserProfile(username);
res.json(userProfile);
};
const fetchUserProfile = async (username: string) => {
// 模拟从 LeetCode API 获取用户资料的逻辑
// 示例：
const response = await fetch(`https://leetcode.com/api/user/${username}`);
const data = await response.json();
return data;
};
5. 创建主应用程序文件
app.ts
import express from 'express';
import router from './src/routes';
const app = express();
const PORT = 3000;
// 使用定义的路由
app.use('/', router);
// 启动服务器
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
6. 运行服务器
在项目根目录下运行以下命令启动服务器：
npx ts-node app.ts
7. 测试端点
使用 curl 测试端点：
curl http://localhost:3000/user/your-username
在这个示例中，确保路径 /user/:username 和你的测试路径 http://localhost:3000/user/your-username 一致，这样路由才能正确匹配并调用对应的处理函数。！
以上没有运行测试