总有人私信问我我是零基础一点代码都没碰过真的能做出自己的网站吗还有人会补一句说网上的教程要么太抽象讲半天概念还没看到页面长什么样要么太跳上来就是一堆看不懂的命令跟着敲完也不知道为什么。这篇文章就是写给这些朋友的。我会从“一个网页到底是怎么来的”讲起一路做到技术选型、环境搭建、写出第一个能跑的页面再把它变成带数据、能交互的小网站最后部署到公网让别人访问。整个过程尽量用大白话每个操作都会告诉你这一步是在干什么、为什么要这么干。这个内容适合什么人如果你完全没写过代码想学网站开发但不知道从哪开始或者你学过一点 Python、C 之类的语言但从来没搞清楚这些语言跟网页有什么关系那这篇文章就是给你准备的。看完之后你不会成为资深工程师但你会拥有一个明确的学习路线以及一个实实在在跑起来、能给别人看的网站。1. 先别急着敲代码搞懂一个网站是怎么运转的很多小白最大的误区是以为“会写代码”就等于“会做网站”于是上来就背 HTML 标签、刷 JavaScript 语法学了一个月还在原地打转。我建议你先别碰代码花半小时把网站的运转逻辑搞清楚后面所有的学习都会顺很多。1.1 一次访问背后发生了什么你在浏览器地址栏输入一个网址按下回车到页面显示出来这中间其实经历了一次完整的“请求-响应”过程。你可以把它理解成去餐厅吃饭你浏览器坐下后拿起菜单发起请求服务员服务器把你的需求送到后厨后厨根据菜单上的菜名路由把食材加工成菜品渲染页面然后由服务员端回你桌上返回响应。你看到的网页本质上就是服务器返回给你的一段文本你的浏览器负责把这段文本翻译成你看到的样子。所以一个网站至少由两个部分构成一部分是“看得见的前台”也就是用户直接看到的页面专业叫法叫前端另一部分是“看不见的后台”它负责接收请求、处理数据、把结果返回给浏览器这个叫后端。很多零基础的朋友一开始分不清这两者的区别其实记住一句话就行你在页面上看到的一切内容都是后端算好之后由前端展示出来的。1.2 前端、后端、数据库三者是什么关系既然要做一个完整的网站就必须同时处理这三样东西。前端负责页面的结构和样式简单来说就是 HTML决定页面上有哪些元素、CSS决定这些元素长什么样、JavaScript决定页面上的元素能不能动起来、能不能跟用户交互。你可以把 HTML 理解成搭房子的砖块和承重墙CSS 是墙纸和涂料JavaScript 则是房子里负责通电通水的管线。没有 JavaScript你的页面就是一幅静止的画点按钮没反应、填表单不提交。后端负责真正的逻辑运算。用户注册时密码怎么加密存储用户发了一条评论怎么保存下来这些都不是前端该操心的事前端只是一个界面真正干活的逻辑都在后端代码里。后端有好多语言可以写Java、Python、Go、Node.js 都行选哪个后面细说。数据库负责持久化存储。字面意思就是数据存放的地方。用户信息、帖子内容、订单记录这些不能存在内存里否则服务器一重启数据就全没了。数据库就是把数据持久地写到硬盘上的工具最常见的概念就是“表”你可以把它想象成 Excel 表格一行是一条记录一列是一个字段。只有把这三块都搞清楚你才算是入了网站开发的门。2. 零基础到底该选哪套技术栈“技术栈”这个词听起来很唬人其实就是你做网站要用的那一整套工具的组合。前端三件套 HTML、CSS、JavaScript 是跑不掉的任何网站都绕不开。真正需要纠结的是后端选什么语言。这里我不卖关子直接给结论零基础优先选 Python搭配 Flask 框架入门。2.1 为什么是 Python 加 Flask而不是别的我知道有人会问为什么不直接学 PHP为什么不用 Node.js为什么不上 Java我的回答是好工具的标准是在你能力范围内的工具。不会开车的人上路第一辆车一定不是赛车而是操作简单、容错率高的家用车。Python 的语法本身就是英文单词的组合读起来像半自然语言对没有编程基础的人来说学习成本最低。比如你想定义一个变量存用户名Python 就是username 张三中文式思维就能理解。而 Java、C 这类语言光是一个“类”和“对象”的概念就能劝退一大批新手。框架方面Flask 是出了名的“小而美”。它不强迫你按照固定的项目结构来写想怎么写就怎么写一个文件就能跑起一个网页。相比之下 Django 功能更多学起来也更重等你有感觉了再上完全来得及。Node.js 和 PHP 也不是不行但 Node 的前置概念比较多PHP 也要装环境、配服务器都是额外的心智负担。2.2 你需要装哪些东西各是干什么用的这套技术栈一共需要四样东西Python 解释器负责运行你写的 Python 代码、pipPython 的包管理工具帮你在电脑上安装别人写的现成代码库、虚拟环境给每个项目圈一块独立的空间互不干扰、Flask 框架帮你省掉大量重复工作的后端框架。这几样之间的关系可以类比成你装修一个房间Python 是毛坯房本身pip 是你用来采购家具建材的快递员虚拟环境是你专门给这间房划出来的独立空间Flask 是出厂自带的基础家具——床、沙发、衣柜都有了你不用从打磨木头开始。3. 动手先让你的电脑跑起一个网页理论说了这么多是时候动手了。这一节我会手把手带着你从零搭好环境然后用 Flask 写出你人生第一个真正能访问的网站。每一步都给出完整命令你照着操作就行。3.1 环境安装与项目初始化先去 Python 官网下载对应系统的安装包。这里有个小细节安装时一定要勾选“Add Python to PATH”否则你后面在命令行敲python会提示找不到命令。装完之后打开终端Windows 用 PowerShell 或 CMDmacOS 用 Terminal按顺序执行下面这几条命令# 查看 Python 版本确认安装成功 python --version # 创建一个项目文件夹并进入 mkdir my_site cd my_site # 创建虚拟环境 python -m venv venv # 激活虚拟环境Windows venv\Scripts\activate # 激活虚拟环境macOS / Linux source venv/bin/activate看到命令行前面多了(venv)这几个字就说明虚拟环境已经激活了。里面的venv会创建一个独立的 Python 环境之后安装的包都只放在这个项目里不会污染全局环境也不会互相干扰。很多新手嫌麻烦跳过我这一步结果后面项目越来越多、依赖乱成一锅粥还是得回头补所以我建议你从第一个项目起就养成这个习惯。接着在项目里创建一个文件叫app.py里面写from flask import Flask app Flask(__name__) app.route(/) def index(): return h1我的第一个网站/h1p如果你能看到这行字说明你已经成功了。/p if __name__ __main__: app.run(debugTrue)然后在终端里执行pip install flask python app.py看到终端输出Running on http://127.0.0.1:5000就说明服务器已经启动了。打开浏览器访问这个地址你就能看到自己写的页面。我见过太多学员在这个时刻开始兴奋——原来“做个网站”这件事真的可以这么简单。3.2 理解这个“最小程序”的每一个细节上面这几行代码是不是看起来很简单但我希望你千万别只是复制粘贴完就结束了这里有三个概念你现在就得搞清楚。第一个是app Flask(__name__)。这行代码创建了一个 Flask 应用。__name__是 Python 里的一个特殊变量它的作用是让 Flask 知道你现在在哪个文件里方便它去查找同目录下的模板文件和静态文件。你不用理解得太深只要知道这是一个固定写法每个 Flask 项目都这么写。第二个是app.route(/)。这叫“路由装饰器”它的作用是把一个 URL 地址跟一个函数绑定起来。当用户在浏览器里访问http://127.0.0.1:5000/这个地址时Flask 就会调用下面那个index()函数然后把函数的返回值作为网页内容展示给用户。如果你再加一个app.route(/about)和对应的函数那访问http://127.0.0.1:5000/about就会看到另一个页面。第三个是debugTrue。这个参数有两个作用一是你改了代码之后服务器会自动刷新不用手动重启二是程序出错时浏览器页面上会显示详细的报错信息方便排查。但请注意这个参数只在开发阶段用上线部署时一定要关掉否则任何人访问你的网站都能看到代码报错细节非常危险。4. 给网站装上“皮肤”——模板与前端入门第一版页面只有一个标题和一行文字这显然不够。现在的问题是如果页面都要靠 Python 里的字符串拼接来生成那这个网站写到后面会变成一个灾难。所以 Flask 内置了一套叫 Jinja2 的模板引擎就是专门用来解决这个问题的。4.1 模板引擎的作用把代码和页面分离模板引擎解决的核心痛点是“怎么把数据塞进页面里”。你想象一下如果页面里要展示一个用户列表列表里有多少人不确定你不可能手写 10 行、20 行固定的 HTML而是应该让模板根据数据动态地生成这些行。在项目里新建一个文件夹命名为templates然后在里面创建index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的首页/title /head body h1{{ welcome }}/h1 ul {% for item in items %} li{{ item }}/li {% endfor %} /ul /body /html然后把app.py改成from flask import Flask, render_template app Flask(__name__) app.route(/) def index(): return render_template(index.html, welcome你好欢迎来到我的网站, items[Python, Flask, 网站开发]) if __name__ __main__: app.run(debugTrue)这里{{ welcome }}的意思是“把变量 welcome 的值填到这个位置”{% for %}则是 Python 里 for 循环的模板版本它会遍历items这个列表每循环一次就生成一个li标签。这样你就实现了数据和页面的分离——Python 负责传递数据HTML 负责展示数据。4.2 CSS 美化先别求好看求顺眼很多小白对 CSS 又爱又恨觉得自己的页面怎么调都不好看。这里我给你两个建议。第一不要一开始就幻想做出那种酷炫帅气的官网先把最基本的布局和配色搞定第二遇到任何样式问题可以先借助现成的 CSS 框架例如 Bootstrap快速得到一套统一、干净的样式。要引入 CSS在 templates 里新建一个base.html让你所有的页面都继承它。继承的意义在于网站会有很多页面导航栏、页脚这些部分每个页面都要有如果每个页面都复制粘贴一遍以后改一处要改全部。Flask 的模板继承解决的就是这个问题!-- base.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title{% block title %}我的网站{% endblock %}/title style body { font-family: Arial, sans-serif; margin: 40px auto; max-width: 600px; line-height: 1.6; color: #333; } ul { padding-left: 20px; } li { margin: 5px 0; } /style /head body nav strong我的网站/strong a href/首页/a a href/about关于/a /nav main {% block content %}{% endblock %} /main /body /html{% block content %}是一个“坑位”子模板里写了{% block content %}的内容就会自动填到这个坑位来。这是 Flask 模板系统最核心的一个功能掌握它会帮你少写很多重复代码。5. 让网站“记住”东西——数据库与用户交互静态的几个页面撑不起一个真正的网站。你的用户要注册、要发帖、要留言、要改资料这些数据都要存储下来。这一节我们用最简单的 SQLite 数据库做一个“留言板”功能把前端、后端、数据库全打通。5.1 数据库基础建表、增、查SQLite 是 Python 自带的一个轻量级数据库不需要安装额外服务数据直接存在一个文件里非常适合学习和做小型项目。它的用法跟 Excel 有很强的类比关系一张表就是一个工作表字段就是列标题一行数据就是一条记录。在app.py旁边新建一个文件init_db.pyimport sqlite3 # 连接数据库文件不存在则自动创建 conn sqlite3.connect(data.db) cursor conn.cursor() # 建表messages 表用来存留言 cursor.execute( CREATE TABLE IF NOT EXISTS messages ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL ) ) conn.commit() conn.close() print(数据库初始化完成)执行python init_db.py项目里就会多出一个data.db文件。这是数据库的操作逻辑先连接数据库文件再用 SQL 语言去建表、增删改查最后提交事务并关闭连接。这里用到的 SQL 是“结构化查询语言”是操作关系型数据库的通用语言不用学太多掌握SELECT、INSERT、DELETE、UPDATE这四条命令就能覆盖绝大多数场景。5.2 把留言板功能接进来我们在已有的app.py里加入查询和写入的代码同时把留言板页面渲染出来。重点参考下面这段from flask import Flask, render_template, request, redirect, url_for import sqlite3 app Flask(__name__) def get_db(): conn sqlite3.connect(data.db) return conn app.route(/, methods[GET, POST]) def index(): if request.method POST: # 从表单中取出用户输入的内容 content request.form.get(content, ).strip() if content: conn get_db() conn.execute(INSERT INTO messages (content) VALUES (?), (content,)) conn.commit() conn.close() return redirect(url_for(index)) conn get_db() messages conn.execute(SELECT content FROM messages ORDER BY id DESC).fetchall() conn.close() return render_template(index.html, messagesmessages)同时把templates/index.html里的items部分替换成真正的留言列表并加上一个输入表单。在 HTML 里表单提交需要用methodPOST这跟GET有什么区别简单说GET会把参数直接暴露在 URL 的查询字符串里适合搜素、查看POST把数据放在请求体里适合提交表单、修改数据。这里用 POST 显然更合理。等这一步完成你已经拥有一个“能正常使用”的留言板了。用户输入一句话点击提交页面刷新后就能看到新留言刷新浏览器数据还在——因为数据已经持久化到磁盘上的data.db文件里了。虽然功能简陋但前端、后端、数据库、HTTP 请求与响应整条链路已经完整跑通。6. 把网站发布到公网让所有人都能访问本地能跑只完成了 30% 的旅程。你辛辛苦苦做的网站总不能让朋友每次都在你电脑上看。部署上线是每个新手迟早要过的坎。这里把最核心的步骤和注意事项讲清楚。6.1 部署需要准备什么你需要一台云服务器。市面上的云服务商很多选一台入门配置的 Linux 服务器即可月度成本相当于一顿便饭。部署的基本逻辑是把代码传到服务器上在服务器上装好 Python 环境、装好依赖包让 Flask 应用跑起来再通过 Nginx 把外面的请求转发给你的 Flask 服务。你以为这样就完了还差两步。第一步不能直接用python app.py跑生产服务Flask 自带的服务器是开发用的性能、安全性都不足以面对公网流量。需要换成一个叫作 Gunicorn 的工具来启动应用。第二步用 Nginx 做反向代理相当于给应用加了一层网关它能处理静态文件的高效分发、把请求转发给 Gunicorn、还能做简单的负载均衡。6.2 一个简单可靠的部署流程在服务器上有这么一套组合拳# 安装 Nginx sudo apt update sudo apt install nginx python3-venv python3-pip -y # 把项目文件上传到服务器后进入项目目录 cd my_site # 创建并激活虚拟环境安装依赖 python3 -m venv venv source venv/bin/activate pip install flask gunicorn # 使用 Gunicorn 启动应用 gunicorn -w 2 -b 127.0.0.1:8000 app:app然后修改 Nginx 配置把公网请求转发到本机的 8000 端口。这里核心的配置片段是server { listen 80; server_name your_domain.com; location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }配置改好后执行sudo nginx -t检查语法然后sudo systemctl reload nginx重载配置。如果你的服务器已经绑定了域名或公网 IP现在访问它就能看到你的网站。很多人卡在这一步是因为防火墙没有放开 80 端口记得在云服务商的控制台里确认安全组规则把 HTTP 端口放行。7. 新手最常见的坑我帮你提前踩一遍最后分享几个零基础学员最常遇到、也最容易卡住的问题。每一条都是我亲眼见过的真实翻车现场提前知道能帮你省下大量时间。7.1 端口被占用怎么办python app.py启动时提示address already in use说明 5000 端口被别的进程占了。最简单的处理方案是换一个端口把app.run(debugTrue)改成app.run(debugTrue, port5001)或者在终端里找到占用端口的进程然后把它结束掉。macOS/Linux 用lsof -i :5000Windows 用netstat -ano | findstr :5000按照找到的 PID 去结束进程。7.2 pip 安装依赖太慢国内访问官方 PyPI 源经常龟速甚至超时这很正常。解决方案是换用国内镜像源pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple也可以一劳永逸地把默认源换掉。这不是什么高深操作但能让你少等几分钟心情好很多。7.3 代码改了浏览器没变化这个问题九成是因为浏览器缓存。按一下 Ctrl Shift R 强制刷新或者直接打开一个无痕窗口看效果。如果还不行再看看终端里有没有重新加载的记录——开发模式下debugTrue会自动 reload如果终端没有任何反应说明你根本没有保存文件或者保存的路径不在 Flask 监控的目录里。7.4 数据库文件损坏或表结构变动开发阶段改表结构很常见。SQLite 不像 MySQL 那么重型但如果你改了建表语句旧的数据文件里可能没有新字段运行时会报no such column。最简单的处理方式把data.db文件删掉重新跑一遍init_db.py。开发阶段数据都不重要大胆删就行但生产环境千万别这么干。7.5 中文乱码问题页面显示中文出现乱码大概率是编码问题。HTML 的head里必须有meta charsetUTF-8Python 文件开头最好统一声明编码数据库读写时注意连接代码里可以指定text_factory str。这个小坑不致命但能卡你十分钟。我个人做了这么多年网站开发带过不少零基础的朋友最大的体会是学网站开发最需要的不是天赋而是“动手做”的冲动。网上有海量教程但真正让你进步的是你亲手敲下的每一行代码和你踩过的每一个坑。哪怕你今天的成果只是一个朴素的留言板它也完整走过了从想法、设计、编码到发布的全过程——这才是最重要的第一步。至于后面是学 JavaScript 把页面做活还是学 Django 把后端做强就是水到渠成的事了。
