教你用三天時間擼個論壇（react+egg.js包括上線）

引言

論壇系統也是一個很經典的系統了，不少人大學的時候估計也寫過，可是三天就能從開寫到部署上線這是之前怎麼也不敢想的，得益於現代前端工做流和一些優秀開源框架，讓這成爲可能。能很快看到本身寫的東西部署在網上，相信帶來的成就感也是推進不少人持續學習的動力吧。

須要用到的

前端：react、react-redux、antd、axios、stylus

後端：egg.js

數據庫相關：mysql、sequelize

其餘：postman、jwt、Nginx、七牛雲等...

目錄結構

client + service ，前端主要看src下，後端主要看app下

前端

樣式部分

我這裏前端部分沒有采用create-react-app腳手架搭建，是本身用webpack搭建的，對webpack不熟的同窗建議直接用官方腳手架。由於這個項目只用了三天，因此樣式大部分使用antd，種類多，啥組件都有，又好看（強勢安利一波）。

數據管理

數據管理用的是redux，目前來講主要是用戶登陸後的我的信息管理。創建了store文件夾來放置actions和reducers。創建一個全局的store樹，之後哪一個組件須要用戶信息只須要connect一下就能夠直接從store裏面拿數據了。可是修改的話就須要dispatch一個action，這樣就保證了數據的統一性。

數據請求

請求數據用的是axios，先axios.create()建立一個實例，而後在實例上配置了interceptors攔截器，對返回的結果進行攔截處理。

const instance = axios.create({
  xsrfCookieName: 'xsrf-name',
  baseURL: baseDomain
});

instance.interceptors.response.use(function(response) {
  if (response.data.success) {
    return Promise.resolve(response.data)
  } else {
    notification['error']({
      message: response.data.message
    });
    return Promise.reject({
      message: response.data.message
    })
  }
}, function(error) {
  try {
    notification['error']({
      message: error.response.data.message || '系統異常'
    })
    console.log(error.response.status)
    if (error.response.status === 401) {
      setTimeout(() => {
        window.location.href = '/login';
      }, 2000);
    }
  } catch(e) {
    notification['error']({
      message: '系統異常, 請稍後再試！'
    })
  }
  return Promise.reject({
    messageCode: 'sysError'
  })
})
複製代碼

tips: 開發時跨域是經過devserver 轉發請求實現的。

後端

項目搭建直接用官方腳手架egg-init egg-example --type=simple。通常在實際應用中，Controller 通常不會本身產出數據，也不會包含複雜的邏輯，複雜的過程應抽象爲業務邏輯層Service，因此咱們主要的業務邏輯仍是在service裏面完成，而後把結果返回給controller就能夠了。詳細的CRUD就不具體說了，這裏說幾個關鍵點。

context的拓展

框架會把 app/extend/context.js中定義的對象與Context的prototype對象進行合併，在處理請求時會基於擴展後的 prototype 生成 ctx 對象。咱們能夠在這裏得到一些數據，好比說在這裏獲取token裏 解析出的userId，這樣就只需獲取一次，以後能夠用緩存，提高了性能。或者還可已在這裏封裝一些函數，好比把原生的this.staus,this.body一塊兒封裝成一個returnBody。

returnBody (status, message, data = {}) {
    this.status = status;
    this.body = {
      data,
      message,
      success: true
    }
  }
複製代碼

中間件

能夠在middleware裏面寫一些自定義的中間件，好比我這個項目中用到的鑑權中間件。而後在app/config.default.js里加上一行config.middleware = [ 'authorization' ];就可使用了，是否是十分方便呢？

數據庫

數據庫的話咱們能夠採用一些ORM工具來操做。好比sequelize,一款優秀的異步ORM框架，讓咱們能夠用OOP的方式操做數據庫，優雅的生成安全、可維護的SQL代碼。使用的話也是很是的簡單，值得注意的是咱們最好在初始化以前配置一下，讓自動生成的文件都在database目錄下，便於管理。

sequelize開發環境配置：

"development": {
  "username": "root",// mysql帳戶
  "password": "yourpassword",// mysql密碼
  "database": "newbeeForum",// 數據庫名字
  "port": 3306,
  "host": "127.0.0.1",
  "dialect": "mysql"
}
複製代碼

發帖

發帖的圖片是先上傳到七牛雲，而後返回連接，數據庫裏只保存了連接。具體操做能夠參見七牛雲開發者文檔。

JavaScript SDK: developer.qiniu.com/kodo/sdk/12… Node.js SDK: developer.qiniu.com/kodo/sdk/12…

jwt

登陸的話咱們採用jwt來進行跨域身份驗證，登陸成功後會簽發一個token,並把這個token種到cookie裏面，鑑權中間件就是經過這個token來鑑別用戶是否有權限訪問頁面。

簽發token： const token = jwt.sign({ userId: existUser.userId }, this.app.config.jwtSecret, { expiresIn: '7d' });

密碼保存

明文保存用戶密碼是不道德的，因此我採用了crypto來加密保存用戶密碼，登陸的時候也是先將明文密碼加密再與數據庫中比對，相同才容許登陸。

加密保存用戶密碼：user.password = crypto.createHmac('sha256', this.app.config.password_secret) .update(user.password) .digest('hex');

部署上線

部署條件：服務器安裝node 8.0以上版本，安裝mysql，安裝Nginx

個人是騰訊雲的服務器，系統是centos7。前端npm run bulid，把打包後的項目放到服務器上，好比/home/newbeeforum下，而後後端項目npm install --production,這樣就只安裝dependencies的依賴，而後tar -zcvf ../release.tgz,放到服務器上解壓縮後npm start，就能夠運行了。最後在配置一下Nginx的轉發請求就能夠實現跨域了。

轉發請求：

``` 
    //若是隻是host、端口轉換
    location /project {
    proxy_pass   http://127.0.0.1:8080/project;
}
    //若是路徑也變化了，則須要設置cookie的路徑轉換,不然cookie會丟失  
    location /proxy_path {
    proxy_pass   http://127.0.0.1:8080/project;
}
```
複製代碼

tips: 若是react前端部署上去是一片白的話多是路徑的問題，要注意是相對路徑仍是絕對路徑。

最後

• 源碼點我
• 由於只寫了三天，因此目前只實現了登錄註冊，發帖的基本功能，後續能夠慢慢完善
• 部署在我網站上，能夠體驗一下 newbeeforum.newbeelity.cn（註冊驗證碼亂填就行）
• 碼字不易，歡迎star
• 有大佬招前端嗎，目前大四
• over