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去替代。製做略粗糙，僅供參考。內容就這麼多，一些小的細節可能沒有提到，本身會繼續補充內容。