用react全家桶+antDesign寫了一個習慣管理專案

鳳囚凰丶發表於2018-06-12

專案github地址

專案初衷

該專案從建立自己第一個習慣開始,每天一簽到,簽到後可以發表這一天的心得體會, 這些心得體會會公佈在社群,其他使用者可以對某一條心得體會進行收藏和評論;旨在通過每天的記錄和不斷的正向反饋,慢慢培養起跟隨自己一生的好習慣;

技術棧

前端

  • react
  • react-redux
  • redux-saga
  • react-router(v4);
  • Ant Design Mobile
  • webpack
  • babel
  • postCss

後端

  • express
  • mongodb

快速開始

假設大家已經安裝好node環境

執行步驟:

一、 download專案到本地;

二、 分別在habit-app-master/serverhabit-app-master/fontEnd輸入命令npm install

三、 在habit-app-master/server目錄下建立如下資料夾或檔案static/uploaddata/log/mongodb.logdata/db

四、 本專案用的是mongodb資料庫,因此需要安裝MongoDB,由於本地是window,因此選擇了window平臺的版本;

  1. 下載並安裝MongoDB後進入bin目錄,建立檔案mongodb-habit.conf,輸入以下配置
    dbpath = 本地絕對路徑\habit-app-master\server\data\db
    logpath = 本地絕對路徑\habit-app-master\server\data\log\mongodb.log
    port=27017
複製程式碼
  1. 在命令列進入bin目錄,輸入mongod -config ./mongodb-habit.conf 回車即開啟資料庫

五、打包前端專案

  1. 進入專案的fontEnd目錄,輸入命令npm run build,稍等片刻打包後的檔案將輸出到habit-app-master/fontEnd/build;
  2. 把打包出來的staticapp.js搬到habit-app-master/server/static;

六、 開啟伺服器

  1. 進入專案的server目錄,輸入命令supervisor ./bin/www即開啟成功;

最後,在瀏覽器開啟http://localhost:3008,如果見到下圖即可

成功介面

相關文章