Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

名词手册

遇到不懂的词?来这里查。按字母和拼音排序,方便找。


A

API(接口)

全称 Application Programming Interface。简单说就是“程序之间说话的方式“。

比如:前端要获取用户信息,就调用后端的 /api/user 接口,后端把数据返回给前端。

API Key(密钥)

一串字符,用来证明“我有权限用这个服务“。

类似于:进小区要刷门禁卡,调用 API 要带上 API Key。


C

Claude Code

Anthropic 公司出的 AI 编程助手,能帮你写代码、改 bug、做测试。

你跟它说人话,它帮你写代码。本教程的核心工具。

Cloudflare

一家提供 CDN、域名管理、SSL 证书的公司。

用它来:管理域名、加速网站访问、提供免费 HTTPS。

CORS(跨域)

全称 Cross-Origin Resource Sharing。浏览器的安全机制。

当前端(www.xxx.com)调用后端(api.xxx.com)时,浏览器会拦截,需要后端配置允许才能访问。

报错长这样:Access to fetch at 'xxx' from origin 'xxx' has been blocked by CORS policy


D

Database(数据库)

存数据的地方。用户信息、文章内容、订单记录,都存在数据库里。

常见的:MySQL、PostgreSQL、MongoDB、SQLite。

Docker

一个打包工具,把代码和运行环境打包在一起,在哪儿都能跑。

类似于:把整个电脑装进箱子,搬到哪儿插上电就能用。


E

ENV / 环境变量

存放配置信息的地方,比如数据库地址、API 密钥。

通常放在 .env 文件里,不会上传到 GitHub(防止泄露)。


F

FastAPI

Python 写的后端框架,用来写 API 接口。

特点:快、简单、自动生成文档。本教程后端用的就是它。

Frontend(前端)

用户能看到的部分:网页、按钮、输入框、动画效果。

技术:HTML、CSS、JavaScript、React、Vue、Next.js 等。


G

Git

代码版本管理工具。能记录代码的每次修改,方便回退和协作。

GitHub

代码托管平台,把代码存在云上。Vercel、Railway 都能从 GitHub 拉取代码自动部署。


H

HTTP / HTTPS

网页传输协议。HTTPS 是加密版,更安全。

现在网站基本都要用 HTTPS,浏览器会提示“不安全“如果没有。


I

IPv4 / IPv6

IP 地址的两种格式。

  • IPv4:192.168.1.1(数字用点分开,快用完了)
  • IPv6:2001:0db8:85a3:0000:0000:8a2e:0370:7334(更长,够用)

Supabase 2024 年开始默认用 IPv6,有些平台连不上,要用 Pooler 连接。


J

JSON

一种数据格式,长这样:

{
  "name": "张三",
  "age": 25
}

前后端传数据基本都用 JSON 格式。


M

MCP(插件)

全称 Model Context Protocol。Claude Code 的插件系统。

装上 MCP 插件,Claude 就能获得新技能。比如装 Playwright MCP,Claude 就能操作浏览器。

Middleware(中间件)

请求到达最终处理之前,经过的“中转站“。

比如:检查用户有没有登录、记录日志、处理跨域,都可以用中间件。


N

Next.js

React 的全栈框架,能写前端也能写后端。

特点:服务端渲染、自动路由、部署方便。本教程前端用的就是它。

npm

Node.js 的包管理器,用来安装 JavaScript 的库。

npm install xxx = 安装 xxx 这个包。


P

Playwright

浏览器自动化工具,能用代码控制浏览器。

用途:自动化测试、爬虫、截图。配合 Claude,让 AI 帮你操作浏览器。

PostgreSQL

一种关系型数据库,开源免费,功能强大。

Supabase 底层用的就是 PostgreSQL。

Pooler(连接池)

数据库连接的“中转站“,复用连接,提高效率。

Supabase 的 Pooler 连接还能解决 IPv6 兼容问题。


R

Railway

后端部署平台,能一键部署 FastAPI、Node.js 等应用,还自带数据库。

特点:免费额度、零配置、支持 Docker。

React

Facebook 出的前端框架,用来构建用户界面。

组件化开发,现在最流行的前端框架之一。


S

SSL / TLS

加密协议,让网站支持 HTTPS。

Cloudflare 提供免费 SSL 证书。

Supabase

开源的 Firebase 替代品,提供数据库、文件存储、用户认证。

特点:免费额度大方、功能全、基于 PostgreSQL。


T

Tailwind CSS

CSS 框架,用类名直接写样式。

<div class="bg-blue-500 text-white p-4 rounded">
  蓝色背景、白色文字、内边距、圆角
</div>

不用写 CSS 文件,直接在 HTML 里加类名。

Terminal(终端)

输入命令的地方,黑底白字那个窗口。

在这里敲命令,让电脑执行各种操作。


U

URL

网址。https://www.example.com/path?query=1

  • https:// 协议
  • www.example.com 域名
  • /path 路径
  • ?query=1 参数

V

Vercel

前端部署平台,Next.js 的亲儿子(同一家公司)。

特点:推送代码自动部署、全球 CDN、免费额度够用。

虚拟环境

Python 的隔离机制,每个项目用自己的依赖,互不干扰。

类似于:给每个项目建一个独立的“小房间“。


常见报错速查

报错关键词可能原因解决方向
CORS跨域问题后端加 CORSMiddleware
404地址不对检查 URL 有没有写错
401没权限检查 API Key 或登录状态
500服务器内部错误看后端日志,找具体报错
Connection refused连不上检查地址、端口、IPv6 问题
Module not found包没装npm installpip install