Flask前后端分离式开发（ajax）

作者：马育民 • • 阅读：10706

概述

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

  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框架实现分离式开发

前后台分离式开发

简化

查询数据

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>

<script>

function init(){
    $.ajax({
        cache: true,//布尔值，表示浏览器是否缓存被请求页面。默认是 true。
        type: "POST",//请求类型
        url:'/article_list',
        async: true,//是否异步处理，默认是true
        dataType:"json",//预设服务器返回来的数据类型
        error: function(request) {
            alert("Connection error");
        },
        success: function(data) {
            //成功时处理的代码
            alert(JSON.stringify(data))
            if(data.code==0){
                var html=""
                for(var i=0;i<=data.data.length-1;i++){
                    html=html+data.data[i].ename+"<br/>"
                }
                alert(html)
                // 将html代码片段显示到id是article_list的div中
                document.getElementById('article_list').innerHTML=html
            }else{
                alert(data.msg)
            }

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

</html>
吉ICP备15003043号