Flask前后端分离式开发（ajax）-马育民老师

# 概述
前后端分离式开发有很多优点：

1. 前后端解耦
前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）

2. 在大并发情况下，可以同时扩展前后端服务器

3. 减少后端服务器的并发/负载压力。
除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。

4. 即使后端服务超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来

5. nginx支持页面热部署，不用重启服务器，前端升级更无缝

6. 在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。

本节讲解通过flask框架实现分离式开发

# 前后台分离式开发
[![](https://www.malaoshi.top/upload/0/0/1EF40mB1Uvst.png)](https://www.malaoshi.top/upload/0/0/1EF40mB1Uvst.png)

### 简化
[![](https://www.malaoshi.top/upload/0/0/1EF3zz1BfIOt.png)](https://www.malaoshi.top/upload/0/0/1EF3zz1BfIOt.png)

# 查询数据

### flask实现
需要使用flask的jsonify，将python对象转换成json数据格式
```
from flask import jsonify

@app.route('/article_list',methods=['get','post'])
def article_list():
    # l={"code":0,"data":[{"abstract":"为您解读在职场中","title":"领导说“辛苦了”该怎么回？"}]}
    # l={"code":1,"error":201,"msg":"服务器错误"}
    ou=ou2.OracleUtil()
    ret={}
    try:
        ou.setoraclepool(opu)
        ou.getconnectionpool()
        results=ou.queryall('select e.ename,e.sal,e.comm,d.dname   from emp e,dept d where e.deptno=d.deptno')

data=[]
        for item in results:
            d={'ename':item[0],'sal':item[1],'comm':item[2],'dname':item[3]}
            data.append(d)
        
        ret['code']=0
        ret['data']=data
    except:
        ret['code']=1
        ret['msg']='服务器发生错误'
    finally:
        ou.close()

return jsonify(ret)
```

### html代码
需要使用jquery库，向服务器发ajax请求，返回json数据，然后将数据显示到页面上
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='article_list' style="border: 1px solid red"></div>
</body>

}
    });
}
init()
</script>

</html>
```

原文出处：/show_1EF3zz2Bhazu.html