add mock

update doc

README.md

@@ -1,39 +1,47 @@
 ## React Boilerplate
+脚手架适合单页应用，
+
 
 ### 开始
 
 1. clone this repo
 2. cd into folder
 3. `npm install`
-4. `npm start`
+4. `npm start` 启动开发服务器
 5. auto open http://yourIP:9000 (not localhost or 127.0.0.1 , for mobile test)
 
+
+### 启动restful测试数据服务器
+`npm start mock` 启动测试数据服务器，数据配置在mock文件夹里，更详细的配置请参考[json-server文档](https://github.com/typicode/json-server)
+
 ### 代码规范检查
 ```
 npm run lint
 ```
 采用eslint对js代码进行检查，配置文件为.eslintrc.json ，可以参考官方文档[eslint](http://eslint.org/)
 
 ### 编译打包
-会在dist文件中输出合并后的js，css文件。
+会在dist文件中输出合并后的js，css，图片，字体等静态资源文件。
 ```
 npm run deploy
 ```
 
 
-### 代理设置
-采用webpack-dev-server作为开发服务器之后，如果需要请求后台人员提供的api接口，那么就会存在跨域的问题，因此需要设置webpack-dev-server的代理服务器，将webpack-dev-server服务器的一个path映射到api服务器。请更改server.js文件中的new WebpackDevServer 第二个参数的proxy属性，示例如下：
+### 设置代理
+`npm start`启动的是webpack-dev-server服务器并进行开发，如果需要请求api进行开发测试，那么就会存在跨域的问题，因此需要设置webpack-dev-server的代理服务器，将webpack-dev-server服务器的一个path映射到api服务器。请更改server.js文件中的new WebpackDevServer 第二个参数的proxy属性，示例如下：
 ```
-// /api/* 会映射 http://example.com:3000/api/* ，如 /api/users 映射 http://example.com:3000/api/users
+// `/api/*` 会映射 http://127.0.0.1:3000/api/* ，如 `/api/todos` 映射 http://127.0.0.1:3000/api/todos
 new WebpackDevServer(webpack(config), {
   proxy : {
     '/api/*' : {
-      target : 'http://example.com:3000'// 
+      target : 'http://127.0.0.1:3000'
     }
   }
   
 })
 ```
+已经内置集成了一个restful测试数据服务器json-server，通过`npm run mock`启动，并从webpack-dev-server指向该服务，通过 `http://yourIP:9000/api` 可以访问，[点击查看json-server文档](https://github.com/typicode/json-server)
+
 关于apiPath的另外一些tips，可以查看 [前后端分离下的前后端交互路径问题](https://github.com/mingzepeng/react-boilerplate/blob/master/doc/apiPath.md)
 
 

package.json

@@ -3,6 +3,13 @@
   "version": "0.1.4",
   "description": "a react boilerplate",
   "main": "main.js",
+  "scripts": {
+    "start": "node ./server.js",
+    "mock": "cd ./mock & json-server --watch db.json --routes routes.json --port 9001",
+    "lint": "eslint ./src",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "deploy": "webpack --config webpack.config.js"
+  },
   "dependencies": {
     "es5-shim": "^4.3.1",
     "es6-promise": "^3.0.2",
@@ -25,6 +32,7 @@
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^1.6.2",
     "imports-loader": "^0.6.5",
+    "json-server": "^0.8.4",
     "opn": "^3.0.3",
     "postcss-filter-gradient": "^0.1.1",
     "postcss-loader": "^0.8.0",
@@ -36,12 +44,6 @@
     "webpack": "^1.12.6",
     "webpack-dev-server": "^1.12.1"
   },
-  "scripts": {
-    "start": "node ./server.js",
-    "lint": "eslint ./src",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "deploy": "webpack --config webpack.config.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/mingzepeng/react-boilerplate.git"

server.js

@@ -4,7 +4,8 @@ var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
 var config = require('./webpack.dev.config');
 var opn = require('opn');
-var ip = localIp.getLocalIP4();
+// var ip = localIp.getLocalIP4();
+var ip = '0.0.0.0';
 var port = 9000;
 
 if (typeof config.entry === 'string') {
@@ -16,27 +17,25 @@ if (typeof config.entry === 'string') {
   }
 }
 
-// console.log('config.entry',config.entry)
 new WebpackDevServer(webpack(config), {
   contentBase: path.resolve(__dirname, './src'),
   hot: true,
   //设置webpack-dev-server启动的时候，bundles的输出的路径，打包的时候这个publicPath没有作用
   publicPath: config.output.publicPath,
-  historyApiFallback: true
+  historyApiFallback: true,
   // /api/* 会指向  http://127.0.0.1:3000/api/*  如  /api/users 就会指向  http://127.0.0.1:3000/api/users
-  // proxy : {
-  //   '/api/*' : {
-  //     target : 'http://127.0.0.1:3000'// 
-  //   }
-  // }
-  //
+  proxy : {
+    '/api/*' : {
+      target : 'http://127.0.0.1:9001'
+    }
+  },
   historyApiFallback: true
-}).listen(port, ip, function (err) {
+}).listen(port, function (err) {
   if (err) {
     console.log(err); //eslint-disable-line no-console
   }else{
-  	opn('http://'+ ip + ':' + port);
-  	console.log('Listening at '+ip+':' + port); //eslint-disable-line no-console
+  	opn('http://127.0.0.1:' + port);
+  	console.log('Listening at http://127.0.0.1:' + port); //eslint-disable-line no-console
   }
 
 });

src/scripts/components/app.js

@@ -3,7 +3,7 @@ export default class App extends React.Component {
 	render() {
 		return (
 			<div className='app'>
-				Hello,please enjoy it
+				Hello,please enjoy it！
 			</div>
 		)
 	}