modify by dk

dk-lan · dk-lan · commit cf9b11839106 · 2017-08-16T17:26:33.000+08:00
diff --git a/component/README.md b/component/README.md
@@ -71,6 +71,7 @@ ReactDOM.render(<Component1 name="Tom" age="18"/>, document.getElementById('div1
 ```
 ### 默认属性(DefaultProps)
 组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
+`getDefalutProps` 这个方法只会被调用一次。
 ```javascript
 //es5
 var React = require('react');
@@ -231,6 +232,7 @@ ReactDOM.render(<Component1/>, document.getElementById('div1'));
 state 可以理解成 props，不一样的在于 props 是只读的，而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树，在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新，从而提升性能。
 在使用 state　前要先初始化 `getInitialState`
 更改 state 一定要用 `setState`
+`getInitialState` 该方法在每次 render 时都会被调用一次。
 ```javascript
 //es5
 var StateComponent = React.createClass({
diff --git a/component/src/lifecycle/README.md b/component/src/lifecycle/README.md
@@ -0,0 +1,24 @@
+//https://segmentfault.com/a/1190000004168886
+# 生命周期
+React 是一个由虚拟 DOM 渲染成真实 DOM 的过程，这个过程称为组件的生命周期。React 把这个周期划分为三个阶段，每个阶段都提供了 will 和 did 两种处理方式，will 是指发生前，did 是指发生后。
+- Mounting：已插入真实 DOM
+    - componentWillMount() 在组件挂载之前调用一次
+    - componentDidMount() 在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。
+- Updating：正在被重新渲染
+    - componentWillUpdate(object nextProps, object nextState) 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
+    - componentDidUpdate(object prevProps, object prevState) 在组件完成更新后立即调用。在初始化时不会被调用。
+- Unmounting：已移出真实 DOM
+    - componentWillUnmount() 在组件从 DOM 中移除的时候立刻被调用。
+    - 这个阶段没有对应的 did 方法
+- componentWillReceiveProps(nextProps) 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
+- shouldComponentUpdate(nextProps, nextState) 组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
+
+## React 实例化的顺序
+1. getDefaultProps
+2. getInitialState
+3. componentWillMount
+4. render
+5. componentDidMount
+
+## componentWillMount
+该方法在首次渲染之前调用，也是再 render 方法调用之前。修改 state 的最后一次机会。
diff --git a/component/src/lifecycle/lifecycle.html b/component/src/lifecycle/lifecycle.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>React-Component-生命周期</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!--React 核心库-->
+        <script src="../../../js/react.js"></script>
+        <!--React 跟 Dom 相关的功能库-->
+        <script src="../../../js/react-dom.js"></script>
+        <!--jsx 转换 js 的框架 babel-->
+        <script src="../../../js/browser.min.js"></script>
+    </head>
+    <body>
+        <fieldset>
+            <legend><h3>componentWillMount</h3></legend>
+            <div id="div1"></div>
+        </fieldset>
+
+        <script type="text/babel">
+            var Button = React.createClass({
+                getInitialState: function() {
+                    return {
+                    data:0
+                    };
+                },
+                setNewNumber: function() {
+                    //reset state
+                    //当 state 发生改变的时候，state 对应的组件会重新挂载
+                    //将 state 绑定到对应的组件
+                    this.setState({data: this.state.data + 1})
+                },
+                render: function () {
+                        var content;
+                        if(this.state.data % 2 == 0){
+                            content = <Content myNumber = {this.state.data}></Content>;
+                        } else {
+                            content = <h3>{this.state.data}</h3>;
+                        }
+                        return (
+                            <div>
+                                <button onClick = {this.setNewNumber}>INCREMENT</button>
+                                {content}
+                            </div>
+                        );
+                    }
+            })
+
+
+            var Content = React.createClass({
+                getInitialState: function(){
+                    console.log('state');
+                    return {
+                    };
+                },
+                getDefaultProps: function(){
+                    console.log('props');
+                    return {};
+                },
+                componentWillMount:function() {
+                    console.log('Component WILL MOUNT!')
+                },
+                componentDidMount:function() {
+                    console.log('Component DID MOUNT!')
+                },
+                componentWillReceiveProps:function(newProps) {
+                    console.log('Component WILL RECEIVE PROPS!')
+                },
+                shouldComponentUpdate:function(newProps, newState) {
+                    return true;
+                },
+                componentWillUpdate:function(nextProps, nextState) {
+                    console.log('准备更新组件');
+                },
+                componentDidUpdate:function(prevProps, prevState) {
+                    console.log('组件已经更新')
+                },
+                componentWillUnmount:function() {
+                    console.log('Component WILL UNMOUNT!')
+                },
+                render: function () {
+                    console.log('render');
+                    return (
+                        <h3>{this.props.myNumber}</h3>
+                    );
+                }
+            });
+        
+            ReactDOM.render(<Button />, document.getElementById('div1'));		
+        </script>
+    </body>
+</html>
diff --git a/reactERP/api/route/Account.js b/reactERP/api/route/Account.js
@@ -21,14 +21,17 @@ module.exports = {
             response.send({state: true});
         })
 
-        app.post("/register", function(request, response){})
+        app.post("/register", function(request, response){
+            console.log(request.body);
+            response.send('ok');
+        })
 
-        app.get('/setSession', function(request, response){
+        app.post('/setSession', function(request, response){
             request.session.username = 'dk';
             response.send(request.session.username)
         })
 
-        app.get('/getSession', function(request, response){
+        app.post('/getSession', function(request, response){
             response.send(request.session.username);
         })
 
diff --git a/reactERP/api/route/Index.js b/reactERP/api/route/Index.js
@@ -1,10 +1,21 @@
 var Account = require('./Account');
+var Product = require('./Product')
 
 module.exports = {
     Register: function(express){
         var app = express();
-        
+        app.all('*', function(req, res, next) {
+            res.header("Access-Control-Allow-Origin", "*");
+            res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
+            res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
+            if(req.method=="OPTIONS") {
+                res.send(200);/*让options请求快速返回*/
+            } else{
+                next();
+            }
+        });        
         Account.Register(app);
+        Product.Register(app);
 
         app.listen(888);
     }
diff --git a/reactERP/api/route/Product.js b/reactERP/api/route/Product.js
@@ -0,0 +1,11 @@
+var bodyParser = require('body-parser');
+
+var urlencodeParser = bodyParser.urlencoded();
+module.exports = {
+    Register: function(app){
+        app.get('/pro/fetchAllProducts', function(request, response){
+            response.send({name: '娃哈哈1号 15ml', price: '10.22'});
+            //请求数据库 根据商品条形码找到对应商品
+        })
+    }
+}
diff --git a/reactERP/web/package.json b/reactERP/web/package.json
@@ -23,6 +23,7 @@
     "node-sass": "^4.5.0",
     "progress-bar-webpack-plugin": "^1.9.3",
     "react": "^15.5.4",
+    "react-addons-update": "^15.6.0",
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.5",
     "react-router": "^3.0.2",
diff --git a/reactERP/web/src/app.js b/reactERP/web/src/app.js
@@ -4,23 +4,13 @@ import './libs/font-awesome/css/font-awesome.min.css'
 import React from 'react';
 import ReactDOM from 'react-dom';
 import LoginComponent from './modules/login/LoginComponent';
-import {Provider} from 'react-redux'
-import {createStore, applyMiddleware} from 'redux';
-import thunkMiddleware from 'redux-thunk'
-import LoginReducer from './modules/login/LoginReducer';
-import {ajaxMiddleware} from './utils/ajaxMiddleware';
-import { routerMiddleware } from 'react-router-redux';
-import {Router, Route, hashHistory, browserHistory} from 'react-router'
-
-// const middleware = applyMiddleware(thunk, ajaxMiddleware);
-    // let middleware = applyMiddleware(thunk, ajaxMiddleware, routerMiddleware(browserHistory))
-
-    const store = createStore(LoginReducer, {}, applyMiddleware(thunkMiddleware, ajaxMiddleware))
-// const store = createStore(LoginReducer);
+import OrderComponent from './modules/order/orderComponent';
+import {Provider} from 'react-redux';
+import store from './redux/configStore';
 
 ReactDOM.render(
     <Provider store={store}>
-        <LoginComponent/>
+        <OrderComponent/>
     </Provider>, 
     document.getElementById('app')
 );
diff --git a/reactERP/web/src/modules/login/LoginAction.js b/reactERP/web/src/modules/login/LoginAction.js
@@ -1,8 +1,16 @@
+import * as LoginConstants from './LoginConstants';
+
 export function login(username, password){
     return {
         types: ['a', 'b', 'c'],
-        path: 'login',
-        method: 'post',
+        path: 'pro/fetchAllProducts',
+        method: 'get',
         query: {username, password}
     }
+}
+
+export function getCode(){
+    return {
+        types: ['getCode1', 'getCode2', 'getCode3']
+    }
 }
diff --git a/reactERP/web/src/modules/login/LoginComponent.js b/reactERP/web/src/modules/login/LoginComponent.js
@@ -1,10 +1,13 @@
 import React, {Component} from 'react';
-import loginActions from './LoginAction';
+import * as loginActions from './LoginAction';
 import {connect} from 'react-redux'
 // import {Input} from 'element-react';
 // import 'element-theme-default';
 
 class LoginComponent extends Component{
+    loginHandler(){
+        this.props.login();
+    }
     render(){
         return (
         <div className="col-md-12">
@@ -24,14 +27,23 @@ class LoginComponent extends Component{
                     <input type="text" placeholder="输入密码" id="form-field-1" className="form-control"/>
                 </div>
             </div> 
-            <button type="button" className="btn btn-primary">登录</button>
+            <button type="button" className="btn btn-primary" onClick={this.loginHandler.bind(this)}>登录</button>
             <i className="fa fa-fire"></i>
+            <h1>{this.props.a}</h1>
         </div>            
         )
     }
 }
 
-const mapStateToProps = state => ({
-    loading: false,
-})
+// const mapStateToProps = state => ({
+//     loading: false,
+// })
+
+const mapStateToProps = (state) => {
+    console.log(state);
+    return {
+        loading: false,
+        a: state.login.login.a
+    }
+}
 export default connect(mapStateToProps, loginActions)(LoginComponent)
diff --git a/reactERP/web/src/modules/login/LoginConstants.js b/reactERP/web/src/modules/login/LoginConstants.js
@@ -0,0 +1,7 @@
+export const LOGIN_LOGIN_REQUEST = 'LOGIN_LOGIN_REQUEST';
+export const LOGIN_LOGIN_SUCCESS = 'LOGIN_LOGIN_SUCCESS';
+export const LOGIN_LOGIN_FAIL = 'LOGIN_LOGIN_FAIL';
+
+export const ORDER_GETCODE_REQUEST = 'ORDER_GETCODE_REQUEST';
+export const ORDER_GETCODE_SUCCESS = 'ORDER_GETCODE_SUCCESS';
+export const ORDER_GETCODE_FAIL = 'ORDER_GETCODE_FAIL';
diff --git a/reactERP/web/src/modules/login/LoginReducer.js b/reactERP/web/src/modules/login/LoginReducer.js
@@ -1,5 +1,8 @@
 // import httpclient from '../../utils/HttpClient'
-export default function(state = {}, action){
+import * as LoginConstants from './LoginConstants';
+import { combineReducers } from 'redux';
+import update from 'react-addons-update'
+function login(state = [], action){
 
     // httpclient.post(action.url, action.data).then(response => {
     //     console.log(response);
@@ -10,6 +13,21 @@ export default function(state = {}, action){
     // return state;
 
     // state.dataset = action.response.data.data;
-    console.log(state, action);
+    // console.log(action);
+    const newData = update(state, {$push: [action.body]});
+    // console.log(newData, state);
+    return newData;
+}
+
+function getCode(state = {}, action){
     return state;
-}
+}
+
+const logineReducer = combineReducers(
+    {
+        login,
+        getCode
+    }
+);
+
+export default logineReducer;
diff --git a/reactERP/web/src/modules/order/orderAction.js b/reactERP/web/src/modules/order/orderAction.js
@@ -0,0 +1,18 @@
+import * as orderConstant from './orderConstant'
+
+export function scanCode(){
+    return {
+        types: [orderConstant.ORDER_SCANCODE_REQUEST, orderConstant.ORDER_PRINT_SUCCESS, orderConstant.ORDER_SCANCODE_FAIL],
+        path: 'pro/fetchAllProducts',
+        query: {code: '123'}
+    }
+}
+
+export function print(){
+    return {
+        type:[orderConstant.ORDER_PRINT_REQUEST, orderConstant.ORDER_PRINT_REQUEST, orderConstant.ORDER_PRINT_FAIL],
+        path: 'http://10.3.134.78:81/print',
+        method: 'post',
+        query: {text: 'DK测试'}
+    }
+}
diff --git a/reactERP/web/src/modules/order/orderComponent.js b/reactERP/web/src/modules/order/orderComponent.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux'
+import * as orderActions from './orderAction';
+
+
+class OrderComponent extends React.Component{
+    scanHandler(){
+        this.props.scanCode();
+    }
+    printHandler(){
+        this.props.print();
+    }
+    render(){
+        return (
+            <div>
+                <p><input type="button" value="scan" onClick={this.scanHandler.bind(this)}/></p>
+                <p><input type="button" value="print" onClick={this.printHandler.bind(this)}/></p>
+                <ul>
+                    <li>{this.props.name}</li>
+                    <li>{this.props.price}</li>
+                </ul>
+                <h1>{this.props.order.scanCode.length}</h1>
+            </div>
+        )
+    }
+}
+
+
+// const mapStateToProps = state => ({order: state.order})
+// state == store
+const mapStateToProps = (store) => {
+    console.log(store);
+    return {
+        order: store.order
+    }
+}
+export default connect(mapStateToProps, orderActions)(OrderComponent)
+
+// export default OrderComponent;
diff --git a/reactERP/web/src/modules/order/orderConstant.js b/reactERP/web/src/modules/order/orderConstant.js
diff --git a/reactERP/web/src/modules/order/orderReducer.js b/reactERP/web/src/modules/order/orderReducer.js
diff --git a/reactERP/web/src/redux/configStore.js b/reactERP/web/src/redux/configStore.js
diff --git a/reactERP/web/src/redux/rootReducer.js b/reactERP/web/src/redux/rootReducer.js
diff --git a/reactERP/web/src/utils/HttpClient.js b/reactERP/web/src/utils/HttpClient.js
