摘要：頁面預覽頁面主要分為話題列表頁消息頁面個人信息頁面創建話題頁面個人設置頁面注冊頁面登陸頁面頁面。還有權限方面的，比如登陸后不可以再進入登陸頁面，未登陸也不可以進入創建主題頁面。沒有使用，但推介使用，不然性能不好。

線上地址：點擊查看 （訪問會有點慢，至于原因，下面會說明）
前端（主要）：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去替代。
制作略粗糙，僅供參考。
內容就這么多，一些小的細節可能沒有提到，自己會繼續補充內容。