蓝图

为什么要使用蓝图

1. 模块化组织：将应用分解为可重用的模块（组件）。每个蓝图封装了相关的视图、静态文件、模板等。

2. 按功能划分：将大型应用按功能模块划分（例如：用户认证、博客、管理后台），每个功能一个蓝图。

3. 路由分组：将相关联的路由组合在一起，形成逻辑单元，避免所有路由都堆积在主应用文件中。

4. 动态注册：蓝图可以先定义后注册，在应用初始化时再注册到应用实例上，适合工厂模式。

5. 代码复用：同一个蓝图可以在多个Flask应用中使用，实现代码复用。

6. URL前缀管理：注册蓝图时可设置统一URL前缀（如所有用户相关路由都以/user开头）。

7. 独立模板/静态文件：每个蓝图可以有自己的模板目录和静态文件目录。

8. 中间件作用域：蓝图可以有自己的请求钩子（before_request, after_request等），只对自身注册的路由生效。

9. 解决视图命名冲突：不同蓝图可以有相同命名的视图函数（通过蓝图名.函数名区分）。

开始使用

• 基础项目结构

  simple_flask_app/
  ├── app.py          # 主应用文件
  ├── blueprints/
  │   ├── main.py     # 主蓝图
  │   └── user.py     # 用户蓝图
  ├── templates/      # 模板文件
  │   ├── home.html     # 主蓝图页面
  │   └── users.html     # 用户页面

• 创建app.py文件作为项目主入口文件

  from flask import Flask
  from blueprints.main import main_bp
  from blueprints.user import user_bp
  ​
  # 创建Flask应用
  app = Flask(__name__)
  ​
  # 注册蓝图
  app.register_blueprint(main_bp, url_prefix='/')        # 主蓝图使用根路径
  app.register_blueprint(user_bp, url_prefix='/users')    # 用户蓝图使用/users前缀
  ​
  # 运行应用
  if __name__ == '__main__':
      app.run(debug=True, port=5000)

创建蓝图

• 在blueprints文件夹中，创建main.py和user.py文件，用于不同模块的蓝图路由

• main.py

• from flask import Blueprint, render_template
  ​
  # 创建主蓝图
  '''
      第一个参数：'main' (蓝图名称)
      这是蓝图的标识名，必须是唯一的字符串，用于：
      在应用中识别这个特定的蓝图
      在 url_for() 函数中引用该蓝图的端点
      在应用的其他部分访问这个蓝图
  '''
  main_bp = Blueprint('main', __name__)
  ​
  ​
  # 主蓝图的路由
  @main_bp.route('/')
  def home():
      return render_template('home.html')
  ​
  ​
  @main_bp.route('/about')
  def about():
      return "<h1>关于我们</h1><p>这是关于我们的页面</p>"
  ​
  ​
  @main_bp.route('/contact')
  def contact():
      return "<h1>联系我们</h1><p>电话: 123-456-7890</p>"
  ​

• user.py

• from flask import Blueprint, render_template
  ​
  # 创建用户蓝图
  user_bp = Blueprint('user', __name__)
  ​
  ​
  # 用户蓝图的路由
  @user_bp.route('/')
  def user_home():
      return render_template('users.html')
  ​
  ​
  @user_bp.route('/profile')
  def profile():
      return "<h1>用户资料</h1><p>这是用户的个人资料页面</p>"
  ​
  ​
  @user_bp.route('/dashboard')
  def dashboard():
      return "<h1>控制面板</h1><p>用户控制面板内容</p>"

  
  ​

创建视图页面

• 在templates中，创建home.html文件，用于主蓝图的显示和跳转效果的演示

• 下述代码中{{user.xxx}}或者{{main.xxx}}前缀名称是在创建蓝图的时候设置的，main_bp = Blueprint('main', __name__)

• home.html页面

• <!DOCTYPE html>
  <html>
  <head>
      <title>首页</title>
      <style>
          body {
              font-family: Arial, sans-serif;
              margin: 40px;
          }
          nav {
              background: #f0f0f0;
              padding: 10px;
              margin-bottom: 20px;
          }
          nav a {
              margin-right: 15px;
              text-decoration: none;
              color: #333;
          }
      </style>
  </head>
  <body>
      <nav>
          <a href="{{ url_for('main.home') }}">首页</a>
          <a href="{{ url_for('main.about') }}">关于</a>
          <a href="{{ url_for('main.contact') }}">联系</a>
          <a href="{{ url_for('user.user_home') }}">用户主页</a>
          <a href="{{ url_for('user.profile') }}">用户资料</a>
      </nav>
  ​
      <h1>欢迎来到主页</h1>
      <p>这是一个使用 Flask 蓝图的简单示例。</p>
  ​
      <h2>项目结构</h2>
      <ul>
          <li>主蓝图处理网站主要页面</li>
          <li>用户蓝图处理所有用户相关页面</li>
          <li>蓝图使用URL前缀进行分组</li>
      </ul>
  </body>
  </html>

• users.html页面

• <!DOCTYPE html>
  <html>
  <head>
      <title>用户主页</title>
      <style>
          body {
              font-family: Arial, sans-serif;
              margin: 40px;
          }
          nav {
              background: #e0f7fa;
              padding: 10px;
              margin-bottom: 20px;
          }
          nav a {
              margin-right: 15px;
              text-decoration: none;
              color: #00796b;
          }
          .user-section {
              border-left: 4px solid #00796b;
              padding-left: 15px;
              margin-top: 20px;
          }
      </style>
  </head>
  <body>
      <nav>
          <a href="{{ url_for('main.home') }}">返回首页</a>
          <a href="{{ url_for('user.user_home') }}">用户主页</a>
          <a href="{{ url_for('user.profile') }}">用户资料</a>
          <a href="{{ url_for('user.dashboard') }}">控制面板</a>
      </nav>
  ​
      <h1>用户主页</h1>
      <p>这是用户蓝图的首页。</p>
  ​
      <div class="user-section">
          <h2>用户蓝图功能</h2>
          <p>所有用户相关的功能都在此蓝图中实现：</p>
          <ul>
              <li>用户资料管理</li>
              <li>控制面板</li>
              <li>用户设置（待添加）</li>
          </ul>
      </div>
  </body>
  </html>