App.js 去掉 react-hot-loader

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'world',
      show: true
    };
  }

  render() {
    return <div>
      {this.state.show && <button>button</button>}
      <h1>Hello, {this.state.name}</h1>
    </div>;
  }
}

index.js改一下

const renderApp = () => ReactDOM.render(
  <App />,
  document.getElementById('root')
);

function run() {
  renderApp();
  if (module.hot) {
    module.hot.accept(renderApp);
  }
}

run();

call的作用是改變一個函數(shù)調(diào)用時的this值，并提供函數(shù)調(diào)用的參數(shù)。

var x = X()，此時x是object對象;
x.f1(options)，因為f1是作為全局變量x的屬性調(diào)用的，所以執(zhí)行x.f1的時候，方法里面的this指向全局變量x，傳入?yún)?shù)options，所以函數(shù)的參數(shù)x指向全局變量options：

f1(x){
    x.f2.call(this) // this變量指向全局變量x，注意是全局變量x，并不是參數(shù)x，參數(shù)x指向全局變量options
}

把上述代碼的變量替換一下：

options.f2.call(x) // 參數(shù)x替換成全局變量options，變量this替換成全局變量x

options.f2執(zhí)行的時候，因為f2是作為options的屬性調(diào)用的，所以默認(rèn)該函數(shù)里面的this指向options對象，但是使用了call(x)，也就是該方法調(diào)用的時候，明確設(shè)置this指向全局變量x：

f2(){
    console.log(this) // 明確設(shè)置this是全局變量x，此時打印的是全局變量x。
}

up up up...

import改為require
webstorm2018應(yīng)該是支持這種寫法的，你可以試試升級idea到最新版本，實在不行就換webstorm吧

你沒有引用jQuery 或者jQuery版本問題，換個版本的jQuery試試。

因為對父元素（塊級元素）應(yīng)用了text-indent，text-indent有繼承值，所以span元素也有效。但是，單獨對span元素設(shè)置text-indent無效，因為它是行內(nèi)元素。https://developer.mozilla.org...

不可能的！除非你使用的php框架支持這種語法糖才行。
客戶端調(diào)用服務(wù)端方法本質(zhì)原理是：
客戶端觸發(fā)客戶端的js方法，其中使用ajax向服務(wù)端發(fā)起請求-參數(shù)為想要執(zhí)行的服務(wù)端方法名或執(zhí)行參數(shù)，服務(wù)端解析請求后執(zhí)行相應(yīng)方法。
這套東西或者自己寫，或者由框架支持完成。

它寫的那些表示的是你使用這個鏡像安裝完成后，默認(rèn)攜帶了這么一個環(huán)境，并不是說僅能使用默認(rèn)攜帶的，完全可以根據(jù)自己需求進(jìn)行安裝或者卸載默認(rèn)程序。
而nodeJS的環(huán)境挺容易配置的，可以說都不需要過多的依賴來支持便可運(yùn)行，跟著nodeJS的教程安裝使用就可以運(yùn)行的

目錄結(jié)構(gòu)

|-src
|----actions
|--------user.js
|--------office.js
|--------index.js
|----reducers
|--------user.js
|--------office.js
|--------index.js
|----pages
|--------office.js

Action整合

actions目錄中的index.js作為所有業(yè)務(wù)的集合,集中配置管理.

actions/index.js

import * as officeActions from './office';
import * as userActions from './user';

export default {
    ...officeActions,
    ...userActions,
}

actions/office.js

//這里的方法名稱要全局唯一
export function getOfficeList(){
    return async(dispatch,getState) => {
        let response = await fetch(url);
        //這里的type一定要全局唯一,因為狀態(tài)變一次每個Reducer都會根據(jù)類型比對一遍
        dispatch({type: 'GET_OFFICE_LIST', payLoad: response.json});
    }
}
export function getOfficeInfo(id){
    return async(dispatch,getState) => {
        let response = await fetch(url+'?id='+id);
        //這里的type一定要全局唯一,因為狀態(tài)變一次每個Reducer都會根據(jù)類型比對一遍
        dispatch({type: 'GET_OFFICE_DETAIL', payLoad: response.json});
    }
}

actions/user.js

//這里的方法名稱要全局唯一
export function getUserList(){
    return async(dispatch,getState) => {
        let response = await fetch(url);
        //這里的type一定要全局唯一,因為狀態(tài)變一次每個Reducer都會根據(jù)類型比對一遍
        dispatch({type: 'GET_USER_LIST', payLoad: response.json});
    }
}

Reducer整合

Reducer目錄中的index.js 所有子狀態(tài)的集合,集中配置管理.

reducers/index.js

import {combineReducers} from 'redux';

import officeReducer from './office';
import userReducer from './user';

const appReducer = combineReducers({
    office: officeReducer,
    user: userReducer,
});
export default appReducer;

reducers/office.js

//初始化狀態(tài)
let initialState = {
    officeList: [],
    officeInfo: {
        "id": "",
        "parent_id": "",
        "parent_ids": "",
        "name": "",
    },
};
const office = (state = initialState, action) => {
    switch (action.type) {
        //處理 類型為 GET_OFFICE_LIST 結(jié)果數(shù)據(jù)
        case 'GET_OFFICE_LIST':
            return Object.assign({}, state, {
                officeList: action.payLoad.data
            });
        //處理 類型為 GET_OFFICE_DETAIL 結(jié)果數(shù)據(jù)
        case 'GET_OFFICE_DETAIL':
            return Object.assign({}, state, {
                officeInfo: action.payLoad.data
            });
        default:
        //如果類型為匹配到 返回當(dāng)前state
            return state;
    }
};
export default office

最終使用

pages/office.js

import React, {Component} from 'react'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

//以antd為例
import {Table, Tree, Row, Col, Card, Button, Spin, Modal,Icon} from 'antd';
//引入Action集合,因為很有可能某個頁面 需要調(diào)用多個子action
import Actions from '../actions';

class office extends Component {
    //生命周期此次不討論
    componentDidMount() {
        //請求機(jī)構(gòu) 數(shù)據(jù)
        this.props.action.getOfficeList();
  }

    handleOnRowClick = (officeId)=>{
        //點擊行 獲取結(jié)構(gòu)詳情數(shù)據(jù)
        this.props.action.getOfficeInfo(officeId);
    }
    
    render() {
        <div className="tableDistance">
        <Table rowSelection={rowSelection} columns={columns}
               dataSource={this.props.office.officeList}//綁定機(jī)構(gòu)數(shù)據(jù)并展現(xiàn)
               bordered size="middle"
               pagination={false} onRowClick={this.handleOnRowClick}
        />
    </div>
    }

}
//我習(xí)慣叫訂閱-訂閱Reducer/index.js集合中的需要的狀態(tài),reducer/office在這里進(jìn)行綁定(數(shù)據(jù)結(jié)構(gòu)具體見:initState),reducer/office數(shù)據(jù)變化這里就會變化,這里可以理解為數(shù)據(jù)源
const mapStateToProps = (state) => {
    return {
        office: state.office,
        user:state.user
    }
};
//將引入的Actions綁定,使當(dāng)前展現(xiàn)層具備 請求數(shù)據(jù)的能力,需要什么數(shù)據(jù),就請求對應(yīng)的 方法名(這就是為什么腔調(diào)actions/office.js 中的每個action 名稱一定要全局唯一,還是那句話,這個頁面可能需要多個子action的數(shù)據(jù)能力作為數(shù)據(jù)集中展現(xiàn)的基礎(chǔ))
const mapDispatchToProps = (dispatch) => {
    return {
        action: bindActionCreators(Actions, dispatch)
    }
};
//最重要一步 通過react-redux 提供的 connect函數(shù)將 需要的 Reducer和Actions 綁定至 當(dāng)前頁面
export default connect(mapStateToProps, mapDispatchToProps)(office);

完

padStart()，padEnd()，再轉(zhuǎn)成數(shù)字

溫馨提示一下其中的一個小細(xì)節(jié)錯誤：

fn.prototype.fnDown=function(e) {
    var _this = this;
    _this.dirX = e.pageX - _this.div.offsetLeft; //直接this應(yīng)該是獲取不到的吧？
    _this.dirY = e.pageY - _this.div.offsetTop;
    document.onmousemove = function(e) {
      _this.fnMove(e);
    }
    document.onmouseup = function() {
      _this.fnUp();
    }
}

搞了半天也不知道問題是什么鬼，把parcel換成webpack，問題解決
parcel構(gòu)建的只能dispatch，不能commit

橫向滾動布局 white-space: nowrap;

內(nèi)部元素 display: inline-block;

把url路徑指向你的文件，設(shè)置權(quán)限

WTForms本身既可以用來渲染html控件，可以單獨用來驗證表單，如果要支持JSON，可以用1樓的hack。
我推薦你用flask_wtf，這個插件，這個插件是對wtfoms的進(jìn)一步封裝，支持form，也支持json，CSRF,文件上傳。我在項目里，頁面渲染和WebService都是用的這個插件。
例子：
form.py

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField
from wtforms.validators import Length, StopValidation


class MyForm(FlaskForm):
    # 字段
    name = StringField(validators=[Length(min=1, max=20, message="name長度需在1-20個字符間")])
    name2 = IntegerField()
    # 自定義驗證
    def validate_age(self, field):
        # 根據(jù)name2查詢model
        #  ......
        model = None
        if not model:
            # StopValidateion不需要自己捕捉
            raise StopValidation("name2信息不存在")

view.py

@app.route('/api/get_obj_info', methods=["GET", "POST"]):
def get_obj_info():
    form = MyForm()
    
    if request.method == "GET":
        return jsonify({
            # xxxxx
        })
    
    # validate_on_submit 會自動調(diào)用“validate_字段”這些驗證方法
    # 驗證失敗后返回表單驗證的錯誤消息
    if form.validate_on_submit():
       
        return jsonify({
            "status": "success",
            "msg": "xxxx"
        })
     # 驗證未通過
     return jsonify({
         "status": "failed":
         "msg": "xxxx",
         "error": form.errors
     })

前臺POST數(shù)據(jù):

    {
        name: "小明",
        name2: "管理"
    }

es6 的函數(shù)默認(rèn)值 + 結(jié)構(gòu)可以解決這個問題
簡單的例子

function test({a = 'default'}){
  console.log(a)
}
test({b: 'b'})
// default
test({a: 'a'})
// a

但是如果需要判斷很多內(nèi)容的話，函數(shù)參數(shù)會比較難寫

用promise封裝，你這個寫法有點不倫不類，（順便一提 async 是ES7)

Query(strSql)
{
    return new Promise((resolve,reject)=>{
        this._conpool.request()
        .query(strSql, (err, result) => {
            if(err){
                //出錯
                reject(err);
            }else{
                console.dir(result.recordset);    //已查詢到數(shù)據(jù)在此
                resolve(result.recordset);
            }
        });
    });
} 

調(diào)用:

    let db = new DB();
    db.Query('select * from sc_Product').then(ret => {
    
        console.dir(ret);
        res.json(ret);
    }).catch(e=>{
        //error
    }); 

或者

async function(){
    let db = new DB();
    try{
        let ret =await db.Query('select * from sc_Product');
        console.dir(ret);
        res.json(ret);
    }catch(e){
        //error
    }
}
    

await 用來wait的是一個promise(如果非promise會直接返回結(jié)果)，而一個async函數(shù)的返回值實際上就是一個promise，所以他倆構(gòu)成一套以同步的方式書寫異步代碼的語法。
任何異步的操作首先要封裝成promise才能用async/await這種語法糖。

從你的第一個函數(shù)里可以看出來你還不太懂promise的語法使用，建議找相關(guān)的博客研究一下

可以和客戶端封裝一個module來控制