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

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

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

day01 1. 項(xiàng)目開發(fā)準(zhǔn)備

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

2. 啟動(dòng)項(xiàng)目開發(fā)

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

3. git管理項(xiàng)目

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

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

api: ajax請(qǐng)求的模塊
components: 非路由組件
pages: 路由組件
App.js: 應(yīng)用的根組件
index.js: 入口js

5 引入antd

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

6. 引入路由

下載包: react-router-dom
拆分應(yīng)用路由:
  Login: 登陸
  Admin: 后臺(tái)管理界面
注冊(cè)路由:

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

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

8. 收集表單數(shù)據(jù)和表單的前臺(tái)驗(yàn)證

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

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

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

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

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

day02 1. 后臺(tái)應(yīng)用

啟動(dòng)后臺(tái)應(yīng)用: mongodb服務(wù)必須啟動(dòng)
使用postman測(cè)試接口(根據(jù)接口文檔):
    訪問(wèn)測(cè)試: post請(qǐng)求的參數(shù)在body中設(shè)置
    保存測(cè)試接口
    導(dǎo)出/導(dǎo)入所有測(cè)試接口

2. 編寫ajax代碼

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

3. 實(shí)現(xiàn)登陸(包含自動(dòng)登陸)

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

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

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

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

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

5). 2個(gè)問(wèn)題?
    刷新時(shí)如何選中對(duì)應(yīng)的菜單項(xiàng)?
        selectedKey是當(dāng)前請(qǐng)求的path
    刷新子菜單路徑時(shí), 自動(dòng)打開子菜單列表?
        openKey是 一級(jí)列表項(xiàng)的某個(gè)子菜單項(xiàng)是當(dāng)前對(duì)應(yīng)的菜單項(xiàng)

day03 1. Header組件

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

2. jsonp解決ajax跨域的原理

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

2. 通過(guò)redux管理頭部標(biāo)題headTitle數(shù)據(jù)
1). action-types.js
2). actoins.js
3). reducer.js
4). 相關(guān)組件: 
    left-nav.js
    header.js
    
3. 通過(guò)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庫(kù)
1). redux庫(kù)向外暴露下面幾個(gè)函數(shù)
    createStore(): 接收的參數(shù)為reducer函數(shù), 返回為store對(duì)象
    combineReducers(): 接收包含n個(gè)reducer方法的對(duì)象, 返回一個(gè)新的reducer函數(shù)
    applyMiddleware() // 暫不實(shí)現(xiàn)

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

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

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

2). Provider組件
    接收store屬性
    通過(guò)context將store暴露給所有的容器子組件
    Provider原樣渲染其所有標(biāo)簽子節(jié)點(diǎn)
    
3). connect函數(shù)
    接收2個(gè)參數(shù): mapStateToProps和mapDispatchToProps
    connect()執(zhí)行的返回值為一個(gè)高階組件: 包裝UI組件, 返回一個(gè)新的容器組件
    mapStateToProps: 
        為一個(gè)函數(shù), 返回包含n個(gè)一般屬性對(duì)象, 
        容器組件中調(diào)用得到對(duì)象后, 初始化為容器組件的初始狀態(tài), 并指定為UI組件標(biāo)簽的一般屬性
    mapDispatchToProps:
        如果為函數(shù), 調(diào)用得到包含n個(gè)dispatch方法的對(duì)象
        如果為對(duì)象, 遍歷封裝成包含n個(gè)dispatch方法的對(duì)象
        將包含n個(gè)dispatch方法的對(duì)象分別作為函數(shù)屬性傳入U(xiǎn)I組件
    通過(guò)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(國(guó)外)

2. 前臺(tái)404界面



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

云服務(wù)器 GPU云服務(wù)器尚學(xué)堂java java尚學(xué)堂尚學(xué)堂 java 尚學(xué)堂javascript視頻

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106635.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lemon

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

高效采集數(shù)據(jù)的背后都有一個(gè)DTM

閱讀 2285·2021-11-25 09:43
jsp代碼實(shí)例第100課

閱讀 1233·2021-11-23 09:51
基于SSM實(shí)現(xiàn)在線課程學(xué)習(xí)及作業(yè)提交系統(tǒng)

閱讀 3574·2021-11-23 09:51
獨(dú)立開發(fā)變現(xiàn)周刊（第29期）：只需3步，一張紙生成一個(gè)網(wǎng)站

閱讀 3701·2021-11-22 09:34
樹莓派系列(十四) 樹莓派4B安裝 docker并配置為 MQTT服務(wù)器

閱讀 1676·2021-10-09 09:43
css實(shí)現(xiàn)字?jǐn)?shù)超過(guò)指定行數(shù)顯示省略號(hào)...

閱讀 2189·2019-08-30 15:53
由float引發(fā)的思考

閱讀 3218·2019-08-30 14:07
CSS常見(jiàn)樣式（一）：background

閱讀 644·2019-08-28 18:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

1024程序員節(jié)最新福利之2018最全H5前端資料集

1024程序員節(jié)最新福利之2018最全H5前端資料集

**初識(shí)React(7)：高階組件**

html5之canvas

發(fā)表評(píng)論

0條評(píng)論

lemon

男|高級(jí)講師

TA的文章

高效采集數(shù)據(jù)的背后都有一個(gè)DTM

jsp代碼實(shí)例第100課

基于SSM實(shí)現(xiàn)在線課程學(xué)習(xí)及作業(yè)提交系統(tǒng)

獨(dú)立開發(fā)變現(xiàn)周刊（第29期）：只需3步，一張紙生成一個(gè)網(wǎng)站

樹莓派系列(十四) 樹莓派4B安裝 docker并配置為 MQTT服務(wù)器

css實(shí)現(xiàn)字?jǐn)?shù)超過(guò)指定行數(shù)顯示省略號(hào)...

由float引發(fā)的思考

CSS常見(jiàn)樣式（一）：background

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！