react全家桶-1

全家桶内装有：

• react - github
• react-router - github
• redux - github
• react-redux - github
• react-router-redux - github
• redux-saga - github
• immutable - github
• reselect - github
• antd - github

服务端：

json server 作为工具，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。

npm install json-server -g 

安装完成后可以用 json-server -h 命令检查是否安装成功

1. 新建项目目录reactbox,并初始化

   npm init

2. 新建 mock/ 文件夹，及其下新建db.json
3. 在mock目录下执行

   json-server db.json -w -p 3000

   或者：

   在mock\下再建一个package.json文件，添加{
     "scripts": {
       "mock": "json-server db.json --port 3000"
     }
   }
   在mock\下执行 ： npm run mock

   如果用reactbox下的package.json,配置地址："mock": "json-server mock/db.json --port 3000"在reactbox\下执行 ： npm run mock

   通过地址http://localhost:3000/查看

json server以每个”表”为单位注册一系列标准的RESTFull形式的API接口（路由）,表(.json中的第一级)

操作数据：
1，Get查询：
jQuery.get 或 fecth({method: "get"}) 访问http://localhost:3000/news

2，Post:push一条新数据
$.ajax({
    type: ‘post‘,
    url: ‘http://localhost:3000/news‘,
    data: {
      "id": 11，
        ...
    }
  }
)

3,PUT:对数据进行修改(id为1)
$.ajax({
    type: ‘put‘,
    url: ‘http://localhost:3000/news/1‘,
    data: {
      "title": "aaa",
       ...
    }
  }
)

4，[DELETE] /user/:id #删除 等

json server 也可以使用动态数据

# /mock/db.js

module.exports = function() {
  var data = { users: [] }
  // Create 1000 users
  for (var i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: ‘user‘ + i })
  }
  return data
}
/mock 下运行 json-server db.js -p 3000,可以通过http://localhost:3000/users来访问