react + koa2实现的论坛

摘要：页面预览页面主要分为话题列表页消息页面个人信息页面创建话题页面个人设置页面注册页面登陆页面页面。还有权限方面的，比如登陆后不可以再进入登陆页面，未登陆也不可以进入创建主题页面。没有使用，但推介使用，不然性能不好。

线上地址：点击查看 （访问会有点慢，至于原因，下面会说明）
前端（主要）：reactv15.6.1、react routerv4.2.0、reduxv3.7.2、antdv2.13.0、axiosv0.16.2和处理样式的sass；
后端（主要）：nodev8.3.0、koa2v2.3.0、koa-routerv7.2.1；
数据库：mongodb;
后端是部署在heroku，线上数据库用的mLab,具体的流程不细说，总体来说不是很麻烦。至于为什么选择这两个，因为这两个都可以免费使用...mLab有500m的免费使用空间，但访问及其缓慢及其缓慢及其缓慢，你可以继续来感受下什么是绝望，所以我的建议是你可以clone下来在本地跑。数据库的连接是mongodb默认的端口,你可以在db文件下更改相应的配置。

整体的schema设计参考了cnode社区的，中间碰到的一些问题也是通过看nodeclub的源码去解决的。

页面主要分为话题列表页、消息页面、个人信息页面、创建话题页面、个人设置页面、注册页面、登陆页面、404页面。

导航+首页

消息页面

用户信息页面

创建话题页面

用户设置页面

以及稍微复杂的详情页面

404页面

登陆页面

注册页面

使用create-react-app脚手架搭建，actions这些都是自己手动添加：

呃，说实话后端我不怎么熟悉,啊呸，是基本不会，自己写了简单的model+controller+middleware这种，也没看到什么好的脚手架，写了大量重复的代码...


大概就是下面这样：

前端用了redux，整个state结构如下图：

需要注意的是，react router v4和以前的差别很大，路由参数这些需要通过类似于下面这样手动绑定：

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));

react router v4取消indexRoute,取而代之的是exact这个属性。
还有权限方面的，比如登陆后不可以再进入登陆页面，未登陆也不可以进入创建主题页面。
整体的路由设计：

const AppRouter = () => (
  
    

      
        
        
        
        
        
        
        
        
        
        
        
        
      
    
  
);

值得一提的是v4版本关于?a=1&&b=2这种不再提供默认的解析支持，好像是因为觉得这种写法不规范，解析的话需要依赖第三方的query-string这个包。我没有用，不做分析。我第一次使用v4,中间还是碰到许多坑，不过基本上都能在在网上找到相应的介绍和解决方法，推介使用谷歌搜索，关于官方文档，有中文的版本文档。

期间react出了新版本v 16.0.0，我升级了一下，但antd并不能无缝切入到v16,其中部分组件使用直接报错，所以使用antd的话，不建议升级到最新版本，也有人提了issues，点击查看。
还有关于antd同一个容器多个form的情况,我在设置这个页面有做处理，我是把表单拆分开的。

hhh，请原谅我笑出身，对后端的理解基本上只是皮毛，看过一段时间node和koa，所以我就不做详细分析了，怕误导新人，网上有大量高质量的文档和实例，我就安安静静当条咸鱼，把自己在开发中遇到的问题说明一下。

1.关于async和await，期间碰到一个问题，我需要根据评论还是啥数组id取出每个id对应的评论，我一开始是这样写的：

const xxx = idList.map(id => {
  const result = await findReplyById(id);
  //xxx
  return result;
})

我勒个去，直接报错，然后我看了下，额，await只能在async下面使用，不能在function下，后面修改成Promise.all()的形式。

2.token的处理，用的是node-jsonwebtoken，看了狼叔的博客RESTFul，介绍的比较详细，将整个流程梳理了一遍。我再大概说一下整体流程吧，用户登陆，后端通过对账户和密码的验证后，返回给前端一个token，前端拿到这个token，保存到本地，后面发请求时，通过axios拦截器在所有的请求头里加上这个token，后端通过解析能拿到登陆用户的id。如果token超时，后端返回个错误码给前端，前端通过拦截器对返回的错误做判断，如果是超时，则跳转到登陆页面。代码如下：

//如果有token就在请求头里面带上
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem("login_token");
  if (token) {
    config.headers["x-access-token"] = token;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

//对登陆过期做处理
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  const { errCode } = error.response.data;
  if (errCode === 100) {
    localStorage.removeItem("login_token");
    history.push("/login");
  }
  return Promise.reject(error);
});

3.lodash是个好东西。

4.呃，貌似也没其他什么要说明的，大部分都是数据库的增删查改...后面想到什么再补充吧。

源码放在了github。
没有使用immutable.js，但推介使用，不然性能不好。
最新的react v16将prop-types从react中移了出来，个人感觉react是希望使用Facebook自家的flow去替代。
制作略粗糙，仅供参考。
内容就这么多，一些小的细节可能没有提到，自己会继续补充内容。