成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react-redux-express異步前后端數(shù)據(jù)交互(面向初學(xué)者,高手勿進(jìn))

KaltZK / 2710人閱讀

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

花了整整三天的時(shí)間來(lái)解決一個(gè)非常非常小的問(wèn)題.想要把一點(diǎn)心得體會(huì)記錄下來(lái).
首先是問(wèn)題的提出:前端如果是react,后端是express,如何進(jìn)行數(shù)據(jù)的交互.

1.總體思路

以前接觸express的時(shí)候前端模板用的是ejs,那時(shí)候就有些不理解的地方.最為不理解的幾個(gè)問(wèn)題是:前端和后端怎么配合?特別是前端特別復(fù)雜的時(shí)候,難道還是全用模板嗎?如果前端用了框架呢?這些問(wèn)題對(duì)于大部分開(kāi)發(fā)者或者非初級(jí)學(xué)習(xí)者來(lái)說(shuō)都不算問(wèn)題,但是對(duì)于初學(xué)者來(lái)說(shuō),如果不能完整地知道這些概念和數(shù)據(jù)流動(dòng)的方式,學(xué)起來(lái)就會(huì)有些"心虛".

所以在接觸了express和react 之后,我強(qiáng)烈地想知道兩者是怎么進(jìn)行數(shù)據(jù)的交互的.我想要的技術(shù)棧是:react-redux-webpack-express .在google和github上找了很久都沒(méi)有找到合適的,最后才發(fā)現(xiàn),其實(shí)官網(wǎng)的那個(gè)已經(jīng)是最好的例子Async.

目前得到的比較好的方式是用異步的方式,通過(guò)前端ajax來(lái)發(fā)出請(qǐng)求,后端接收并處理請(qǐng)求,返回相應(yīng)的數(shù)據(jù)(在這里不講述服務(wù)器渲染).在這里的ajax如果引入jq會(huì)顯得太笨重,所以按照官網(wǎng)的方法用 isomorphic-fetch

而因?yàn)橐肓?b>redux,所以要把ajax寫(xiě)在哪里是一個(gè)問(wèn)題. google了一下,發(fā)現(xiàn)大家都認(rèn)為寫(xiě)在action里面最好(官網(wǎng)也是這么做的),所以就直接這么做吧.(跟著官網(wǎng)沒(méi)錯(cuò))

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

2.GET方法

把a(bǔ)jax全部寫(xiě)在action里面, 異步action需要用到中間件. 有關(guān)中間件最好的文章我認(rèn)為是這一篇, 里面講了applyMiddleware 的實(shí)現(xiàn)原理和例子(其實(shí)有點(diǎn)像俄羅斯套娃,把原本的dispatch慢慢加強(qiáng),比如可以用logger加一點(diǎn)日志輔助找bug) 這里要用到一個(gè)叫做thunk的中間件(實(shí)現(xiàn)原理很簡(jiǎn)潔,可以自己找來(lái)琢磨)

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

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大同小異,不過(guò)在server寫(xiě)代碼的時(shí)候要用上body-parser, 不然有可能請(qǐng)求會(huì)變成undefined,寫(xiě)法是這樣的.

具體的代碼如下: POST方法相對(duì)復(fù)雜一點(diǎn)點(diǎn).

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");
        })
    }
}

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

4.關(guān)于調(diào)試

關(guān)于調(diào)試我沒(méi)有什么值得分享的(我也在找比較方便的調(diào)試方法TAT,跪求推薦!!), 不過(guò)一個(gè)這幾天下來(lái)總結(jié)了"肉眼debug"的思路就是: 看數(shù)據(jù)怎么流,從哪里開(kāi)始變得不符合要求.之前在寫(xiě)的時(shí)候就是connect的地方開(kāi)始有問(wèn)題,結(jié)果死活找不出為什么渲染不出來(lái)...明明在logger上看到已經(jīng)獲取到了數(shù)據(jù)...

5.總結(jié)

個(gè)人感覺(jué)如果要"打通前后端"(起碼理解吧),一定要認(rèn)真理解redux,基本概念,異步,中間件(整個(gè)官網(wǎng)的內(nèi)容很豐富,要多讀..) 不過(guò)基礎(chǔ)也很重要!最基礎(chǔ)的es6,ajax等一定要會(huì)...
自己寫(xiě)的粗糙的例子代碼在此

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79946.html

相關(guān)文章

  • 零基礎(chǔ)的前端開(kāi)發(fā)初學(xué)者應(yīng)如何系統(tǒng)地學(xué)習(xí)？

    摘要：在有了基礎(chǔ)之后，進(jìn)一步學(xué)習(xí)內(nèi)容包括框架。前端學(xué)習(xí)交流群禁止閑聊，非喜勿進(jìn)。代碼提交前必須做的三個(gè)事情檢查所有變更跑一邊單元測(cè)試手動(dòng)運(yùn)行一遍所有 網(wǎng)站開(kāi)發(fā)開(kāi)發(fā)大致分為前端和后端，前端主要負(fù)責(zé)實(shí)現(xiàn)視覺(jué)和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。其核心價(jià)值在于對(duì)用戶(hù)體驗(yàn)的追求。可以按如下思路學(xué)習(xí)系統(tǒng)學(xué)習(xí)： 基礎(chǔ)知識(shí)： html + css 這部分建議在?w3school 在線教程上學(xué)習(xí)，邊...

    JouyPub 評(píng)論0 收藏0

  • 零基礎(chǔ)的前端開(kāi)發(fā)初學(xué)者應(yīng)如何系統(tǒng)地學(xué)習(xí)？

    摘要：在有了基礎(chǔ)之后，進(jìn)一步學(xué)習(xí)內(nèi)容包括框架。前端學(xué)習(xí)交流群禁止閑聊，非喜勿進(jìn)。代碼提交前必須做的三個(gè)事情檢查所有變更跑一邊單元測(cè)試手動(dòng)運(yùn)行一遍所有 網(wǎng)站開(kāi)發(fā)開(kāi)發(fā)大致分為前端和后端，前端主要負(fù)責(zé)實(shí)現(xiàn)視覺(jué)和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。其核心價(jià)值在于對(duì)用戶(hù)體驗(yàn)的追求。可以按如下思路學(xué)習(xí)系統(tǒng)學(xué)習(xí)： 基礎(chǔ)知識(shí)： html + css 這部分建議在?w3school 在線教程上學(xué)習(xí)，邊...

    funnyZhang 評(píng)論0 收藏0

  • WEB程序的前后端數(shù)據(jù)交互流程

    摘要：說(shuō)明我寫(xiě)這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫(xiě)協(xié)議相關(guān)的一些東西。同樣，相對(duì)于后端程序來(lái)說(shuō)也無(wú)外乎就是一大堆有一定意義的字符串，而對(duì)于腳本來(lái)說(shuō)，就是表示一個(gè)數(shù)據(jù)對(duì)象。 說(shuō)明 我寫(xiě)這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫(xiě)http協(xié)議相關(guān)的一些東西。而寫(xiě)這篇文章也主要是源于最近和長(zhǎng)久以來(lái)很多人問(wèn)的問(wèn)題都是有關(guān)于這塊的（可能問(wèn)題并不是...

    oysun 評(píng)論0 收藏0

  • 前端知識(shí)庫(kù) - 收藏集 - 掘金

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

    wall2flower 評(píng)論0 收藏0

  • 前端知識(shí)庫(kù) - 收藏集 - 掘金

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

    BetaRabbit 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<