云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

Python Flask 全流程全栈项目实战

jxf315 2024-12-13 14:10:24 教程文章 32 ℃

xia仔ke：chaoxingit.com/4964/

Python Flask 全流程全栈项目实战

引言

随着互联网应用的快速发展，Web 开发变得越来越重要。Python 作为一种易于上手且功能强大的编程语言，在 Web 开发领域中有着广泛的应用。Flask 是一个轻量级的 Web 应用框架，非常适合用来快速构建中小型网站或 API 服务。本文将引导你完成一个基于 Flask 的全栈 Web 应用项目，涵盖从环境搭建到部署的全过程。

环境准备

  1. 安装 Python
  2. 下载并安装最新版本的 Python。
  3. 确认 Python 和 pip 已经正确安装：
  4. bash
  5. 深色版本
python --version
  • pip --version
  • 创建虚拟环境
    • 创建一个新的虚拟环境：
    • bash
    • 深色版本
    python -m venv myenv
  • source myenv/bin/activate
  • 安装 Flask
    • 使用 pip 安装 Flask：
    • bash
    • 深色版本
    1. pip install flask

    项目结构

    创建一个基本的项目目录结构：

    深色版本
    myproject/

    ├── app.py

    ├── static/

    │   ├── css/

    │   │   └── style.css

    │   └── js/

    │       └── main.js

    └── templates/

        ├── base.html

        └── index.html
    • app.py：应用程序的主文件。
    • static/：存放静态文件，如 CSS 和 JavaScript 文件。
    • templates/：存放 HTML 模板文件。

    创建 Flask 应用

    1. 编写基本的 Flask 应用
    2. 在 app.py 中编写如下代码：
    3. python
    4. 深色版本
    from flask import Flask, render_template

    app = Flask(__name__)

    @app.route('/')

    def home():

        return render_template('index.html')

    if __name__ == '__main__':
  • app.run(debug=True)
  • 创建模板文件
  • 在 templates/index.html 中编写如下代码：
    • html

    深色版本

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Flask App</title>

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

    </head>

    <body>

        <h1>Welcome to Flask App</h1>

        <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    </body>
  • </html>
  • 添加静态文件
  • 在 static/css/style.css 中添加样式：
    • css

    深色版本

    body {

        font-family: Arial, sans-serif;

        background-color: #f0f0f0;

    }

    h1 {

        color: #333;

    }

    在 static/js/main.js 中添加 JavaScript 代码：

    javascript

    深色版本

    1. console.log("Hello from JavaScript!");

    运行 Flask 应用

    1. 启动应用
    2. 在命令行中运行 Flask 应用：
    3. bash
    4. 深色版本
    1. python app.py
    2. 访问应用
    3. 打开浏览器，输入 http://127.0.0.1:5000/。

    添加动态内容

    1. 修改 app.py
    2. 添加动态路由和视图函数：
    3. python
    4. 深色版本
    from flask import request

    @app.route('/hello/<name>')

    def hello(name):

        return f'Hello, {name}!'

    @app.route('/form')

    def form():

        return render_template('form.html')

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

    def submit():

        name = request.form['name']
  • return f'Thanks, {name}!'
  • 创建表单页面
    • 在 templates/form.html 中添加表单：
    • html
    • 深色版本
    {% extends "base.html" %}

    {% block content %}

      <h2>Submit your name</h2>

      <form action="{{ url_for('submit') }}" method="post">

          <input type="text" name="name" placeholder="Your name" required>

          <button type="submit">Submit</button>

      </form>
    1. {% endblock %}

    数据持久化

    1. 安装 SQLite
    2. 使用 pip 安装 SQLite：
    3. bash
    4. 深色版本
  • pip install flask-sqlalchemy
  • 配置数据库
    • 在 app.py 中添加数据库配置：
    • python
    • 深色版本
    from flask_sqlalchemy import SQLAlchemy

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

    db = SQLAlchemy(app)

    class User(db.Model):

        id = db.Column(db.Integer, primary_key=True)

        username = db.Column(db.String(20), unique=True, nullable=False)

        def __repr__(self):
  • return f"User('{self.username}')"
  • 创建数据库表
    • 初始化数据库：
    • bash
    • 深色版本
    python

    from app import db
  • db.create_all()
  • 添加用户
    • 在 app.py 中添加用户注册功能：
    • python
    • 深色版本
    @app.route('/register', methods=['GET', 'POST'])

    def register():

        if request.method == 'POST':

            username = request.form['username']

            user = User(username=username)

            db.session.add(user)

            db.session.commit()

            return f'Registered as {username}!'
  • return render_template('register.html')
  • 创建注册页面
    • 在 templates/register.html 中添加注册表单：
    • html
    • 深色版本
    {% extends "base.html" %}

    {% block content %}

      <h2>Register</h2>

      <form action="{{ url_for('register') }}" method="post">

          <input type="text" name="username" placeholder="Username" required>

          <button type="submit">Register</button>

      </form>
    1. {% endblock %}

    部署应用

    1. 选择部署平台
    2. 可以选择 Heroku、AWS、Google Cloud Platform 等云服务提供商。
    3. 容器化应用
    4. 使用 Docker 构建容器镜像：
    5. dockerfile
    6. 深色版本
    FROM python:3.9-slim-buster

    WORKDIR /app

    COPY requirements.txt .

    RUN pip install -r requirements.txt

    COPY . .
  • CMD ["python", "app.py"]
  • 创建 requirements.txt 文件
    • 列出所有依赖包：
    • txt
    • 深色版本
    Flask==2.0.2
  • Flask-SQLAlchemy==2.5.1
  • 部署到 Heroku
    • 安装 Heroku CLI 并登录账户。
    • 创建 Heroku 应用：
    • bash
    • 深色版本
  • heroku create
  • 配置应用：

    • bash

    深色版本

    git init

    git add .

    git commit -m "Initial commit"
  • git push heroku master
  • 查看应用状态
    • 查看部署状态：
    • bash
    • 深色版本
  • heroku logs --tail
  • 访问部署后的应用
    • 获取应用 URL：
    • bash
    • 深色版本
    1. heroku open

    结语

    本教程通过一个完整的 Flask 应用实例，介绍了如何从零开始构建一个具有动态内容和数据持久化功能的 Web 应用，并最终将其部署到云端。这只是一个简单的起点，你可以在此基础上添加更多功能，如用户认证、API 接口等。希望这个实战项目能够帮助你更好地理解和掌握 Flask Web 开发。

    Tags：

    猜你喜欢

    最近发表
    标签列表