react全家桶-服务端与客户端配置

全家桶内装有：

• 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来访问

 客户端

npm i roadhog -g

roadhog 是一个 cli 工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建，并且提供了特别易用的 mock 功能，
安装出错，npm cache clean --force，用管理员权限安装

• 新建/src目录（存放客户端代码），新建/src/index.js （应用的入口文件）

• 新建/public目录（存放项目的静态文件），/public/index.html （页面的入口文件）

  npm i react react-dom react-router-dom -S  //react-router4以上，引入react-router-dom不再引入react-router

• /src/index.js
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  ReactDOM.render((
    <div>Hello React!</div>
  ), document.getElementById('app'));
  
  
  /public/index.html
  
  <div id="app"></div>
  <script src="./index.js"></script>

• roadhog server

　　　

在package.json中配置：
"scripts": { "dev": "roadhog server" }

npm run dev 启动客户端