flask前后端數據通信流程

對於服務器開發工程師來說，

前端頁面的刷新分：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)
    }
}