曲靖市网站建设_网站建设公司_安全防护_seo优化
2026/1/16 15:25:32 网站建设 项目流程

Day 52:【99天精通Python】Web 开发入门 (Flask) - 5行代码写个网站

前言

欢迎来到第52天!

在之前的 51 天里,我们写的代码都是在终端里跑的,或者生成一个本地的文件。如果你想让全世界的人都能用到你的程序,最好的办法是什么?
——做一个网站

Python 是 Web 开发领域的巨头之一,拥有 Django 和 Flask 两大框架。

  • Django:全家桶,功能大而全,适合大型企业级项目。
  • Flask:微框架 (Microframework),轻量、灵活,适合中小型项目、API 接口和快速原型开发。

对于初学者,Flask 绝对是入门首选。今天,我们就用几行代码,搭建你的第一个 Web 服务器。

本节内容:

  • 安装 Flask
  • Hello World:最小的 Flask 应用
  • 路由 (Route) 与视图函数
  • 动态路由 (<name>)
  • 渲染 HTML 模板 (render_template)
  • 实战练习:个人名片网页

一、环境准备

pipinstallflask

二、Hello Flask:最小的应用

新建app.py,输入以下代码:

fromflaskimportFlask# 1. 创建应用实例# __name__ 是当前模块的名字,Flask 用它来寻找资源app=Flask(__name__)# 2. 定义路由 (Route)# 告诉 Flask,当用户访问 "/" (根路径) 时,执行下面这个函数@app.route("/")defhello_world():return"<h1>Hello, Flask!</h1>"# 3. 启动服务器if__name__=="__main__":# debug=True: 代码修改后自动重启,且报错时网页显示调试信息app.run(debug=True)

运行:在终端执行python app.py
你会看到输出:Running on http://127.0.0.1:5000
打开浏览器访问这个地址,你就会看到大大的 “Hello, Flask!”。


三、路由与视图函数

路由(URL)就是用户在浏览器地址栏输入的东西。

3.1 多个路由

@app.route("/about")defabout():return"这是关于页面"@app.route("/contact")defcontact():return"请联系我们:mail@example.com"

3.2 动态路由 (Path Variable)

比如我们要显示不同用户的主页,不可能给每个人都写一个@app.route("/user/Tom")
我们可以使用<variable_name>来捕获 URL 中的参数。

# <name> 会作为参数传给 user_profile 函数@app.route("/user/<name>")defuser_profile(name):returnf"欢迎来到{name}的主页!"# 指定类型 (如 int)@app.route("/post/<int:post_id>")defshow_post(post_id):returnf"正在阅读第{post_id}篇文章"

四、渲染模板:让网页漂亮起来

在视图函数里直接返回 HTML 字符串(如return "<h1>...</h1>")太痛苦了。
Flask 使用Jinja2模板引擎,允许我们将 HTML 代码写在单独的文件里,然后用数据去渲染它。

4.1 目录结构

Flask 对目录结构有要求,HTML 文件必须放在templates文件夹下。

my_flask_app/ ├── app.py └── templates/ └── index.html

4.2 编写模板 (templates/index.html)

Jinja2 允许在 HTML 中使用{{ 变量名 }}来占位。

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>我的网站</title></head><body><h1>你好,{{ user }}!</h1><p>今天是:{{ date }}</p><h3>我的技能列表:</h3><ul><!-- 循环 -->{% for skill in skills %}<li>{{ skill }}</li>{% endfor %}</ul><!-- 条件判断 -->{% if is_admin %}<pstyle="color:red">管理员已登录</p>{% endif %}</body></html>

4.3 渲染模板 (app.py)

fromflaskimportFlask,render_templatefromdatetimeimportdatetime app=Flask(__name__)@app.route("/")defindex():# 准备数据username="Python小白"today=datetime.now().strftime("%Y-%m-%d")my_skills=["Python","Pandas","Flask","爬虫"]# render_template 自动去 templates 文件夹找 index.html# 并将后面的参数传进去returnrender_template("index.html",user=username,date=today,skills=my_skills,is_admin=True)if__name__=="__main__":app.run(debug=True)

五、实战练习:个人名片网页

我们要开发一个简单的个人主页,展示头像、简介和联系方式。

1. 准备静态文件
CSS、JS、图片等文件必须放在static文件夹下。

project/ ├── app.py ├── static/ │ ├── style.css │ └── avatar.jpg └── templates/ └── card.html

2. 编写 CSS (static/style.css)

body{font-family:Arial;text-align:center;background-color:#f4f4f4;}.card{background:white;width:300px;margin:50px auto;padding:20px;border-radius:10px;box-shadow:0 4px 8pxrgba(0,0,0,0.1);}img{width:100px;border-radius:50%;}h2{color:#333;}p{color:#666;}

3. 编写 HTML (templates/card.html)

<!DOCTYPEhtml><html><head><!-- 引入静态文件的标准写法: url_for('static', filename='...') --><linkrel="stylesheet"href="{{ url_for('static', filename='style.css') }}"></head><body><divclass="card"><imgsrc="{{ url_for('static', filename='avatar.jpg') }}"alt="Avatar"><h2>{{ name }}</h2><p>{{ job }}</p><p>{{ bio }}</p><hr><p>Email: {{ email }}</p></div></body></html>

4. 编写 Flask (app.py)

fromflaskimportFlask,render_template app=Flask(__name__)@app.route("/")defcard():info={"name":"张三","job":"Python 工程师","bio":"热爱编程,专注于 Web 开发与数据分析。","email":"zhangsan@example.com"}# **info 把字典解包传参 (name="张三", job=...)returnrender_template("card.html",**info)if__name__=="__main__":app.run(debug=True)

六、常见问题

Q1:为什么修改了 HTML,网页没变化?

可能是浏览器缓存。

  • Ctrl + F5强制刷新。
  • 或者在 DevTools (F12) 的 Network 标签页勾选Disable cache

Q2:只能在本机访问,手机怎么看?

默认127.0.0.1只有本机能访问。
修改启动参数:app.run(host='0.0.0.0', debug=True)
然后手机连接同一个 WiFi,访问电脑的局域网 IP(如192.168.1.x:5000)。

Q3:Jinja2 模板里的{% %}{{ }}有什么区别?

  • {{ var }}变量,用于输出值。
  • {% if/for %}控制结构,用于逻辑判断和循环。

七、小结

Flask Web开发

创建应用

路由 Route

模板 Template

Flask(name)

app.run(debug=True)

@app.route('/')

动态参数

render_template

Jinja2 语法 {{ }}

static 静态文件

关键要点

  1. Flask极简,5 行代码就能跑起来。
  2. 路由决定了 URL 怎么映射到 Python 函数。
  3. 模板实现了逻辑(Python)和界面(HTML)的分离。
  4. 静态资源(图片/CSS)放static,HTML 放templates

八、课后作业

  1. 加法计算器:编写两个路由。/显示一个表单(两个输入框和一个提交按钮),提交到/result路由,在/result页面显示两数之和。(提示:需要用到 HTML<form>和下一节课的request对象,可以先尝试 GET 请求?a=1&b=2的方式)。
  2. 随机抽奖页:访问/lottery时,随机从 [“一等奖”, “二等奖”, “谢谢惠顾”] 中抽取一个,并用不同的颜色显示在网页上。
  3. 多页面导航:创建一个包含"首页"、“博客”、"关于"三个页面的网站,并在页面顶部添加导航栏链接,实现互相跳转。

下节预告

Day 53:Flask 进阶 - 表单处理与 Request- 网页不光是用来看的,还能用来提交数据(如登录、注册)。明天我们学习如何处理用户的 POST 请求。


系列导航

  • 上一篇:Day 51 - 数据可视化Seaborn进阶
  • 下一篇:Day 53 - Flask进阶表单处理(待更新)

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询