花了整整三天的时间来解决一个非常非常小的问题.想要把一点心得体会记录下来.
首先是问题的提出:前端如果是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
等一定要会...
自己写的粗糙的例子代码在此
(第一次写文章,本人是小白,有什么说得不对的不好的,感谢提出!)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。