Meteor + mantra + Reactjs 開發問答系統

Meteor + mantra + Reactjs 開發問答系統

使用最新的Meteor框架 + 用mantra和最流行的前端框架React實現wenda系統.

項目要求

功能模塊	前端設計頁面	功能點說明
用戶模塊	登陸頁面和個人頁面	做溫馨登陸和普通註冊登錄
	用戶用微信登陸並完善信息呢
	登錄之後跳轉到個人頁面並可完善個人信息
	個人頁面顯示我關心的， 我回應的 ，我發表的問題列表
	點擊我關心， 我回應，我發表顯示相應問題列表
	從個人頁面可以進入到其他人的個人頁面
	用戶可發表問題，可對其它問題進行回答，關注
	用戶可對他人對於問題的答案進行點贊
	用戶進行加急問題的獎勵金額提問者自定義
問題模塊	問題列表頁面	問題分爲普通問題和加急問題， 普通問題只顯示問題描述，加急問題提問創建新問題時需要定義問題打賞的金額， 問題發佈後2個小時內問題答案的贊數最多的一位自動獲得此問題的打賞金額
	按標籤分類顯示問題支持問題關鍵字搜索功能， 顯示問題的發佈者頭像，暱稱，問題標籤， 問題描述，發佈時間， 瀏覽量， 回答數，回答者的頭像(無交互)， 加急標籤， 紅包以及紅包金額，提供問題的發起功能
	問題列表頁數據的優化處理
問題詳情頁面	顯示提問者頭像，時間，紅包以及金額， 緊急標籤，問題描述， 問題標籤，多少人幫助過她，多少瀏覽量 ， 多少人關心，回答者的頭像



| | 2. 我來答跳轉到回答頁面， 幫你問提示分享

| | 3. 答案列表， 包括回答者頭像， 暱稱， 回答時間， 點贊數，回答內容，點擊可進入到答案詳情

| | 4. 答案詳情頁可對此答案進行點贊
| 問題編輯頁面 | 1. 可選擇普通問題或者加急問題， 可選問題標籤，可定義加急問題的紅包金額， 問題標題和詳細描述
| 我來答頁面 | 1. 輸入框 ， 可提交問題問題答案
微信支付和紅包模塊 | 需要支付以及紅包頁面 | 1. 微信支付功能
2. 微信紅包功能
後臺模塊 | 後臺頁面 | 1. 可以對所有的問題進行刪除操作

| | 2. 可以對所有的答案進行刪除操作
| |
3. 可以對問題進行搜索功能

| | 4. 所有打賞的記錄(包括打賞的問題， 提問者， 被打賞者，答案贊數，打賞金額)
| | 所有前端頁面的HTML/CSS/JS實現及調整

開發流程

說明

Github傳統的流程。也就是：
* 開發者各自fork項目的repo到自己Github賬戶下
* 每次開發同步到項目的repo然後開發
* push自己的開發分支到自己Github賬戶下面的fork的項目repo
* 發送pull request給項目管理員
* 等待review或者merge

分支規劃

採用git remote add命令給自己本地的開發repo添加分支，我們用一下約定來處理分支的名字
* origin - 直接指向項目的repo
* dev_name - 指向自己fork出來的repo例如我的叫cooloney
* reaction - 指向reaction 原版的repo

具體操作

Fork 項目repo到自己Github賬戶（只需要setup一次）

• 用自己賬戶登錄Github
• 進入wenda項目repo主頁
• 點擊右上角的fork按鈕
• 1分鐘不到，就會在自己的Github項目下面建立一個私有的項目

本地開發的配置（以我的賬戶示例，也只要setup一次）

• 從wenda的項目repo clone最新的代碼

git clone --recursive https://github.com/wangleihd/wenda.git

• 添加自己fork的repo用來發布代碼和發送pull request

cd wenda
git remote add youname https://github.com/youname/wenda.git
git fetch youname
git fetch origin
git checkout -b develop origin/develop (create a new branch for development)
git reset --hard origin/develop (reset the local branch to latest origin development branch)

開發流程（每次開發都要運行）

git rebase origin/develop (rebase local change onto origin development branch)
do some work ...
git commit changes
git push --force youname develop

發送pull request（每次push都需要）

• 登錄自己repo的Github主頁
• 點擊pull request
• 按照下圖配置好pull request

Package Git使用指南

說明

• 每一個Package也是一個單獨的repo
• 我們只是加入了那些我們需要修改的package，沒有修改的package我們用reaction原版的代碼。
• 請登陸自己的Github賬戶fork相應的package repo到自己的Github賬戶

標準PR流程

以我的賬號dev1爲例，首先需要在master下Fork到自己賬戶下

首次運行，只需要運行一次

git clone https://github.com/dev1/h5.git
git remote add upstream https://github.com/master/h5.git
git checkout -b dev upstream/dev

每次都需要運行

git fetch upstream
git reset --hard upstream/dev

… work

git rebase upstream/dev
git push -f origin master

開發環境

下面我們使用到的開發環境及相關的版本號信息.

• Meteor 1.4
• Mantra
• React 0.15
• semantic-ui
• flow-router

創建項目

首先我的項目創建在github上. 源碼下載地址

使用mantra命令創建wenda項目, 在使用mantra前, 需要安裝mantra.

• 安裝mantra工具

 $ npm install -g mantra-cli

• 創建wenda項目

mantra會調用本地安裝好的meteor進行創建項目, 然後再根據需求對項目進行規範化.

 $ mantra create wenda

刪除沒用的包

• 刪除meteor自帶的包.

 $ meteor remove insecure

• 刪除默認的CSS

 $ meteor remove standard-minifier-css

• 刪除自動發佈包, 這是測時使用, 實際開發的時候推薦使用, 他會把server的代碼都發給client端.

 $ meteor remove autopublish

安裝 React

 $ meteor npm install --save react react-dom
 $ meteor npm install --save react-mounter

安裝 semantic ui

 $ meteor add semantic:ui juliancwirko:postcss less jquery

安裝 facebook包

 $ meteor add accounts-facebook

安裝 flow-router

安裝命令:

 $ meteor add kadira:flow-router    
 $ meteor add kadira:dochead

需要在 package.json 加入:

{
  "devDependencies": {
    "autoprefixer": "^6.3.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}

然後再執行:

 $ meteor npm install

• 需要執行下面的兩步驟:

  1. 必須在項目中的client/lib/semantic-ui/目錄下創建一個新的空文件custom.semantic.json, 注意需要特別提示不要改更目錄名和文件名, 因爲Meteor的規定. 然後執行 meteor.

參考下面的命令:

 $ pwd
 ~/wenda
 $ touch  client/lib/semantic-ui/custom.semantic.json
 $ meteor

1. 然後meteor啓動後, 會再client/lib/semantic-ui/目錄下自動創建一個.custom.semantic.json的隱藏文件, 需要先把meteor停掉. 然後刪除這個meteor自動生成的文件.再重新啓動meteor. 會再client/lib/semantic-ui/目錄下創建出semantic-ui相應的文件. 如果

參考下在的命令:

 $ 按鍵盤上的 ctrl + c 停止 meteor.
 $ rm client/lib/semantic-ui/.custom.semantic.json
 $ meteor

• 使用時需要用className.

參考

• semantic 官網
• semantic 中文
• React 官網
• React 中文
• Meteor 官網
• FlowRouter