Reference

• https://medium.com/%E5%B7%A5%E7%A8%8B%E9%9A%A8%E5%AF%AB%E7%AD%86%E8%A8%98/%E4%BD%BF%E7%94%A8-python-flask-%E5%BB%BA%E7%AB%8B%E7%B6%B2%E7%AB%99-353e449a9bc8

1 MVC架构

在 Flask Boostrap #1 - 安装Flask 透过 @app.route() 建立路由是 flask API 常见的手法，但我们要做的是网页，需要更完整的框架，所以使用 MVC 架构来整理我们的目录。

MVC 框架详细可以自行学习，大家只要知道，MVC 就是把 main.py 里面的东西拆出来，不要让一个 Py 档塞一堆东西，并且把 html、css、Js、程式函数丢到该属于它们的位置，让整个结构看起来更整齐。

把现在的资料夹结构：

+---myweb
|   |   main.py

改成下面的MVC架构，并新增 3 个 Py 档及两个空资料夹 static、templates：

+---myweb
|   |   main.py
|   +---app
|       |   route.py
|       |   __init__.py
|       +---static
|       +---templates

3 个 Py 档修改如下：

• main.py

  from flask import Flask
  from app import create_app
  
  app = create_app()
  
  if __name__ == "__main__":
      app.run(debug=True, port=8000)
  

• route.py

  def hello_world():
      return "Hello, MVC框架!"
  

• __init__.py

  from flask import Flask
  from app.route import hello_world
  
  def create_app():
      app = Flask(__name__)
      app.add_url_rule('/hello_world', 'hello_world', hello_world)
      return app
  

  • add_url_rule 参数说明
    • rule: URL 路径，例如 ‘/hello’。
    • endpoint: 视图函数的名称，可以是字符串，通常与视图函数同名。
    • view_func: 视图函数本身，这里是 hello。

从上面可以看到，我们把原本的 @app.route() 分离出 2 个 Py 档，一个是 __init__.py，建立 url 及 route 关联。一个是 route.py 建立网页的后端函数。

这样就能达到最简单的前后端分离了，重新运行 main.py ，并手动跳转到 /hello_world，网页运行正常