尚學堂 react -后臺管理系統(tǒng)開發(fā)流程

lemon 發(fā)布于2019-08-26 10:42 / 1914人閱讀

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

day01 1. 項目開發(fā)準備

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

2. 啟動項目開發(fā)

1). 使用react腳手架創(chuàng)建項目
2). 開發(fā)環(huán)境運行: npm start
3). 生產(chǎn)環(huán)境打包運行: npm run build   serve build

3. git管理項目

1). 創(chuàng)建遠程倉庫
2). 創(chuàng)建本地倉庫
    a. 配置.gitignore
    b. git init
    c. git add .
    d. git commit -m "init"
3). 將本地倉庫推送到遠程倉庫
    git remote add origin url
    git push origin master
4). 在本地創(chuàng)建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

4. 創(chuàng)建項目的基本結(jié)構(gòu)

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

5 引入antd

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

6. 引入路由

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

7. Login的靜態(tài)組件

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

8. 收集表單數(shù)據(jù)和表單的前臺驗證

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

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

9. 高階函數(shù)與高階組件

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

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

day02 1. 后臺應用

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

2. 編寫ajax代碼

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

3. 實現(xiàn)登陸(包含自動登陸)

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

4. 搭建admin的整體界面結(jié)構(gòu)

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

5. LeftNav組件

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()前調(diào)用一次, 為第一次render()準備數(shù)據(jù)(同步)
    componentDidMount: 在第一次render()之后調(diào)用一次, 啟動異步任務, 后面異步更新狀態(tài)重新render

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

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

day03 1. Header組件

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

2. jsonp解決ajax跨域的原理

1). jsonp只能解決GET類型的ajax請求跨域問題
2). jsonp請求不是ajax請求, 而是一般的get請求
3). 基本原理
    瀏覽器端:
        動態(tài)生成
5. 使用redux及相關(guān)庫編碼
需要引入的庫: 
    redux
    react-redux
    redux-thunk
    redux-devtools-extension(這個只在開發(fā)時需要)
redux文件夾: 
    action-types.js
    actions.js
    reducers.js
    store.js
組件分2類: 
    ui組件(components): 不使用redux相關(guān)API
    容器組件(containers): 通過connect()()生成的組件
    
day10
1. 在項目中搭建redux整套環(huán)境
1). store.js
2). reducer.js
3). actions.js
4). action-types.js
5). index.js
6). 在需要與redux進行狀態(tài)數(shù)據(jù)通信(讀/寫)的UI組件包裝生成容器組件

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

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

2). store對象的內(nèi)部結(jié)構(gòu)
    getState(): 返回值為內(nèi)部保存的state數(shù)據(jù)
    dispatch(): 參數(shù)為action對象
    subscribe(): 參數(shù)為監(jiān)聽內(nèi)部state更新的回調(diào)函數(shù)

3). combineReducers函數(shù):
    返回的總reducer函數(shù)內(nèi)部會根據(jù)總的state和指定的action, 
    調(diào)用每個reducer函數(shù)得到對應的新的state, 并封裝成一個新的總state對象返回

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

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

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

2. 前臺404界面



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