flask前后端数据通信流程

Posted 2021-01-13 doujin

对于服务器开发工程师来说，

前端页面的刷新分：1、后端刷新2、前端刷新

1、后端刷新的实现是通过模板+数据的方式实现的

2、前端刷新是通过jQuery的Ajax +jQuery动态加载html、CSS的方式实现的

 

不管是后端刷新和前端刷新，它们都是需要通过HTTP/HTTPS通信协议，这种协议实现数据通信，使用请求和响应完成一次完整Web通信的过程。

1、后端刷新页面的流程

1.1 实现服务器的API接口文档

1.2 使用Flask实现Web服务器应用程序的构建

1.3 实现前端请求的URL，声明对应的Route（路由），一般情况下，一个URL对应一个路由。（？作用：声明？以后的都是参数，前边的是URL）

1.4 实现对应路由的视图函数，每个视图函数都需要对应一个视图容器（模板），在这个视图函数中进行数据+模板的方式进行服务器的响应。

1.5 实现对应模板，模板是通过jinjia2第三方插件的方式，使用模板语法来实现数据的动态显示。

2、前端刷新页面的流程

原生js实现http请求：

1、创建一个请求对象

2、配置请求

3、发送请求

4、接收请求

实例代码如下：实现一个从前端请求显示国家的请求后端处理发送回前端数据的流程

var xhr = new XMLHttpRequest()
//2、配置请求
xhr.open(‘GET‘,"{% url ‘book:getallcountry‘ %}")
//3.发送请求
xhr.send()
//4.接收请求
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText)
        var json_obj = JSON.parse(xhr.responseText)
        var ul = document.createElement(‘ul‘)
        for (var i = 0;i< json_obj.country.length;i++){
            var item = json_obj.country[i]
            var li = document.createElement(‘li‘)
            var a = document.createElement(‘a‘)
            var a_href ="{% url ‘book:home‘ %}"
            a.innerHTML = "<span>"+item.cname+"</span>"
            //a.setAttribute(‘href‘,a_href)
            a.setAttribute(‘href‘,‘javascript:void(0)‘)
            //.number 是自定义属性 ，一般情况下用来记录状态
            //通过使用 dom 元素对象自身的自定义属性 进行调用
            //只针对当前dom 元素有效
            a.number = item.id
            a.onclick = function(){
                console.log(this.number)
            }
            a.onclick = function(){
                get_author(this.number)
            }
            li.appendChild(a)
            ul.appendChild(li)
        }
        document.querySelector(‘div#country‘).appendChild(ul)
    }else{
        console.log(xhr.status)
    }
}