react+koa2实现的技术栈在线地址：点击查看（访问会有点慢，至于原因，下面会说明原因）前端（主要是）：reactv15.6.1，reactrouterv4.2.0，reduxv3.7.2，antdv2。13.0、axiosv0.16.2和处理风格sass；后端（主要）：nodev8.3.0、koa2v2.3.0、koa-routerv7.2.1；数据库：mongodb；backend部署在heroku上，在线数据库mLab，具体过程不详述，总体来说不是很麻烦。至于为什么选择这两个，因为都可以免费使用...mLab有500m的免费空间，但是访问极慢极慢，可以继续感受什么是绝望，所以我的建议是您可以在本地克隆和运行。数据库连接是mongodb的默认端口，你可以在db文件下更改相应的配置。整体schema设计参考了cnode社区，中间遇到的一些问题也通过查看nodeclub的源码解决。页面预览页面主要分为话题列表页面、留言页面、个人信息页面、创建话题页面、个人设置页面、注册页面、登录页面、404页面。导航+首页留言页用户信息页创建主题页用户设置页和稍微复杂一点的详情页404页登录页注册页文件目录说实话，我对后台不是很熟悉啊呸，基本不了解知道。自己写了一个简单的model+controller+middleware，没看到什么好的脚手架。写了很多重复的代码。。。大概下面是这样的：前端数据结构使用redux，整个state结构如下：需要注意的是reactrouterv4和之前的有很大不同，路由参数需要手动绑定如下：exportdefaultwithRouter(connect(mapStateToProps,mapDispatchToProps)(NavBar));reactrouterv4取消了indexRoute，取而代之的是exact的属性。还有权限。例如，登录后无法进入登录页面，未登录则无法进入主题创建页面。整体的路径由设计：constAppRouter=()=>();值得一提的是v4版本有关?a=1&&b=2不再提供默认解析支持。看来这种写法不规范。如果解析的话，我需要依赖第三方的query-string包。我不使用它，也不分析它。第一次使用v4，还是遇到了很多坑，不过基本上在网上都能找到相应的介绍和解决方法。建议使用谷歌搜索。关于官方文档，有中文版的文档。期间react发布了一个新版本v16.0.0，我升级了一下，但是antd不能无缝切入v16，部分组件使用直接报错，所以如果使用antd，不建议升级到最新版本，还有人提问题，点击查看。还有同一个antd容器中有多个表单的情况。我在设置此页面时已经处理过它。我把表格分开了。后端的设计hhh，见笑见谅，对后端的了解基本上只是粗浅的，node和koa看过一段时间，就不做详细分析了，怕误导新人，有网上一大堆高质量的文档和例子，我就静静的做个咸鱼，把自己在开发中遇到的问题说明一下。1、关于async和await，期间遇到了一个问题。我需要根据评论或者数组id提取每个id对应的评论。我一开始是这样写的：constxxx=idList.map(id=>{constresult=awaitfindReplyById(id);//xxxreturnresult;})直接报错，然后我看了一下，呃，await只能在async下使用，不能在function下使用，后来改成了Promise.all()形式。2.token处理使用node-jsonwebtoken。看了狼叔的博客RESTFul，介绍的比较详细，梳理了整个过程。先简单说一下整个过程。用户登录后，后台验证账号密码后返回一个token给前台。前端获取令牌并将其保存在本地。将这个token添加到请求头中，后端可以通过解析得到登录用户的id。如果token超时，后端返回错误码给前端，前端通过拦截器判断返回的错误。如果超时，则跳转到登录页面。代码如下：//如果有token，就放axios.interceptors.request.use(function(config){consttoken=localStorage.getItem('login_token');if(token){config.headers['x-access-token']=token;}returnconfig;},function(error){returnPromise.reject(error);});//处理登录过期axios.interceptors.response.use(function(response){returnresponse;},function(error){const{errCode}=error.response.data;if(errCode===100){localStorage.removeItem('login_token');history.push('/login');}返回Promise.reject(error);});3.lodash是个好东西。4.呃，好像没别的解释了，大部分都是数据库的增删改查……想到什么以后再补充。总结和源码放在github上。不使用Immutable.js，但推荐使用，否则性能不好。最新的Reactv16将prop类型从React中移除。个人感觉react想用facebook自己的flow来代替。制作略显粗糙，仅供参考。内容就这么多，有些小细节可能就不说了，我会继续补充内容。
