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 wendagit remote add youname https://github.com/youname/wenda.gitgit fetch younamegit fetch origingit 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 changesgit 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.gitgit remote add upstream https://github.com/master/h5.gitgit checkout -b dev upstream/dev

每次都需要运行

git fetch upstreamgit reset --hard upstream/dev

… work

git rebase upstream/devgit 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