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