react-redux-express异步前后端数据交互(面向初学者,高手勿进)
花了整整三天的时间来解决一个非常非常小的问题.想要把一点心得体会记录下来.
首先是问题的提出:前端如果是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
等一定要会...
自己写的粗糙的例子代码在此
(第一次写文章,本人是小白,有什么说得不对的不好的,感谢提出!)
react-redux-express异步前后端数据交互(面向初学者,高手勿进)相关推荐
- 干货 | 万字长文全面解析GraphQL,携程微服务背景下的前后端数据交互方案
作者简介 古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言 随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
- 详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
- 前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
- 前后端数据交互——ajax(原生及jquery)
目录 前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明 前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
- ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
- 前后端数据交互方法 汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值 输出到 Element 的 val ...
- ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理 发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
- 前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码 部署在 前端服务器 1.2 前端代码 在 浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器 请求 后端数据 (后端死数据)----给 ...
- 软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML ...
- 基于axios前后端数据交互
基于axios前后端数据交互 一.get 1.前端 <!DOCTYPE html> <html lang="en"> <head><met ...
最新文章
- oracle如何计算2个坐标的距离,百度地图两个坐标之间的距离计算
- Ogre 2011-11-30
- JavaScript进阶2-学习笔记
- Kali Linux 从入门到精通(八)-主动信息收集
- pointers on c (day 1,chapter3)
- java 死锁_java死锁分析
- vlc插件怎么用 wpf_使用Vlc.DotNet在我的WPF项目中添加vlc的问题。
- for语句嵌套执行顺序_Python基础教程(四):循环语句
- eclipse创建第一个JSP项目
- 用手机打开word图表位置很乱_原来Word还可以自动生成图片和图表目录!
- 【前后端异常】http/https post请求 返回415错误状态码的解决方法
- 产业洞察 | 鸿蒙不会用于手机,网民有点心凉!解密操作系统造得出用不起的魔咒...
- 线性回归——加州房价预测
- #2016京东实习生笔试之生日礼物
- Python-OpenCV按住鼠标左键绘制图形
- 4.3.1 管道翻模
- 最新steam rpgmz dlc有新技能新人物,有兴趣么?
- 【QGIS入门实战精品教程】10.1:QGIS基于DEM数据的地形分析案例教程
- Oracle 19c rac的搭建
- 设置EditText输入的文字全部变成大写或小写方案总结
热门文章
- Atitit.各种 数据类型 ( 树形结构,表形数据 ) 的结构与存储数据库 attilax 总结
- atitit.提升备份文件复制速度(3) ----建立同步删除脚本
- clickhouse性能优化实践
- 灾备行业最全常用术语
- 货币基金新规将出,限制T+0提现及支付额度
- Julia : 又一次 ”协变“ 中招!
- Julia:V0.3.0 正式发布,好消息!
- 浙江大学公共管理学院与阿里云计算有限公司达成战略合作 | 凌云时刻
- 【图像融合】基于matalb四叉树的加权聚焦多聚焦图像融合【含Matlab源码 1818期】
- 【手写数字识别】基于matlab GUI知识库手写数字识别(写字板+图片)【含Matlab源码 1227期】