react-redux-express異步前后端數據交互(面向初學者,高手勿進)

KaltZK 發布于2019-08-19 18:44 / 2708人閱讀

摘要：花了整整三天的時間來解決一個非常非常小的問題想要把一點心得體會記錄下來首先是問題的提出前端如果是后端是如何進行數據的交互總體思路以前接觸的時候前端模板用的是那時候就有些不理解的地方最為不理解的幾個問題是前端和后端怎么配合特別是前端特別復雜的

花了整整三天的時間來解決一個非常非常小的問題.想要把一點心得體會記錄下來.
首先是問題的提出:前端如果是react,后端是express,如何進行數據的交互.

1.總體思路

以前接觸express的時候前端模板用的是ejs,那時候就有些不理解的地方.最為不理解的幾個問題是:前端和后端怎么配合?特別是前端特別復雜的時候,難道還是全用模板嗎?如果前端用了框架呢?這些問題對于大部分開發者或者非初級學習者來說都不算問題,但是對于初學者來說,如果不能完整地知道這些概念和數據流動的方式,學起來就會有些"心虛".

所以在接觸了express和react 之后,我強烈地想知道兩者是怎么進行數據的交互的.我想要的技術棧是:react-redux-webpack-express .在google和github上找了很久都沒有找到合適的,最后才發現,其實官網的那個已經是最好的例子Async.

目前得到的比較好的方式是用異步的方式,通過前端ajax來發出請求,后端接收并處理請求,返回相應的數據(在這里不講述服務器渲染).在這里的ajax如果引入jq會顯得太笨重,所以按照官網的方法用 isomorphic-fetch

而因為引入了redux,所以要把ajax寫在哪里是一個問題. google了一下,發現大家都認為寫在action里面最好(官網也是這么做的),所以就直接這么做吧.(跟著官網沒錯)

下面就以一個非常非常簡單的例子為切入點,功能如下:有一個input和一個button,在input里面輸入,點擊按鈕,把input的內容上傳服務器(POST). 同時下面有一個列表,從服務器上獲取數據并在react中渲染(GET). 非常非常非常簡單.

2.GET方法

把ajax全部寫在action里面, 異步action需要用到中間件. 有關中間件最好的文章我認為是這一篇, 里面講了applyMiddleware 的實現原理和例子(其實有點像俄羅斯套娃,把原本的dispatch慢慢加強,比如可以用logger加一點日志輔助找bug) 這里要用到一個叫做thunk的中間件(實現原理很簡潔,可以自己找來琢磨)

下面的代碼從服務器中獲取列表. 其中的fetch的用法可以看這里, 這里也用到了promise對象用于處理異步事件,這個可以看阮一峰大神的這篇文章.

export const fetchList = () => {
    return dispatch => {
        dispatch({ type:"REQUEST_LIST" })
        return fetch(`/list`, {
            header: {
                "dataType": "json"
            }
        })
            .then(response => {
                return response.json()
            })
            .then(json => {
                dispatch(receiveList(json.items))
            }
        )
    }
}

3.POST方法

POST方法與GET大同小異,不過在server寫代碼的時候要用上body-parser, 不然有可能請求會變成undefined,寫法是這樣的.

具體的代碼如下: POST方法相對復雜一點點.

export const postAddItem = (text) => {
    return dispatch => {
        dispatch({type: "loadAddItem", text})
        fetch("/send", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ item: text })
        }).then(res => {
            if(res.ok) {
                dispatch({ type: "ADD_ITEM", text })
                console.log("POST SUCCESS");
            } 
        }, e => {
            dispatch({type: "loadAddItem", text})
            alert("POST ERROR");
        })
    }
}

這些代碼都是根據官網上Async的代碼改的.
所以要真正掌握redux, 官網文檔和例子要熟讀啊...

4.關于調試

關于調試我沒有什么值得分享的(我也在找比較方便的調試方法TAT,跪求推薦!!), 不過一個這幾天下來總結了"肉眼debug"的思路就是: 看數據怎么流,從哪里開始變得不符合要求.之前在寫的時候就是connect的地方開始有問題,結果死活找不出為什么渲染不出來...明明在logger上看到已經獲取到了數據...

5.總結

個人感覺如果要"打通前后端"(起碼理解吧),一定要認真理解redux,基本概念,異步,中間件(整個官網的內容很豐富,要多讀..) 不過基礎也很重要!最基礎的es6,ajax等一定要會...
自己寫的粗糙的例子代碼在此

(第一次寫文章,本人是小白,有什么說得不對的不好的,感謝提出!)

云服務器 GPU云服務器 webrtc前后端交互 json數據前后交互 js前后臺數據交互 java 前后交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79946.html

零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

JouyPub 2019-08-01 17:53 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

funnyZhang 2019-08-29 13:42 評論0 收藏0
WEB程序的前后端數據交互流程

摘要：說明我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程，其實也就是寫協議相關的一些東西。同樣，相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于腳本來說，就是表示一個數據對象。說明我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程，其實也就是寫http協議相關的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關于這塊的（可能問題并不是...

oysun 2019-06-28 13:45 評論0 收藏0
前端知識庫 - 收藏集 - 掘金

摘要：自適應的橢圓背景知識屬性的基本用法使用樣式畫各種圖形前端掘金下面是一些我在中經常用到的圖案，還有一些是在看到的。像圖手把手教你使用前端掘金使用教程一是什么是目前世界上最先進的分布式版本控制系統。如何在 Vue.js 中使用第三方庫 - 前端 - 掘金在諸多 Vue.js 應用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫....

wall2flower 2019-08-20 17:15 評論0 收藏0
前端知識庫 - 收藏集 - 掘金

摘要：自適應的橢圓背景知識屬性的基本用法使用樣式畫各種圖形前端掘金下面是一些我在中經常用到的圖案，還有一些是在看到的。像圖手把手教你使用前端掘金使用教程一是什么是目前世界上最先進的分布式版本控制系統。如何在 Vue.js 中使用第三方庫 - 前端 - 掘金在諸多 Vue.js 應用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫....

BetaRabbit 2019-08-29 12:46 評論0 收藏0