Rhino

本项目是一个基于 React16.6.3 完成的 boilerplate，整合了目前最新版的react-router路由和mobx状态管理，并通过express作为Web服务器生成模拟数据，具体技术相关的资料可以参见笔者Github Pages撰写的如下三篇文章：

《React 16.6.x 全新全译》

《Flux 数据流两三事儿》

《NodeJS 快速上手指南》

开发环境（Development Environment）

➜  cd rhino
➜  npm install gulp-cli -g
➜  npm install
➜  gulp
➜  Open browser with http://localhost:5001/dev/index.html#/login

编译发布（Release & Build）

1. Update sources/index.html

   Update base url for global ajax connection

2. gulp clean

   remove all of thing within the build & release folder

3. gulp build

   compile source code

4. gulp release

   compress build folder to the release

技术栈（Technology Stack）

• NodeJS 10.13.x
• Webpack 3.11.x
• React 16.4s.x
• Antd 3.6.x
• Mobx 4.3.x

接口定义风格（Restful Strict）

通过URL地址定位服务器提供的资源数据，并使用 HTTP 动词（GET、POST、DELETE、PUT）描述操作。

HTTP 请求方式	操作语义
GET	Query
POST	Save
PUT	Update
DELETE	Remove

GET：https://server.io/user/{{AGE}}，获取年龄为age的用户。

POST：https://server.io/user，保存用户，用户信息通过 HTTP 协议的payload传递。

PUT：https://server.io/user/{{NAME}}，修改名字为name的用户。

DELETE：https://server.io/user/{{ID}}，删除标识为ID的用户。

前后端通信协议（Transfer Protocol）

前后端基于CORS进行数据报文的传输。

头部（Head）

报文头部信息，携带每次 HTTPS 通讯状态相关的信息。

status：字符串类型，全部使用大写英文字母，用来表示服务器端状态代码。

• SUCCESS：Http response success.
• WARNING：Warning infomation.
• TIMEOUT：Login timeout.
• BAD：Bad request.
• NONE：No API founded.
• NONSUPPORT：Request method is not support.
• UNSUPPORT：Unsupported media type.
• EXCEPTION：Server-side exceptions.
• RESUBMIT: Resubmit HTTP request.

token：字符串类型，必选参数（除首次登陆外），权限密钥。

message: 字符串类型，必选参数，当前请求产生的服务器端信息。

total: 整型，可选参数，表达所请求数据在数据库当中的总条数，主要用于分页使用。

消息体（Body）

对象Object或者数组Array类型，用于存放真实可用的业务数据，可以为null值。

模拟数据（Mock Data）

{
  "head": {
    "status": "SUCCESS",
    "message": "Your login has been successful!",
    "total": 1
  },
  "body": {
    "username": "admin",
    "password": "admin"
  }
}