第一篇 · 认识世界 / 第 2 章

计算机与网络

你刚做好一个页面，把链接发给同事，对方却回你一句“打不开”。 你刷新了一下，自己这边明明好好的。问题不在他，也不在魔法——只是你还不知道， 地址、文件和“正在运行”各自住在哪儿。

预计阅读

25 分钟

前置

会用浏览器打开网页

关键词

计算机、文件、网络、IP、HTTP、服务器、云

读完这一章，你能

• 在一个网址里指出域名、端口和路径，并说出一次访问大概经过了哪几站；
• 解释为什么把 http://localhost:3000 发给同事，对方会打不开；
• 在开发者工具的 Network 面板里找到一次页面请求，读出它的状态码。

午饭登记 · 当前状态：只在你电脑上能开，别人打不开，刷新还可能丢

一台电脑里有什么

先回答一个看起来太简单的问题：你按下电源键之后，电脑里到底在发生什么？

先记住三个零件。它们的分工，和一个厨房几乎一模一样。

CPU

中央处理器（CPU，电脑里真正执行指令的零件）。 它像厨师：不负责囤菜，只负责动手。所有计算和判断，最后都要经过它。

内存

内存（RAM，临时放正在使用的东西的地方）。 它像工作台：切到一半的菜、正在看的菜谱都摊在这里。收工断电，台面就清空。

硬盘

硬盘（SSD 或机械硬盘，长期保存文件的地方）。 它像仓库：菜谱、食材、成品都放这儿。断电以后，仓库里的东西还在。

再分清两个词。现在硬盘上的 lab-lunch.html，只是仓库里的一份菜谱。 你用浏览器打开它，浏览器把它读进内存并开始执行，它才变成你眼前这个能点的页面。

所以“刷新”不是凭空变魔术：它是让浏览器把同一份文件重新读一遍、重新运行一次。 如果某条记录只放在内存里，刷新就等于把工作台清空——记录自然没了。

操作系统与文件

你双击一个文件，系统知道该叫谁来打开它。这个“知道”，来自操作系统。

操作系统（Operating System，管理硬件和文件的软件）像一个管家： Windows、macOS、Linux 都是。它负责分配内存、读写硬盘、连接网络， 也负责在你双击时，把文件交给对应的程序。

路径就是地址

文件夹可以一层套一层，于是每个文件都有一个完整地址。 C:\Users\小王\Desktop\lunch\index.html 读作： C 盘里的 Users 文件夹、小王的文件夹、Desktop 文件夹、lunch 文件夹里的 index.html。

从盘符写起的完整地址叫绝对路径。 从“我现在所在的文件夹”算起的短地址叫相对路径，比如 ./index.html。 AI 说“改一下 src/app.js”时，用的就是相对路径。

扩展名只是名字的一部分

文件名最后那段 .html、.jpg、.txt 叫扩展名。 它只是名字的一部分，用来提示系统“该找哪个程序来打开”，并不是内容的保证。

把一张图片的 .jpg 改成 .txt，图片内容不会变成文字， 只是系统会尝试用记事本打开它，然后给你看一堆乱码。

双击，等于说“用默认程序打开”。 右键选择“打开方式”，则是你亲自指定程序。同一个 .html 文件， 可以用浏览器打开看页面，也可以用编辑器打开看源码——文件没变，只是开法不同。

程序怎么跑起来

把这三件事串起来，你就懂了“运行”。

源码

源码（source code，人写给电脑看的指令文本）。 它是菜谱：安静地躺在硬盘上，不点火就不会变成菜。

进程

进程（process，一个正在运行的程序）。 它是“正在做的那道菜”：占着工作台，占用内存，随时可能被端走或倒掉。

内存

它是工作台。进程运行时产生的临时数据放在这里，进程一结束就清空。

同一个程序可以同时开好几个进程。浏览器开了三个标签页，背后可能就有好几个进程， 各自占一块工作台，互不打扰。

让程序跑起来，有两条路。双击图标，是让操作系统帮你点火； 在终端里敲一条命令，是你自己点火。结果一样，只是后者能看见更多过程输出。

程序停下也常见：缺了某个零件（依赖没装）、指令写错（报错）、 或者它正在等你输入（看起来像卡住）。关掉窗口会结束进程； 有些程序会一直占着终端，按 Ctrl + C 就能让它停下。

在午饭案例里，本地预览就是一个进程。终端打印出 http://localhost:3000 时，说明这个进程正在你的电脑上等着访问。 一旦关掉终端，进程结束，这个地址也就打不开了。

两台电脑怎么说话

网络没有那么玄。它只做一件事：让一台电脑把一句话送到另一台电脑，再把回答带回来。

主动发问的叫客户端（client，主动发起请求的一方）， 等着回答的叫服务器（server，等待请求并给出回应的一方）。 你的浏览器是客户端；提供页面的那台电脑是服务器。

可以把这件事想成寄信：你要写清收件地址，邮局要知道把信送到哪， 对方收到后按同样的地址回信。

IP 地址

IP 地址（IP address，网络里一台设备的门牌号）。 例如 192.168.1.23。信件最终必须送到一个门牌号，机器只认这个。

域名

域名（domain name，给人看的网站名字）。 例如 lunch.example.com。人记得住名字，记不住一长串数字。

DNS

DNS（Domain Name System，把域名翻译成 IP 的“电话簿”）。 你输入域名后，电脑先查这本电话簿，找到对应的门牌号，才知道往哪儿寄。

端口

端口（port，同一台机器上不同服务的门）。 一栋楼只有一个门牌号，但里面有很多房间。网站、数据库、邮件各占一个端口。

HTTP

HTTP（超文本传输协议，浏览器和服务器之间“怎么问、怎么答”的约定）。 它规定信的开头怎么写、对方怎么回、出错时怎么表示。

HTTPS

HTTPS（加密版 HTTP）。 普通 HTTP 像明信片，路上的人可能看见内容；HTTPS 像加了封条的加密信件， 还能确认收信方是不是真的。

一个典型的网址 https://lunch.example.com:443/api/lunch-orders?date=today 可以拆成五段：协议是 https://，域名是 lunch.example.com， 端口是 :443，路径是 /api/lunch-orders， 参数是 ?date=today。

HTTPS 的默认端口是 443，HTTP 是 80，所以平时通常省略不写。 你自己在本机跑预览时，常见的 :3000、:5173、:8000 就是另一个房间号。

一次访问的完整旅程

现在把刚才的词串成一条线。你在地址栏敲下一个网址、按下回车，接下来发生八件事。

1. 输入网址浏览器先拆地址：用什么协议、找哪台机器、要哪个路径、带什么参数。
2. 查 DNS把域名翻译成 IP。本机、路由器、运营商都可能缓存过答案。
3. 建立加密连接HTTPS 会先确认对方证书属于这个域名，再商定怎么加密。
4. 发出请求浏览器说：“我要 /api/lunch-orders?date=today 这份数据。”
5. 服务器处理后端（backend，在服务器上处理请求、决定返回什么的那部分程序）收到请求，检查参数、判断权限。
6. 查数据库需要数据时，服务器去数据库（database，长期保存数据的地方）把午饭记录取出来。
7. 返回响应服务器回一个状态码，加上 HTML 页面或 JSON 数据。
8. 浏览器渲染浏览器解析 HTML、CSS、JavaScript，把它画成你能点的页面。

这是从网络视角看的八站。到了 第 3 章，我们会换到软件内部， 把中间“服务器处理”那一站再拆成 8 步——两张图一粗一细，不是两套说法。

请求和响应长什么样？下面是最小的一份示例。你不需要会写，只需要能认出来。

GET /api/lunch-orders?date=today
Host: lunch.example.com

200 OK
[
  { "name": "小王", "dish": "牛肉面" }
]

状态码是服务器给你的第一句回答。200 表示成功， 404 表示“你要的地址我这儿没有”， 500 表示“我这边处理时出错了”。

局域网、公网、服务器与云

服务器（server）听起来高级，其实就是一台一直开着、等着别人来访问的电脑。 你的笔记本也能临时当服务器，只是你一合盖，它就下班了。

按“谁能访问”来分，同一个页面可以处在三种范围里。

本地（local）指这台电脑自己； 局域网（LAN，同一个路由器下的小网络）指同一个 Wi-Fi 里的设备； 公网（internet，所有能上网的人都能到达的大网络）指外面的世界。 云，则是你在公网上租来的机房和服务器。

云（cloud）不是“数据飘在天上”。它就是别人建好的机房， 你按月租一小块，省掉买机器和维护的麻烦。数据仍然躺在某块硬盘上，只是那块硬盘不归你保管。

域名

按年租用，常见后缀几十到上百元一年，具体以注册商报价为准。

备案

在中国大陆用域名对外提供网站服务，通常要先完成备案；具体要求以服务商为准。

证书

让 HTTPS 生效的那份文件。现在多数托管平台可以免费自动申请和续期。

成本

小项目通常每月十几到几十元；流量和数据库变大后会更贵，以平台账单为准。

把这些东西放到公网服务器上、让别人能访问，这个动作叫部署。 具体的软件结构和部署方式在第 3 章，这里先记住一句话：能在你电脑上打开，不等于别人能打开。

数据住在哪儿

同一个页面，数据可能住在三个完全不同的地方。这决定了它刷新后还在不在、换设备后还在不在。

所以“刷新就丢”和“换设备就丢”不是同一个问题。

刷新就丢，通常说明数据只在内存或页面变量里，页面一重新运行就清空。 换设备就丢，通常说明数据只在浏览器的 localStorage 里，它本来就不跨设备同步。

在午饭案例的第一阶段，数据先存在你自己的浏览器里。 这足够你验证“填一条、看一条、删一条”，但同事看不到，换台电脑也看不到。 要变成团队登记，就得把数据搬到服务器和数据库里——那是后面几章的事。

想亲手看一次数据到底存在哪儿、什么时候会丢？ 去实验页亲手做一次“换设备就丢”。 填一条午饭记录，先刷新一次，再切到另一台设备，看它究竟在哪一步消失。

终端与报错是朋友

终端（terminal，用打字代替点击的地方）不是黑客专属。 你点鼠标删文件，和打一条删除命令，电脑做的事是一样的。

终端窗口只有三样东西要认：提示符、命令、输出。

C:\我的项目> npm run dev
  ▲ 本地地址：http://localhost:3000
^C   ← 按 Ctrl+C 就是停下

• 提示符：C:\我的项目>，告诉你现在站在哪个文件夹里，等你输入。
• 命令：你敲的那一行。AI 给的命令可以直接复制粘贴。
• 输出：机器说的话。正常输出是灰的，报错通常是红的。

有的命令跑起来会一直占着终端，比如本地预览。这时打什么都没用， 按 Ctrl + C 就能停下。这个键你会用很多次，现在记住最划算。

遇到报错，先别关窗口。报错是机器在努力告诉你它哪里搞不定。 读法是从下往上看：最后一行通常是真正的原因， 上面几行告诉你出事的文件和行号。

最常见的错误用法，是只对 AI 说“它报错了”。 正确的做法是：把完整的一整屏报错复制给它，再补一句“我刚才做的是 XXX”。 这一句话能让 AI 一次修对，而不是猜三轮。

• command not found：这个程序没装，或者不在当前文件夹的查找范围里。
• permission denied：权限不够。不要硬试，把原文交给 AI，让它给对应系统的做法。
• 端口被占用（EADDRINUSE）：上一次的进程还没停。按 Ctrl + C，或换一个端口。

三句话带走

1. 电脑 = 硬盘（仓库）+ 内存（工作台）+ CPU（厨师）；程序从硬盘搬进内存，才真正跑起来。
2. 网络 = 用 IP 找到机器、用端口找到服务、用 DNS 把域名翻译成 IP、用 HTTP/HTTPS 问和答。
3. 本地地址只对你自己有效；数据住在浏览器里就只在这台设备，住在服务器和数据库里才能共享。

自测：三个问题

同事打不开你发的 http://localhost:3000，最可能的原因是什么？

localhost 在每一台电脑上都表示“我自己”。 同事打开这个地址，访问的是他的电脑，而他的电脑上没有你的程序在跑。 要让别人访问，得用局域网地址，或者部署到公网。

刷新后记录消失，和换一台电脑后记录消失，是同一个原因吗？

不一定。刷新就丢，通常说明数据只在内存或页面变量里； 换设备就丢，通常说明数据只存在浏览器的 localStorage 里。 前者连这台设备都留不住，后者只是不跨设备。

Network 面板里一条请求显示 404，说明哪一步出了问题？

请求已经到达服务器，但服务器找不到这个地址或资源。 先检查路径和端口写得对不对；这和“完全没连上”是两类问题， 后者通常显示请求失败或超时，根本没有状态码。

动手 10 分钟

做三件能立刻看到结果的小事：

1. 打开任意网页，按 F12 进 Network 面板，刷新，找到第一条 document 请求，记下状态码和大小。
2. 在地址栏输入 127.0.0.1:3000。如果本地没有服务，你会看到“拒绝连接”——这也是有效观察。
3. 拿一张纸画八格，用自己的话写出一次点击经过的八站。卡住就回看第 5 节。

做完你就能回答：这次访问里，哪几站发生在你的电脑上，哪几站发生在别人的机器上？

如果你看到 X，大概率是 Y

• “无法访问此网站” → 先分清地址是本地、局域网还是公网；localhost 永远只指当前这台电脑。
• “端口被占用”（EADDRINUSE） → 上一次的进程没关。按 Ctrl + C 停掉，或换一个端口再启动。
• 刷新后数据没了 → 数据只在内存或页面变量里，没有写进浏览器存储或数据库。先问“它到底存在哪儿”。