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的源码去解决的。@H_502_31@

页面预览

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

导航+首页

消息页面

用户信息页面

创建话题页面

用户设置页面

以及稍微复杂的详情页面

404 页面

登陆页面

注册页面

文件目录

前端

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

后端

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

大概就是下面这样：
@H_502_31@

前端的数据结构

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

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

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

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

const AppRouter = () => (
  <Router>
    <div>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/page/:pageNum?" exact component={Home}/>
        <Route path="/category/:categorySlug/:pageNum?" exact component={Home}/>
        <Route path="/topics/:id" component={TopicDetail}/>
        <Route path="/user-info/:loginname" component={UserInfo}/>
        <AuthRoute path='/message' component={Message}/>
        <PrivateRoute path="/login" component={Login}/>
        <PrivateRoute path="/register" component={Register}/>
        <AuthRoute path='/create-topic' component={CreateTopic}/>
        <AuthRoute path='/edit-topic/:topicId' component={CreateTopic}/>
        <AuthRoute path='/setting' component={Setting}></AuthRoute>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>
);

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

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

后端的设计

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

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

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

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

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

//如果有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 && errCode === 100) {
    localStorage.removeItem('login_token');
    history.push('/login');
  }
  return Promise.reject(error);
});

3.lodash是个好东西。@H_502_31@

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

总结与源码

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