react-redux-express异步前后端数据交互(面向初学者,高手勿进)

KaltZK 发布于2019-08-19 18:44 / 2676人阅读

摘要：花了整整三天的时间来解决一个非常非常小的问题想要把一点心得体会记录下来首先是问题的提出前端如果是后端是如何进行数据的交互总体思路以前接触的时候前端模板用的是那时候就有些不理解的地方最为不理解的几个问题是前端和后端怎么配合特别是前端特别复杂的

花了整整三天的时间来解决一个非常非常小的问题.想要把一点心得体会记录下来.
首先是问题的提出:前端如果是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 前后交互

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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