摘要：項目開發準備描述項目技術選型接口接口文檔測試接口啟動項目開發使用腳手架創建項目開發環境運行生產環境打包運行管理項目創建遠程倉庫創建本地倉庫配置將本地倉庫推送到遠程倉庫在本地創建分支并推送到遠程如果本地有修改新的同事克隆倉庫如果遠程修

1). 描述項目
2). 技術選型 
3). API接口/接口文檔/測試接口

1). 使用react腳手架創建項目
2). 開發環境運行: npm start
3). 生產環境打包運行: npm run build   serve build

1). 創建遠程倉庫
2). 創建本地倉庫
    a. 配置.gitignore
    b. git init
    c. git add .
    d. git commit -m "init"
3). 將本地倉庫推送到遠程倉庫
    git remote add origin url
    git push origin master
4). 在本地創建dev分支, 并推送到遠程
    git checkout -b dev
    git push origin dev
5). 如果本地有修改
    git add .
    git commit -m "xxx"
    git push origin dev
6). 新的同事: 克隆倉庫
    git clone url
    git checkout -b dev origin/dev
    git pull origin dev
7). 如果遠程修改
    git pull origin dev
    

api: ajax請求的模塊
components: 非路由組件
pages: 路由組件
App.js: 應用的根組件
index.js: 入口js

下載antd的包
按需打包: 只打包import引入組件的js/css
    下載工具包
    config-overrides.js
    package.json
自定義主題
    下載工具包
    config-overrides.js
使用antd的組件
    根據antd的文檔編寫
    

下載包: react-router-dom
拆分應用路由:
  Login: 登陸
  Admin: 后臺管理界面
注冊路由:
  
  
  
  

1). 自定義了一部分樣式布局
2). 使用antd的組件實現登陸表單界面
  Form  / Form.Item
  Input
  Icon
  Button

1). form對象
    如何讓包含
的組件得到form對象?  WrapLoginForm = Form.create()(LoginForm)
    WrapLoginForm是LoginForm的父組件, 它給LoginForm傳入form屬性
    用到了高階函數和高階組件的技術
2). 操作表單數據
    form.getFieldDecorator("標識名稱", {initialValue: 初始值, rules: []})()包裝表單項組件標簽
    form.getFieldsValue(): 得到包含所有輸入數據的對象
    form.getFieldValue(id): 根據標識得到對應字段輸入的數據

3). 前臺表單驗證
    a. 聲明式實時表單驗證:
        form.getFieldDecorator("標識名稱", {rules: [{min: 4, message: "錯誤提示信息"}]})()
    b. 自定義表單驗證
        form.getFieldDecorator("標識名稱", {rules: [{validator: this.validatePwd}]})()
        validatePwd = (rule, value, callback) => {
          if(有問題) callback("錯誤提示信息") else callack()
        } 
    c. 點擊提示時統一驗證
        form.validateFields((error, values) => {
          if(!error) {通過了驗證, 發送ajax請求}
        })
        

1. 高階函數
    1). 一類特別的函數
        a. 接受函數類型的參數
        b. 返回值是函數
    2). 常見
        a. 定時器: setTimeout()/setInterval()
        b. Promise: Promise(() => {}) then(value => {}, reason => {})
        c. 數組遍歷相關的方法: forEach()/filter()/map()/reduce()/find()/findIndex()
        d. 函數對象的bind()
        e. Form.create()() / getFieldDecorator()()
    3). 高階函數更新動態, 更加具有擴展性

2. 高階組件
    1). 本質就是一個函數
    2). 接收一個組件(被包裝組件), 返回一個新的組件(包裝組件), 包裝組件會向被包裝組件傳入特定屬性
    3). 作用: 擴展組件的功能
    
3. 高階組件與高階函數的關系
    高階組件是特別的高階函數
    接收一個組件函數, 返回是一個新的組件函數
    

啟動后臺應用: mongodb服務必須啟動
使用postman測試接口(根據接口文檔):
    訪問測試: post請求的參數在body中設置
    保存測試接口
    導出/導入所有測試接口
    

1). ajax請求函數模塊: api/ajax.js
    封裝axios + Promise
    函數的返回值是promise對象  ===> 后面用上async/await
    自己創建Promise
      1. 內部統一處理請求異常: 外部的調用都不用使用try..catch來處理請求異常
      2. 異步返回是響應數據(而不是響應對象): 外部的調用異步得到的就直接是數據了(response --> response.data)
2). 接口請求函數模塊: api/index.js
    根據接口文檔編寫(一定要具備這個能力)
    接口請求函數: 使用ajax(), 返回值promise對象
3). 解決ajax跨域請求問題(開發時)
    辦法: 配置代理  ==> 只能解決開發環境
    編碼: package.json: proxy: "http://localhost:5000"
4). 對代理的理解
    1). 是什么?
        具有特定功能的程序
    2). 運行在哪?
        前臺應用端
        只能在開發時使用
    3). 作用?
        解決開發時的ajax請求跨域問題
        a. 監視并攔截請求(3000)
        b. 轉發請求(4000)
    4). 配置代理
        告訴代理服務器一些信息: 比如轉發的目標地址
        開發環境: 前端工程師
        生產環境: 后端工程師
5). async和await
    a. 作用?
       簡化promise對象的使用: 不用再使用then()來指定成功/失敗的回調函數
       以同步編碼(沒有回調函數了)方式實現異步流程
    b. 哪里寫await?
        在返回promise的表達式左側寫await: 不想要promise, 想要promise異步執行的成功的value數據
    c. 哪里寫async?
        await所在函數(最近的)定義的左側寫async
        

login.jsx
    1). 調用登陸的接口請求
    2). 如果失敗, 顯示錯誤提示信息
    3). 如果成功了:
        保存user到local/內存中
        跳轉到admin
    4). 如果內存中的user有值, 自動跳轉到admin
src/index.js
    讀取local中user到內存中保存
admin.jsx
    判斷如果內存中沒有user(_id沒有值), 自動跳轉到login
storageUtils.js
    包含使用localStorage來保存user相關操作的工具模塊
    使用第三庫store
        簡化編碼
        兼容不同的瀏覽器
memoryUtils.js
    用來在內存中保存數據(user)的工具類
    

1). 整體布局使用antd的Layout組件
2). 拆分組件
    LeftNav: 左側導航
    Header: 右側頭部
3). 子路由
    定義路由組件
    注冊路由
    

1). 使用antd的組件
    Menu / Item / SubMenu

2). 使用react-router
    withRouter(): 包裝非路由組件, 給其傳入history/location/match屬性
    history: push()/replace()/goBack()
    location: pathname屬性
    match: params屬性

3). componentWillMount與componentDidMount的比較
    componentWillMount: 在第一次render()前調用一次, 為第一次render()準備數據(同步)
    componentDidMount: 在第一次render()之后調用一次, 啟動異步任務, 后面異步更新狀態重新render

4). 根據動態生成Item和SubMenu的數組
    map() + 遞歸: 多級菜單列表
    reduce() + 遞歸: 多級菜單列表

5). 2個問題?
    刷新時如何選中對應的菜單項?
        selectedKey是當前請求的path
    刷新子菜單路徑時, 自動打開子菜單列表?
        openKey是 一級列表項的某個子菜單項是當前對應的菜單項
        

1). 界面靜態布局
    三角形效果
2). 獲取登陸用戶的名稱顯示
    MemoryUtils
3). 當前時間
    循環定時器, 每隔1s更新當前時間狀態
    格式化指定時間: dateUtils
4). 天氣預報
    使用jsonp庫發jsonp請求百度天氣預報接口
    對jsonp請求的理解
5). 當前導航項的標題
    得到當前請求的路由path: withRouter()包裝非路由組件
    根據path在menuList中遍歷查找對應的item的title
6). 退出登陸
    Modal組件顯示提示
    清除保存的user
    跳轉到login
7). 抽取通用的類鏈接按鈕組件
    通過...透傳所有接收的屬性:     xxxx
    組件標簽的所有子節點都會成為組件的children屬性
    

1). jsonp只能解決GET類型的ajax請求跨域問題
2). jsonp請求不是ajax請求, 而是一般的get請求
3). 基本原理
    瀏覽器端:
        動態生成

5. 使用redux及相關庫編碼
需要引入的庫: 
    redux
    react-redux
    redux-thunk
    redux-devtools-extension(這個只在開發時需要)
redux文件夾: 
    action-types.js
    actions.js
    reducers.js
    store.js
組件分2類: 
    ui組件(components): 不使用redux相關API
    容器組件(containers): 通過connect()()生成的組件
    
day10
1. 在項目中搭建redux整套環境
1). store.js
2). reducer.js
3). actions.js
4). action-types.js
5). index.js
6). 在需要與redux進行狀態數據通信(讀/寫)的UI組件包裝生成容器組件

2. 通過redux管理頭部標題headTitle數據
1). action-types.js
2). actoins.js
3). reducer.js
4). 相關組件: 
    left-nav.js
    header.js
    
3. 通過redux管理登陸用戶信息user數據
1). action-types.js
2). actoin.js
3). reducer.js
4). 相關組件: 
    login.js
    admin.js
    left-nav.js
    header.js
    role.js

4. 自定義redux庫
1). redux庫向外暴露下面幾個函數
    createStore(): 接收的參數為reducer函數, 返回為store對象
    combineReducers(): 接收包含n個reducer方法的對象, 返回一個新的reducer函數
    applyMiddleware() // 暫不實現

2). store對象的內部結構
    getState(): 返回值為內部保存的state數據
    dispatch(): 參數為action對象
    subscribe(): 參數為監聽內部state更新的回調函數

3). combineReducers函數:
    返回的總reducer函數內部會根據總的state和指定的action, 
    調用每個reducer函數得到對應的新的state, 并封裝成一個新的總state對象返回

5. 自定義react-redux庫
1). react-redux向外暴露了2個API
    a. Provider組件類
    b. connect函數

2). Provider組件
    接收store屬性
    通過context將store暴露給所有的容器子組件
    Provider原樣渲染其所有標簽子節點
    
3). connect函數
    接收2個參數: mapStateToProps和mapDispatchToProps
    connect()執行的返回值為一個高階組件: 包裝UI組件, 返回一個新的容器組件
    mapStateToProps: 
        為一個函數, 返回包含n個一般屬性對象, 
        容器組件中調用得到對象后, 初始化為容器組件的初始狀態, 并指定為UI組件標簽的一般屬性
    mapDispatchToProps:
        如果為函數, 調用得到包含n個dispatch方法的對象
        如果為對象, 遍歷封裝成包含n個dispatch方法的對象
        將包含n個dispatch方法的對象分別作為函數屬性傳入UI組件
    通過store綁定state變化的監聽, 在回調函數中根據store中最新的state數據更新容器組件狀態, 從而更新UI組件

day11
1. 數據可視化
1). echarts(百度) ==> echarts-for-react
2). g2(阿里) ==> bizCharts
3). d3(國外)

2. 前臺404界面



3. 打包應用運行
1). 解決生產環境ajax跨域問題
    使用nginx的反向代理解決(一般由后臺配置)
    CORS: 允許瀏覽器端跨域
2). BrowserRouter模式刷新404的問題
    a. 問題: 刷新某個路由路徑時, 會出現404的錯誤
    b. 原因: 項目根路徑后的path路徑會被當作后臺路由路徑, 去請求對應的后臺路由, 但沒有
    c. 解決: 使用自定義中間件去讀取返回index頁面展現