1
// 模块路径示例
2
import { useState } from 'react';           // 从 node_modules 导入
3
import MyComponent from '@/components/MyComponent';  // 使用别名导入（@ 指向前 src 目录）
4
import api from '../utils/api';               // 相对导入

1
# Windows：从盘符开始
2
D:\project\blog\api\like.ts
3
C:\Users\admin\Desktop\notes.md
4

5
# Mac/Linux：从根目录开始（/）
6
/home/user/project/api/like.ts
7
/etc/nginx/nginx.conf
8
/usr/local/bin/node

1
/home/user/project/src/components/Button.ts
2
^^^^^^ ^^^ ^^^^ ^^^^^^ ^^^^^^^^^^ ^^^^^^^
3
根目录  用户  项目   源码    组件      文件

1
https://example.com:443/api/users?id=1#section
2
^^^^^^^^ ^^^^://^^^ ^^^^/^^ ^^^^^^ ^^=^ ^^^^^^
3
  |      |     |    |     |      |    |
4
  协议   域名  端口  路径  查询参数  锚点

1
https://example.com/blog/posts/dns-guide
2
                            ^^^^^^^^^^^^^^
3
                            路径层级

1
# Linux/Mac：从根目录 / 开始
2
/etc/nginx/nginx.conf
3
/home/user/project/src/index.ts
4
/var/log/nginx/access.log
5

6
# Windows：从盘符开始
7
D:\project\blog\api\like.ts
8
C:\Users\admin\Desktop\notes.md

1
<!-- 完整的绝对 URL（带协议） -->
2
<a href="https://example.com/api/users">链接</a>
3

4
<!-- 根相对路径（从域名根开始，不带协议） -->
5
<a href="/api/users">链接</a>
6
<a href="/images/logo.png">图片</a>

1
# 当前目录
2
.
3

4
# 当前目录下的 src
5
src/
6

7
# 当前目录下的 src/index.ts
8
src/index.ts
9

10
# 上一级目录
11
..
12

13
# 上上级目录
14
../..
15

16
# 上一级的 config 文件夹
17
../config/
18

19
# 上一级的 config/settings.json
20
../config/settings.json

1
.   当前目录
2
..  上一级（父）目录

1
<!-- 在 https://example.com/blog/ 中 -->
2
<a href="posts/dns-guide">文章</a>
3
<!-- 链接到 https://example.com/blog/posts/dns-guide ✓ -->
4

5
<!-- 在 https://example.com/ 中 -->
6
<a href="posts/dns-guide">文章</a>
7
<!-- 链接到 https://example.com/posts/dns-guide ✓ -->

1
// ❌ 错误：以为会自动映射
2
// API 在 api/like.js，就以为能访问 /api/like
3

4
// ✅ 正确：必须明确定义路由
5
app.get('/api/like', (req, res) => { ... });
6
app.post('/api/like', (req, res) => { ... });

1
const express = require('express');
2
const app = express();
3

4
// 首页
5
app.get('/', (req, res) => {
6
    res.send('这是首页');
7
});
8

9
// 获取点赞数
10
app.get('/api/like', (req, res) => {
11
    res.json({ count: 42 });
12
});
13

14
// 增加点赞
15
app.post('/api/like', (req, res) => {
16
    // 增加点赞逻辑
17
    res.json({ count: 43 });
18
});
19

20
// 获取用户列表
21
app.get('/api/users', (req, res) => {
22
    res.json([{ name: 'Alice' }, { name: 'Bob' }]);
23
});
24

25
// 获取单个用户
26
app.get('/api/users/:id', (req, res) => {
27
    const { id } = req.params;
28
    res.json({ id, name: 'User ' + id });
29
});

1
<!-- 绝对路径（推荐） -->
2
<link href="/css/style.css">
3
<a href="/api/users">用户</a>
4
<img src="/images/logo.png">
5

6
<!-- 相对路径（有风险） -->
7
<link href="../css/style.css">
8
<a href="users">用户</a>

1
✅ /about/     → 明确是 about 目录
2
✅ /about      → 服务器通常会自动重定向到 /about/
3
⚠️ /about     → 取决于服务器配置