Python Academy · 课时

构建简单网页应用

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

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

使用 Flask 创建您的第一个网页应用

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

构建一个简单的网络应用

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

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

第 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 中，为主页和关于页面定义路由：

# 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/，查看您的网络应用运行效果。

构建网络应用时的常见错误

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

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

我们学到了什么？

在本课中，您学到了：

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

做得很好！让我们进入下一个主题。

常见问题解答

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

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

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

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

学习 Python Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Python Academy