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 = () => (
  <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的状况,我在设置这个页面有作处理，我是把表单拆分开的。

后端的设计

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去替代。制做略粗糙，仅供参考。内容就这么多，一些小的细节可能没有提到，本身会继续补充内容。