摘要：頁面預(yù)覽頁面主要分為話題列表頁消息頁面?zhèn)€人信息頁面創(chuàng)建話題頁面?zhèn)€人設(shè)置頁面注冊頁面登陸頁面頁面。還有權(quán)限方面的，比如登陸后不可以再進(jìn)入登陸頁面，未登陸也不可以進(jìn)入創(chuàng)建主題頁面。沒有使用，但推介使用，不然性能不好。

線上地址：點(diǎn)擊查看 （訪問會有點(diǎn)慢，至于原因，下面會說明）
前端（主要）：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；
數(shù)據(jù)庫：mongodb;
后端是部署在heroku，線上數(shù)據(jù)庫用的mLab,具體的流程不細(xì)說，總體來說不是很麻煩。至于為什么選擇這兩個(gè)，因?yàn)檫@兩個(gè)都可以免費(fèi)使用...mLab有500m的免費(fèi)使用空間，但訪問及其緩慢及其緩慢及其緩慢，你可以繼續(xù)來感受下什么是絕望，所以我的建議是你可以clone下來在本地跑。數(shù)據(jù)庫的連接是mongodb默認(rèn)的端口,你可以在db文件下更改相應(yīng)的配置。

整體的schema設(shè)計(jì)參考了cnode社區(qū)的，中間碰到的一些問題也是通過看nodeclub的源碼去解決的。

頁面主要分為話題列表頁、消息頁面、個(gè)人信息頁面、創(chuàng)建話題頁面、個(gè)人設(shè)置頁面、注冊頁面、登陸頁面、404頁面。

導(dǎo)航+首頁

消息頁面

用戶信息頁面

創(chuàng)建話題頁面

用戶設(shè)置頁面

以及稍微復(fù)雜的詳情頁面

404頁面

登陸頁面

注冊頁面

使用create-react-app腳手架搭建，actions這些都是自己手動添加：

呃，說實(shí)話后端我不怎么熟悉,啊呸，是基本不會，自己寫了簡單的model+controller+middleware這種，也沒看到什么好的腳手架，寫了大量重復(fù)的代碼...


大概就是下面這樣：

前端用了redux，整個(gè)state結(jié)構(gòu)如下圖：

需要注意的是，react router v4和以前的差別很大，路由參數(shù)這些需要通過類似于下面這樣手動綁定：

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

react router v4取消indexRoute,取而代之的是exact這個(gè)屬性。
還有權(quán)限方面的，比如登陸后不可以再進(jìn)入登陸頁面，未登陸也不可以進(jìn)入創(chuàng)建主題頁面。
整體的路由設(shè)計(jì)：

const AppRouter = () => (
  
    

      
        
        
        
        
        
        
        
        
        
        
        
        
      
    
  
);

值得一提的是v4版本關(guān)于?a=1&&b=2這種不再提供默認(rèn)的解析支持，好像是因?yàn)橛X得這種寫法不規(guī)范，解析的話需要依賴第三方的query-string這個(gè)包。我沒有用，不做分析。我第一次使用v4,中間還是碰到許多坑，不過基本上都能在在網(wǎng)上找到相應(yīng)的介紹和解決方法，推介使用谷歌搜索，關(guān)于官方文檔，有中文的版本文檔。

期間react出了新版本v 16.0.0，我升級了一下，但antd并不能無縫切入到v16,其中部分組件使用直接報(bào)錯(cuò)，所以使用antd的話，不建議升級到最新版本，也有人提了issues，點(diǎn)擊查看。
還有關(guān)于antd同一個(gè)容器多個(gè)form的情況,我在設(shè)置這個(gè)頁面有做處理，我是把表單拆分開的。

hhh，請?jiān)徫倚Τ錾?，對后端的理解基本上只是皮毛，看過一段時(shí)間node和koa，所以我就不做詳細(xì)分析了，怕誤導(dǎo)新人，網(wǎng)上有大量高質(zhì)量的文檔和實(shí)例，我就安安靜靜當(dāng)條咸魚，把自己在開發(fā)中遇到的問題說明一下。

1.關(guān)于async和await，期間碰到一個(gè)問題，我需要根據(jù)評論還是啥數(shù)組id取出每個(gè)id對應(yīng)的評論，我一開始是這樣寫的：

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

我勒個(gè)去，直接報(bào)錯(cuò)，然后我看了下，額，await只能在async下面使用，不能在function下，后面修改成Promise.all()的形式。

2.token的處理，用的是node-jsonwebtoken，看了狼叔的博客RESTFul，介紹的比較詳細(xì)，將整個(gè)流程梳理了一遍。我再大概說一下整體流程吧，用戶登陸，后端通過對賬戶和密碼的驗(yàn)證后，返回給前端一個(gè)token，前端拿到這個(gè)token，保存到本地，后面發(fā)請求時(shí)，通過axios攔截器在所有的請求頭里加上這個(gè)token，后端通過解析能拿到登陸用戶的id。如果token超時(shí)，后端返回個(gè)錯(cuò)誤碼給前端，前端通過攔截器對返回的錯(cuò)誤做判斷，如果是超時(shí)，則跳轉(zhuǎn)到登陸頁面。代碼如下：

//如果有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是個(gè)好東西。

4.呃，貌似也沒其他什么要說明的，大部分都是數(shù)據(jù)庫的增刪查改...后面想到什么再補(bǔ)充吧。

源碼放在了github。
沒有使用immutable.js，但推介使用，不然性能不好。
最新的react v16將prop-types從react中移了出來，個(gè)人感覺react是希望使用Facebook自家的flow去替代。
制作略粗糙，僅供參考。
內(nèi)容就這么多，一些小的細(xì)節(jié)可能沒有提到，自己會繼續(xù)補(bǔ)充內(nèi)容。