从0到1！3小时用Flask搭建出能变现的独立网站，这波操作绝了！

摘要：想不想知道为什么别人用业余时间就能搭建出炫酷的个人网站，甚至还能靠它接单赚钱？而你还在为复杂的代码头疼？答案就藏在 Python Flask框架里！别以为建站是程序员的专属，跟着这个教程，你会发现原来搭建一个专业级网站，比想象中简单100倍！

想不想知道为什么别人用业余时间就能搭建出炫酷的个人网站，甚至还能靠它接单赚钱？而你还在为复杂的代码头疼？答案就藏在 Python Flask框架里！别以为建站是程序员的专属，跟着这个教程，你会发现原来搭建一个专业级网站，比想象中简单100倍！

1. 安装Python：一切的开始

如果你还没安装Python，别慌！去Python官方网站（https://www.python.org/downloads/ ），根据你的系统（Windows、Linux或macOS）下载最新版本。安装时记得勾选“Add Python to PATH”（Windows系统），这样在命令行就能直接调用Python，否则后续操作会“迷路”。

2. 创建虚拟环境：你的专属编程小天地

打开终端（Windows用户用命令提示符或PowerShell，Linux和macOS用户用自带终端），输入下面的命令创建一个叫myproject的虚拟环境：

python3 -m venv myproject

这条命令就像在电脑里开辟了一块专属的“编程试验田”，后续安装的所有项目依赖都只会在这个环境里生效，不会干扰其他项目，也避免了不同项目间的依赖冲突。

3. 激活虚拟环境：进入你的编程世界

• Linux/macOS用户：

source myproject/bin/activate

执行完这条命令，你会发现终端命令行最前面的提示变成了(myproject)，这就说明你已经成功进入虚拟环境啦！

• Windows用户：

myproject\Scripts\activate

如果激活成功，命令行提示也会变成(myproject) ，这时候你安装的任何包都只会在这个虚拟环境里“安家”。

4. 安装Flask：引入核心工具

环境搭建好了，是时候请出主角Flask了！在激活的虚拟环境下，输入：

pip install flask

pip是Python的包管理工具，它会自动从网上下载Flask及其所有依赖项，等进度条走完，就可以开始真正的建站之旅了！

在你喜欢的代码编辑器（推荐VS Code，免费又强大）里，新建一个app.py文件。输入下面这段神奇的代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')

def hello_world:

return 'Hello, World!'

if __name__ == '__main__':

app.run(debug=True)

这段代码看似简单，却暗藏玄机：

• from flask import Flask：从Flask库中引入Flask类，这是创建Flask应用的基础。

• app = Flask(__name__)：创建一个Flask应用实例，__name__是Python的内置变量，它能帮助Flask找到模板文件、静态文件等资源的位置。

• @app.route('/')：这是一个装饰器，用来定义路由。意思是当用户访问网站的根路径（也就是http://127.0.0.1:5000/ ）时，就会执行下面的hello_world函数。

• def hello_world: return 'Hello, World!'：这个函数很简单，就是返回一句“Hello, World!”。

• if __name__ == '__main__': app.run(debug=True)：只有当直接运行app.py文件时，才会启动Flask应用，debug=True表示开启调试模式，这样在开发过程中遇到错误，页面上会直接显示详细的错误信息，方便排查问题。

确保你的终端处于虚拟环境激活状态，并且当前目录就是存放app.py的目录，输入：

python app.py

如果一切顺利，你会看到终端输出类似这样的信息：

* Serving Flask app 'app' (lazy loading)

* Environment: production

WARNING: This is a development server. Do not use it in a production deployment.

Use a production WSGI server instead.

* Debug mode: on

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

* Restarting with stat

* Debugger is active!

* Debugger PIN: 123-456-789

这时候赶紧打开浏览器，在地址栏输入http://127.0.0.1:5000/ ，按下回车键，你会看到页面上赫然显示“Hello, World!”。恭喜你，成功迈出了建站的第一步！

一个完整的网站肯定不止一个页面，Flask用路由来区分不同的页面。在app.py里继续添加下面的代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')

def hello_world:

return 'Hello, World!'

@app.route('/about')

def about:

return 'This is the about page.'

@app.route('/contact')

def contact:

return 'Contact us at example@example.com'

if __name__ == '__main__':

app.run(debug=True)

纯文本页面太单调？Flask支持使用Jinja2模板引擎，用HTML、CSS和JavaScript打造出炫酷的页面！

1. 创建模板文件夹

在app.py所在的目录下，新建一个templates文件夹，专门用来存放HTML模板文件。

2. 编写模板文件

• 在templates文件夹里新建index.html，输入以下代码：

Home

Here you can find all kinds of interesting things.

• 再新建about.html，代码如下：

About

About Us

We are a team dedicated to creating amazing websites.

这些HTML代码添加了简单的CSS样式，让页面看起来更美观。

3. 修改app.py使用模板

修改app.py的代码如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def index:

return render_template('index.html')

@app.route('/about')

def about:

return render_template('about.html')

if __name__ == '__main__':

app.run(debug=True)

render_template函数会自动去templates文件夹里查找对应的HTML文件，并把它们渲染到页面上。现在刷新浏览器，就能看到漂亮的页面啦！

很多网站都需要和用户交互，比如收集用户信息，这就需要用到表单。

1. 创建表单模板

在templates文件夹里新建form.html，代码如下：

Form

Email:

这个表单包含了姓名和邮箱两个输入框，用户填写后点击提交按钮，数据会发送到/result这个地址。

2. 在app.py中处理表单

修改app.py代码如下：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/form')

def show_form:

return render_template('form.html')

@app.route('/result', methods=['POST'])

def handle_result:

name = request.form.get('name')

email = request.form.get('email')

return f"Received data: Name - {name}, Email - {email}"

if __name__ == '__main__':

app.run(debug=True)

@app.route('/form')定义了一个路由，访问这个路由会显示表单页面；@app.route('/result', methods=['POST'])定义了处理表单提交数据的路由，methods=['POST']表示这个路由只接收POST请求。request.form.get('name')和request.form.get('email')用来获取用户在表单中填写的数据。

现在，在浏览器访问http://127.0.0.1:5000/form ，填写表单提交后，就能看到处理结果啦！