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，网页运行正常