【Python学习】Web开发项目案例-CSDN博客

本文链接：https://blog.csdn.net/u010225915/article/details/142181818

欢迎来到我的博客，很高兴能够在这里和您见面！欢迎订阅相关专栏：
⭐️ 全网最全IT互联网公司面试宝典：收集整理全网各大IT互联网公司技术、项目、HR面试真题.
⭐️ AIGC时代的创新与未来：详细讲解AIGC的概念、核心技术、应用领域等内容。
⭐️ 大数据平台建设指南：全面讲解从数据采集到数据可视化的整个过程，掌握构建现代化数据平台的核心技术和方法。
⭐️《遇见Python：初识、了解与热恋》：涵盖了Python学习的基础知识、进阶技巧和实际应用案例，帮助读者从零开始逐步掌握Python的各个方面，并最终能够进行项目开发和解决实际问题。
⭐️《MySQL全面指南：从基础到精通》通过丰富的实例和实践经验分享，带领你从数据库的基本操作入手，逐步迈向复杂的应用场景，最终成为数据库领域的专家。
⭐️ 数据治理：通过通俗易懂的文章，学者们不仅能理解数据治理的重要性，还能掌握数据治理的基本原则和最佳实践。

摘要

本篇文章将通过一个实际的 Web 开发项目案例，讲解如何使用 Python 构建一个简单的 Flask 应用。我们将从项目需求、环境设置、后端开发、前端展示到部署上线，涵盖 Web 开发的全流程。文章风趣幽默，内容通俗易懂，并结合代码示例与图表展示，让初学者也能轻松入门 Web 开发，感受到 Python 的魅力。

关键词: Python, Flask, Web开发, 前端后端, 项目案例

1. 引言

你有没有想过，有一天你可以自己搭建一个网站？在朋友面前一边吹牛说“我可是有网站的人”，一边展示你亲手打造的在线项目？这听起来很酷，但其实只需要一些 Python 知识和一点点耐心。今天，我们就用 Flask 这个小而美的 Web 框架，来从零开始构建一个简单的 Web 应用，顺便还会讲些搞笑的开发趣事。

2. 项目背景：要做个网站

我们的项目需求很简单：做一个网站展示公司的产品，用户可以在线留言。虽然需求不复杂，但涵盖了 Web 开发中方方面面的基础知识。通过这个项目，我们将学习如何从一个空白页面，逐步搭建出一个有前端、后端、数据库支持的完整 Web 应用。

3. 环境配置：开发环境也要搞定

首先，工欲善其事，必先利其器。我们需要设置好开发环境，安装 Python、Flask 以及其他依赖包。别担心，过程不会太复杂。

3.1 安装 Python 和 Flask

如果你还没安装 Python，现在可以去Python官网下载安装。接下来，我们用 pip 安装 Flask：

pip install Flask

搞定！Flask 是一个轻量级的 Web 框架，它的核心理念是简单优雅，我们今天的项目就是基于 Flask 来构建的。

3.2 创建项目目录

在你电脑的某个文件夹中，创建一个项目目录，比如叫 flask_project，然后在里面创建一个 Python 文件 app.py。这个文件将是我们的项目入口。

4. 后端开发：Flask 说它能搞定一切

现在，我们要开始写代码了。首先，我们用 Flask 创建一个简单的 Web 应用，只要打开浏览器就能看到一个“Hello, World!”的页面。让我们从这里开始吧。

4.1 最简单的 Flask 应用

在 app.py 文件中编写以下代码：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, World!"

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

这段代码的意思是，当用户访问网站根目录 / 时，服务器会返回一段文本“Hello, World!”。接下来，运行以下命令启动 Flask 服务器：

python app.py

打开浏览器，访问 http://127.0.0.1:5000/，你会看到一个熟悉的 “Hello, World!” 字样。这就意味着我们的 Flask 应用已经成功运行了！

4.2 处理更多请求

接下来，我们要为公司产品页面和留言页面分别创建不同的路由。

@app.route('/products')
def products():
    return "这里是产品页面！"

@app.route('/contact')
def contact():
    return "欢迎留言！"

通过这些简单的函数，我们就能为不同的页面设置不同的内容。每当用户访问 /products 或 /contact，相应的页面内容将会显示。

5. 前端展示：得让它看起来漂亮点

虽然现在我们有了页面，但全是白底黑字，不免有些单调。为了让我们的页面看起来更“体面”，我们需要用 HTML、CSS 来美化前端界面。幸运的是，Flask 允许我们非常轻松地渲染 HTML 模板。

5.1 创建 HTML 模板

首先，创建一个 templates 目录，并在其中创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司网站</title>
</head>
<body>
    <h1>欢迎来到我们的公司网站！</h1>
    <p>我们提供最优质的产品和服务。</p>
</body>
</html>

然后修改 app.py 中的代码，让它返回这个 HTML 页面：

from flask import render_template

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

再次运行应用，刷新浏览器页面，你会看到一个漂亮的网页，里面的内容来自我们刚才编写的 HTML 模板。

5.2 加入 CSS 美化

接下来，我们可以为页面加入 CSS 样式，让它看起来更加专业。在 static 目录下创建一个 style.css 文件，添加以下内容：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}
h1 {
    color: #333;
}

然后在 index.html 中引入这个 CSS 文件：

<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

这下我们的网页看起来是不是漂亮多了？

6. 数据库集成：保存点数据总是好的

留言板需要存储用户提交的数据，因此我们还得集成数据库。这里我们选择 SQLite 作为后端数据库，因为它简单易用，完全胜任这个小项目。

6.1 配置数据库

首先，我们在 app.py 中引入 SQLAlchemy 作为 ORM（对象关系映射）工具：

pip install Flask-SQLAlchemy

然后在代码中配置数据库：

from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
db = SQLAlchemy(app)

6.2 创建留言数据表

接下来，我们创建一个留言表来存储用户留言数据：

class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

    def __repr__(self):
        return f"Message('{self.name}', '{self.content}')"

6.3 用户留言功能

为了让用户可以提交留言，我们需要构建一个简单的表单并处理表单数据：

<form method="POST" action="/contact">
    <input type="text" name="name" placeholder="你的名字">
    <textarea name="content" placeholder="留言内容"></textarea>
    <button type="submit">提交</button>
</form>

然后在 app.py 中处理用户的留言提交：

@app.route('/contact', methods=['POST'])
def contact():
    name = request.form['name']
    content = request.form['content']
    message = Message(name=name, content=content)
    db.session.add(message)
    db.session.commit()
    return "留言已提交！"