Python For Kids · 课时

构建简单的 Web 应用

Q: 「构建简单的 Web 应用」这节课中我会学到什么？

使用 Flask 创建您的第一个 Web 应用 你通过在浏览器中直接运行的动手代码来练习 Python For Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Flask 创建您的第一个 Web 应用

构建简单的 Web 应用 是 CoddyKit 上的免费 Python For Kids 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Python For Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Python For Kids 课程共包含 4 节课。

构建一个简单的 Web 应用

现在您已经学习了 Flask 的基础知识，是时候构建一个简单的 Web 应用了。此应用将包含多个路由、HTML 模板以及一些交互功能。

在本课中，我们将逐步创建一个基本的 Web 应用。

第 1 步：设置项目

为项目创建一个新文件夹并初始化虚拟环境：

python -m venv venv

激活虚拟环境并安装 Flask：

pip install flask

# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

第 2 步：创建应用结构

创建以下文件夹和文件：

app.py：主应用文件。
templates/：用于存放 HTML 模板的文件夹。
static/：用于存放 CSS 和图片等静态文件的文件夹。

步骤 3：定义路由

在 app.py 中为主页和 about 页面定义路由：

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

if __name__ == '__main__':
    app.run(debug=True)

第 4 步：添加模板

在 templates/ 文件夹中创建名为 home.html 的 HTML 文件：

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

第 5 步：使用 render_template

更新 home 和 about 路由，使其使用这些模板：

# Using templates
from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

步骤 6：添加静态文件

在 static/ 文件夹中创建 style.css 文件，并在 home.html 中引用它：

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

第 7 步：运行应用

运行您的 Flask 应用：

python app.py

打开浏览器并访问 http://127.0.0.1:5000/，即可查看 Web 应用的运行效果。

构建 Web 应用时的常见错误

以下是需要避免的一些错误：

没有组织好应用结构（例如缺少 templates/ 和 static/ 文件夹）。
对 URL 进行硬编码，而不是使用 url_for()。
没有在调试模式下测试应用。

我们学到了什么？

在本课中，您学习了：

如何设置 Flask 项目结构。
如何定义路由并使用模板。
如何在应用中包含 CSS 等静态文件。
如何运行 Flask 应用并在浏览器中查看它。

做得很好！让我们继续学习下一个主题。

常见问题解答

「构建简单的 Web 应用」课时是免费的吗？

是的 — 「构建简单的 Web 应用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Python For Kids 课程的其余内容，请升级到 CoddyKit PRO。 Python For Kids 课程共包含 4 节课。

「构建简单的 Web 应用」这节课中我会学到什么？

使用 Flask 创建您的第一个 Web 应用你通过在浏览器中直接运行的动手代码来练习 Python For Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Python For Kids 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Python For Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「构建简单的 Web 应用」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Python For Kids 课中编写并运行代码吗？

能。每节 Python For Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Python For Kids