基于flask框架前后分离实战

flask介绍
Flask是一个基于MVC设计模式的Web框架,因为设计非常简洁,只有两个依赖:werkzeug WSGI 工具包；jinja2模板引擎因而被称为”微框架”(Micro Framework)
与djiango比较
Flask与DjangoPython的Web框架对比中, Flask与Django是绕不过去的两个,他们分别走向了两个极端-精简与复杂Flask极度精简,仅依赖两个库,单个文件即可启动Web服务;Django则是大而全,内部集成了从ORM到模板引擎到日志处理,开箱即用;
举个栗子：
Flask好比毛坯房，只有最基本的墙体结构，所有的装饰都是需要自己的选择和接入，但是可定制性高
Djiango则是精装修，拎包入住，但是需要替换某个部件则需要大费周折且风格很难融入整体

flask第一个应用
依赖包安装，本人安装依赖及版本参考：Flask1.0.2；MarkupSafe1.0；Werkzeug0.14.1；Jinja22.10。编写第一个flask应用如下：

访问：http://127.0.0.1:8080/，若成功显示hello world，恭喜你完成第一个flask栗子了。
Flask的项目组织(1)

1. 规范项目组织的必要性① 提高代码可读性和可维护性 ② 有利于代码复用 ③ 避免某些因为结构混乱导致问题,如循环引入,配置覆盖等
2. 经典的Web项目组织结构① MVC(Model-View-Controller)是最常见的Web项目架构之一，有着非常广泛的应用.Controller即控制器，处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据;View即视图，处理数据显示的部分,通常视图是依据模型数据创建;Model即模型，用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据
   
   Flask的项目组织(2)
   ② Django中的”MTV”
   ViewTemplateModelDjangoMTV模型Model即模型,数据相关的事务,包含数据的结构/存取方式/校验方式和数据间关系等;Template即模板,处理与表现相关的内容即: 如何在页面或其他类型文档中进行显示View即视图,包含存取模型及调取恰当模板的相关逻辑实际上,Django的Controller功能由URLconf实现,它控制View的调用
   
   Flask的项目组织(3)
   ③ 自定义Flask项目的”MVC”模型
   URLconfViewModel自定义Flask“MVC”模型URLconf实现Controller功能,控制View的调用View包含存取模型数据的相关逻辑Model处理与数据相关的事务,包含数据的结构/存取方式/校验方式和数据间关系等因为我们采用前后端分离的方式,实际上后端服务只提供API,不控制页面展示
   
   Flask的项目组织(4)
   ④ 自定义Flask项目的结构
   
   什么是RESTful
   1.RESTful是一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件
   1.1 RESTful规定了数据的元操作对应的HTTP方法GET:获取资源，POST:新建资源，PUT:用来更新资源，DELETE:删除资源
   1.2 RESTful指定了URL的设计原则RESTful的URL应采用动词+ 宾语的设计方式动词即对应上文的HTTP方法,宾语则是资源的名称,为了统一,建议宾语采用复数形式 GET /articles GET /articles/1 POST /articles PUT /articles/1 DELET /articles/1
   1.3 交互数据格式 RESTful推荐使用json作为数据格式
   1.4 无状态与鉴权所有的资源，都可以通过URI定位，而且这个定位与其他资源无关由于RESTful风格的服务是无状态的，认证机制尤为重要推荐使用OAUTH2.0
   Flask-RESTful及相关库
   Flask-RESTful — 提供快速构建REST APIs 的支持
   ① 通过CBV的方式编写API② 通过RequestParser定义请求参数并进行校验 ③ 通过add_resource方法添加路由
3. Flask-marshmallow — 提供对象的序列化/反序列化 ① 通过load方法将参数序列化为Model对象② 通过dump方法将Model对象反序列化3. Flask-sqlalchemy — 提供对SQLAlchemy的支持 ① 通过ORM的方式操作数据库进行CRUD

言归正传，实际的接口怎么玩？鄙人总结了如下几个入门级别的操作步骤：
1、新建蓝图
example： blueprint = Blueprint(“api”, name, url_prefix="/mainApp/api", static_folder="…/…/demoSrvStatic", static_url_path="/static")
api = Api(blueprint)
2、增加路由资源
example:api.add_resource(FoodsViews, “/foods”, “/foods/string:foodId”)
3、资源下创建接口
example:class FoodsViews(Resource):
def get(self, foodId=None):
4、蓝图注册
example:app.register_blueprint(blueprint)
5、启服务
example:if name == “main”:
app = create_app(“config”)
app.run(debug=True)
需求开发一个houseapi,入参（house_id ‘房屋id’, address v ‘屋子地址’,householder‘户主’,），写入到house表保存。
基于flask后端接口开发如下：
model类：

Schema类和自定义字段类型


定义请求参数对象与请求参数校验

实现新增house接口

测试接口：

届时接口开发完毕。没有页面的请求接口总是没有灵魂的。现在就用vue写一个前端页面，直接上效果先

开发vue页面，html部分

开发vue页面，js部分
路由部分