完全不懂代码,我是怎么一步步把网站搭起来的
- 2026-09-26 06:10:08
"你一个英语老师，怎么会把一个网站做出来？"
每次被问，我都得先解释一句：我不是程序员，学科英语硕士，现在是高中英语老师兼备课组长。写代码这件事，是一边教课一边摸索出来的。
但这个问题背后藏着一个更大的误解——很多人以为"做网站"必须先学完计算机那一整套，学个两三年才能动手。
用了半年时间把 xzjen.cn 从零搭起来之后，我的结论是：反了。
对外行来说，做网站真正需要的技能，比想象中少得多； 但有几样东西必须搞懂，否则永远只能"抄代码改不通"。
这篇文章就讲清楚：一个完全不懂代码的外行，要一步一步把网站搭出来，到底需要哪些技能，哪些又根本不用学。
先说结论：需要的比你想的少得多。
一、先破除三个误解
误解一：得先学完才能开始
不是。我是先做出一个能跑的页面，再回来补知识的。
第一个版本丑得没法看，但它能跑。跑起来之后，我才知道自己需要学什么——这是外行最高效的学习路径，因为每个知识点都有明确的"用处"挂在上面。
反过来，从教材第一章开始学，学到第三章就忘了第一章为什么要学。
误解二：得学会一门语言才行
也不是。我到现在都不敢说自己"精通 Python"。
外行需要的是"能读懂 + 能改对"，不是"能从零写"。就像你能看懂一份英文合同并修改其中条款，不代表你能写出一份原创合同——但前者已经够用了。
误解三：得先搞懂一堆专业词才能动手
恰恰相反。你真正要搞懂的只有一件事——网站的"看得见的一半"和"看不见的一半"怎么配合。而这件事本身特别简单：就是两边约定好"怎么传数据"。
（顺带说一句：前半截行话叫"前端"，后半截叫"后端"。这个词你不知道也完全不影响动手，我做完第一个版本才知道原来还分这个。）
二、第一步：先看懂网站是怎么跑起来的
这是我最想让外行先建立的一个整体认知。
你点开网页
│
▼
┌─────────────┐ ① 请求：我要必修三 Unit 2 的课件
│ 浏览器 │ ─────────────────────────────────────▶ ┌─────────────┐
│ （前端） │ │ 服务器 │
│ │ ◀───────────────────────────────────── │ （后端） │
└─────────────┘ ② 响应：给你，数据在这（JSON） └──────┬──────┘
│
③ 前端拿到数据 → 渲染成页面 → 你看到了 ▼
┌─────────────┐
│ 数据库 │
└─────────────┘
三个角色，一句话讲清：
| 前端 | ||
| 后端 | ||
| 数据库 |
这两半的配合，就是前厅和后厨之间的那张点菜单——顾客点了什么、厨房做成什么样、怎么端出来。这张菜单写清楚了，两边各自干活，互不干扰。
这张"菜单"，行话叫接口。你只要记住：接口 = 两边约定好的一张纸条，上面写着"你要什么、我给你什么"。
三、第二步：搞懂网站的两半怎么配合
我在这里卡了很久。明明前端写好了，后端也写好了，页面就是出不来数据。
后来才明白，问题出在两边没有约定好。
那张"纸条"上要写清四件事
一张纸条，说清楚四件事就够了：
| 地址 | /api/courseware/list | |
| 方法 | ||
| 入参 | grade=高一&book=必修三 | |
| 返回 |
举个我真实踩过的坑：后端返回的字段名是 cover_image，前端写的却是 coverImage。两边都没错，但拼不起来，页面一片空白。
我查了整整一个晚上。
从那以后我养成一个习惯：这张纸条先写下来，两边照着同一份写。后来我干脆让 AI 先生成一份，两边都按它来，几乎没再出现过这类问题。
一条数据完整的旅行路线
以"老师上传一份课件"为例：
① 前端：收集表单（文件 + 标题 + 分类）
↓
② 前端：发 POST 请求 → /api/resource/upload
↓
③ 后端：收到 → 检查登录了吗？文件格式对吗？大小超了吗？
↓
④ 后端：存文件、写数据库记录
↓
⑤ 后端：返回 { "code": 0, "msg": "成功", "id": "xxx" }
↓
⑥ 前端：收到成功 → 提示"上传成功" → 刷新列表
看懂这条线，你就懂了整个网站的 80%。剩下 20% 是细节。
给外行的建议：先亲手完整走通一条这样的链路（比如一个最简单的"提交表单 → 存进去 → 显示出来"），比看十篇教程都管用。
四、第三步：真正需要学的 8 项技能
这是全文的干货。按"不做会卡死"的程度排序。
1. 会看懂报错 ⭐⭐⭐⭐⭐
最重要的一项，没有之一。
报错不可怕，可怕的是看到红色一大坨就关掉。你只需要会做三件事：
找最后一行：错误原因通常在最后 找文件名和行号： File "server.py", line 238—— 直接定位到那一行整段复制给 AI：不用自己理解，AI 解释得比我清楚
我现在的流程：看到报错 → 复制 → 问 AI → 它告诉我改哪一行 → 我改 → 刷新看结果。
这一项练熟，你就已经能解决 80% 的问题了。
2. 请求—响应模型 ⭐⭐⭐⭐⭐
理解一件事：前端和后端是两个独立的程序，它们只通过"请求"说话。
搞懂这个，你就能想明白很多现象：
为什么改了后端代码，页面没变化？（前端没重新请求） 为什么数据明明存进去了，页面看不到？（前端拿的是旧数据） 为什么手机上看到的内容和电脑上不一样？（缓存）
3. 那个"数据长什么样" ⭐⭐⭐⭐⭐
后端传回来的数据长这样，看懂它就行：
{
"code": 0,
"data": [
{ "id": "a1b2", "title": "必修三 Unit 2 阅读课件", "cover": "/uploads/x.jpg" }
]
}
能回答这三个问题就够用：数据在 data 还是别的字段？是个数组还是对象？字段名叫什么（大小写、下划线）？
4. 数据库基础 ⭐⭐⭐⭐
不用学到会写复杂查询，但要懂四个概念：
| 表 | ||
| 字段 | ||
| 记录 | ||
| 主键 |
一个必须建立的意识：改数据库 = 改已经存进去的数据，改错就真没了。我现在的习惯是动数据库之前先备份，这个习惯救过我两次。
5. 前端三件套（能用就行）⭐⭐⭐⭐
| HTML | ||
| CSS | ||
| JavaScript | 能看懂"点一下会触发什么" |
JavaScript 是最值得花时间的一个，因为"两半怎么配合"的逻辑全在这儿：发请求、拿数据、显示出来。
6. 用户与权限 ⭐⭐⭐⭐
只要你的网站有登录，就必须搞懂：
登录状态怎么保持：登录后服务器发一个"凭证"，之后每次请求都带上 权限判断必须在后端做：前端判断"能不能看"只是好看，真正的拦截必须在后端
第二条是安全红线。我做过的设计是：每个用户的数据存在服务器上独立的目录里，从物理上隔离，互相访问不到——这样即使代码写错了，也越不了权。
7. Git（版本管理）⭐⭐⭐
一句话理解：给你的代码拍快照，随时能回退。
为什么外行更需要它？因为我们改代码全靠试，试错了要能退回去。没有 Git，改崩一次就得从头再来。
最小可用：会 提交（存一个快照）、会 回退（崩了退回去）。会这两个就够救命了。
8. 让别人也能打开 ⭐⭐⭐
本地跑通 ≠ 别人能访问。上线要搞懂三件事：
| 服务器 | |
| 域名 | www.xzjen.cn |
| HTTPS |
外行的现实选择：这一块最琐碎，也最容易被劝退。我的建议是卡住就直接问 AI，或者干脆用现成的托管平台，别在环境配置上耗掉热情。
五、外行根本不用学的 4 件事
这部分能帮你省下几百小时。
| 算法与数据结构 | |
| 语言的所有语法 | |
| 框架全家桶 | |
| 底层原理 |
一句话原则：够用到"能上线"就停手，剩下的等真需要再学。
外行最大的风险不是学得少，是学太多、做太少，最后卡在"我还没准备好"里出不来。
六、AI 时代，开发方式真的变了
这点必须单独说，因为它改变了整个学习曲线。
以前：查文档 → 看教程 → 抄代码 → 调半天 → 放弃现在：说清楚要什么 → AI 给一版 → 跑一下 → 报错丢回去 → 改好
但有个前提很多人没意识到：
AI 能写代码，但它不知道你想要什么。
所以外行的价值不在"写代码"，而在这三件事：
| 说清楚需求 | |
| 判断做得对不对 | |
| 知道往哪改 |
**这就是"验收能力"**——你不需要会写，但必须会看。
好消息是：这三项能力，老师天然就有。我们天天在做的事就是把模糊的需求讲清楚、判断成品达不达标、指出哪里要改。这和改课件、磨课是一回事。
七、一条可以照着走的路径
| 第 1 周 | |||
| 第 2–3 周 | |||
| 第 1 个月 | |||
| 第 2 个月 | |||
| 第 3 个月 |
贯穿全程的一条原则：每周都要有一个"能跑起来的东西"。
跑不起来就退回到上一个能跑的版本。这是外行能坚持下来的唯一方法。
八、一张自检表
对照看看，你处在哪个阶段：
能答上 5 项，你已经可以做出一个能用的网站了。
最后
回到开头那个问题：一个英语老师，怎么把网站做出来？
我的真实答案是：
不是我学会了编程，是我搞清楚了"要什么"，然后让会写的东西替我写。
这两年我最深的感受是——技术门槛真的在塌。五年前一个外行想做网站，光环境配置就能劝退；现在你只要能说清楚需求、能判断对错、能坚持调试，就做得出来。
而这三件事，恰恰是做老师每天都在练的：
说清楚需求 = 备课写教学目标 判断对不对 = 批改作业、看课堂效果 坚持调试 = 一节课磨五遍
所以如果你也在犹豫要不要开始，我想说的是：
你不需要先成为程序员。你只需要有一个真实的、想解决的问题。
我的问题是"深夜找不到一份能用的课件"。你的问题是什么？
想清楚这个，剩下的，边做边学就行。
如果你是同行、也在捣鼓自己的教学工具，评论区聊聊你卡在哪一步——外行踩的坑往往是一样的，说出来可能就有人能帮你。
我们下期见 ♥
往期推荐
网站：https://www.xzjen.cn ｜ 小红书：小张老师的教学笔记
用心做教学 · 用爱做课件
