react好客租房項目- day11

React好客租房項目Day11Contents目錄

房源發(fā)布模塊-前期準備工作

房源發(fā)布模塊-關鍵詞搜索房源發(fā)布模塊-發(fā)布房源項目打包&項目優(yōu)化Contents目錄

房源發(fā)布模塊-前期準備工作

房源發(fā)布模塊-關鍵詞搜索房源發(fā)布模塊-發(fā)布房源項目打包&項目優(yōu)化06：35獲取房源的小區(qū)信息，房源圖片上傳，房源發(fā)布等要點提示房源發(fā)布模塊-功能演示和介紹掌握程度：了解1.1房源發(fā)布模塊-前期準備工作視07：51之前頁面實現(xiàn)的功能需要進行細微調整介紹rent組件的模板要點提示發(fā)布房源模塊-模板改動說明掌握程度：應用1.2房源發(fā)布模塊-前期準備工作視總修改首頁（Index）去出租鏈接為：/rent/add修改公共組件NoHouse的children屬性校驗為：node（任何可以渲染的內容）修改公共組件HousePackage，添加onSelect的默認值添加utils/city.js，封裝當前定位城市l(wèi)ocalStorage的操作創(chuàng)建了三個頁面組件：Rent（已發(fā)布房源列表）、Rent/Add（發(fā)布房源）、Rent/Search（關鍵詞搜索校區(qū)信息）課堂問答視知識總結1.2.1發(fā)布房源模塊-模板改動說明總07：01如何判斷用戶是否是登錄狀態(tài)如果登錄了，請求接口，獲取用戶信息要點提示配置三個頁面的路由規(guī)則掌握程度：應用1.3房源發(fā)布模塊-前期準備工作視總在App.js中導入Rent已發(fā)布房源列表頁面在App.js中導入AuthRoute組件使用AuthRoute組件，配置路由規(guī)則使用同樣方式，配置Rent/Add房源發(fā)布頁面，Rent/Search關鍵詞搜索小區(qū)信息頁面課堂問答視知識總結1.3.1配置三個頁面的路由規(guī)則總Contents目錄

房源發(fā)布模塊-前期準備工作

房源發(fā)布模塊-關鍵詞搜索房源發(fā)布模塊-發(fā)布房源項目打包&項目優(yōu)化07：21如何優(yōu)化用戶輸入過快，導致服務器壓力變大的問題要點提示關鍵詞搜索小區(qū)信息-實現(xiàn)思路掌握程度：理解2.1房源發(fā)布模塊-關鍵詞搜索視總獲取SearchBar搜索欄組件的值在搜索欄的change事件中，判斷當前值是否為空如果為空，直接return，不做任何處理如果不為空，就根據當前輸入的值以及當前城市id，獲取該關鍵詞對應的小區(qū)信息問題：搜索欄中沒輸入一個值，就發(fā)一次請求，這樣對服務器壓力比較大，用戶體驗不好解決方式：使用定時器來進行延遲執(zhí)行（關鍵詞：JS文本框輸入防抖）課堂問答視知識總結2.1.1關鍵詞搜索小區(qū)信息-實現(xiàn)思路總11：50把搜索框設置成受控組件在onChange的事件函數中請求數據要點提示關鍵詞搜索小區(qū)信息-實現(xiàn)步驟掌握程度：應用2.2房源發(fā)布模塊-關鍵詞搜索視總練給SearchBar組件，添加onChange配置項，獲取文本框的值判斷當前文本框的值是否為空如果為空，清空列表，然后return，不再發(fā)送請求如果不為空，使用API發(fā)送請求，獲取小區(qū)數據使用定時器來延遲搜索，提升性能課堂問答視知識總結2.2.1關鍵詞搜索小區(qū)信息-實現(xiàn)步驟總練練習動動手，自己來實現(xiàn)關鍵字搜索小區(qū)信息吧！提示給SearchBar組件，添加onChange配置項，獲取文本框的值判斷當前文本框的值是否為空如果為空，清空列表，然后return，不再發(fā)送請求如果不為空，使用API發(fā)送請求，獲取小區(qū)數據使用定時器setTimeout來延遲搜索，提升性能，請求的邏輯放在定時器中，每次執(zhí)行這個定時器之前，先清除定時器10分鐘練2.2.2關鍵詞搜索小區(qū)信息-實現(xiàn)步驟視總09：55如何將小區(qū)信息傳遞給了發(fā)布頁面要點提示關鍵詞搜索小區(qū)信息-傳遞小區(qū)信息給發(fā)布房源頁面掌握程度：應用2.3房源發(fā)布模塊-關鍵詞搜索視總練給搜索列表項添加點擊事件在事件處理程序中，調用history.replace()方法跳轉到發(fā)布房源頁面將被點擊的校區(qū)信息作為數據一起傳遞過去在發(fā)布房源頁面，判斷history.location.state是否為空如果為空，不做任何處理如果不為空，則將小區(qū)信息存儲到發(fā)布房源頁面的狀態(tài)中課堂問答視知識總結2.3.1傳遞小區(qū)信息給發(fā)布房源頁面總練練習動動手，自己來實現(xiàn)數據的傳遞吧！提示給搜索列表項添加點擊事件onTipsClick在事件處理程序中，調用history.replace()方法跳轉到發(fā)布房源頁面ps.history.replace('/rent/add',{...})將被點擊的校區(qū)信息作為數據一起傳遞過去在發(fā)布房源頁面，判斷history.location.state是否為空如果為空，不做任何處理如果不為空，則將小區(qū)信息存儲到發(fā)布房源頁面的狀態(tài)中10分鐘練2.3.2傳遞小區(qū)信息給發(fā)布房源頁面視總Contents目錄

房源發(fā)布模塊-前期準備工作

房源發(fā)布模塊-關鍵詞搜索

房源發(fā)布模塊-發(fā)布房源項目打包&項目優(yōu)化11：16要點提示發(fā)布房源-頁面結構分析掌握程度：理解3.1房源發(fā)布模塊-發(fā)布房源視12：36InputItem、TextareaItem、Picker三個組件都會去綁定onChange事件，那么我們能不能統(tǒng)一來配置事件處理函數要點提示發(fā)布房源-獲取房源數據掌握程度：應用3.2房源發(fā)布模塊-發(fā)布房源視總練InputItem、TextareaItem、Picker組件，都使用onChange配置項，來獲取當前值處理方式：封裝一個事件處理函數getValue來統(tǒng)一獲取三種組件的值

-創(chuàng)建方法getValue作為三個組件的事件處理函數-該方法接受兩個參數：1.name當前狀態(tài)名；2.value當前輸入值或者選中值-分別給InputItem/TextareaItem/Picker組件，添加onChange配置項-分別調用getValue并傳遞name和value兩個參數（注意：Picker組件選中值為數組，而接口需要字符串，所以，取索引號為0的值即可）課堂問答視知識總結3.2.1發(fā)布房源-獲取房源數據總練練習動動手，自己來獲取房源數據吧！提示創(chuàng)建方法getValue作為三個組件的事件處理函數該方法接受兩個參數：1.name當前狀態(tài)名；2.value當前輸入值或者選中值分別給InputItem/TextareaItem/Picker組件，添加onChange配置項分別調用getValue并傳遞name和value兩個參數（注意：Picker組件選中值為數組，而接口需要字符串，所以，取索引號為0的值即可）7分鐘練3.2.2發(fā)布房源-獲取房源數據視總04：43給HousePackge綁定onSelect屬性，通過事件處理函數獲取值，注意參數是一個數組要點提示發(fā)布房源-獲取房屋配置數據掌握程度：應用3.3房源發(fā)布模塊-發(fā)布房源視總練給HousePackge組件，添加onSelect屬性在onSelect處理方法中，通過參數獲取到當前選中項的值根據發(fā)布房源接口的參數說明，將獲取到的數組類型的選中值，轉化為字符串類型調用setState更新狀態(tài)課堂問答視知識總結3.3.1發(fā)布房源-獲取房屋配置數據總練練習動動手，自己來獲取房屋吧！提示給HousePackge組件，添加onSelect屬性在onSelect處理方法中，通過參數獲取到當前選中項的值根據發(fā)布房源接口的參數說明，將獲取到的數組類型的選中值，轉化為字符串類型調用setState更新狀態(tài)5分鐘練3.3.2發(fā)布房源-獲取房屋配置數據視總04：59如何獲取房屋圖片？如何上傳房屋圖片？要點提示發(fā)布房源-房屋圖片上傳分析掌握程度：理解3.4房源發(fā)布模塊-發(fā)布房源視總根據發(fā)布房源接口，最終需要的是房屋圖片的路徑兩個步驟：1-獲取房屋圖片；2-上傳圖片獲取到圖片的路徑如何獲取房屋圖片？ImagePicker圖片選擇器組件，通過onChange配置項來獲取如何上傳房屋圖片？根據圖片上傳接口，將圖片轉化為FormData數據后再上傳，由接口返回圖片路徑課堂問答視知識總結3.4.1發(fā)布房源-房屋圖片上傳分析總上午復習如何解決搜索關鍵詞中搜索欄中每輸入一個值，就發(fā)一次請求，這樣對服務器壓力比較大，用戶體驗不好的問題？圖片上傳的思路？React項目第11天-上午復習上午復習React項目第11天-上午復習如何解決搜索關鍵詞中搜索欄中每輸入一個值，就發(fā)一次請求，這樣對服務器壓力比較大，用戶體驗不好的問題（JS文本框輸入防抖）？

使用定時器來進行延遲執(zhí)行，每次開啟定時器的時候，先清空之前的定時器圖片上傳的思路？

-通過給ImagePicker圖片選擇器組件設置onChange配置項來獲取，第一個參數就是文件的數組來獲取

-根據圖片上傳接口，將圖片轉化為FormData數據后再上傳，設置請求頭的Content-Type:multipart/form-data,由接口返回圖片路徑04：07如何獲取的房屋圖片？事件處理函數中每個參數代表什么意思？要點提示發(fā)布房源-獲取房屋圖片掌握程度：應用3.5房源發(fā)布模塊-發(fā)布房源視練總給ImagePicker組件添加onChange配置項通過onChange的參數，獲取到上傳的圖片，并且存儲到tempSlides中課堂問答視知識總結3.5.1發(fā)布房源-獲取房屋圖片總練練習動動手，自己來實現(xiàn)獲取房屋圖片吧！提示給ImagePicker組件添加onChange配置項通過onChange的參數，傳遞過來有三個參數，我們關心的就是第一個參數filesfiles圖片文件的數組；type操作類型：添加，移除（如果是移除，那么第三個參數代表就是移除的圖片的索引）獲取到上傳的圖片，并且存儲到tempSlides中5分鐘練3.5.2發(fā)布房源-獲取房屋圖片視總08：49上傳圖片與我們之前數據請求有什么不同？要點提示發(fā)布房源-上傳房屋圖片掌握程度：應用3.6房源發(fā)布模塊-發(fā)布房源視上傳文件，我們需要通過FormData對象來幫我們實現(xiàn)把我們的圖片放在FormData中還需要設置請求頭的類型Content-Type：multipart/form-data課堂問答視知識總結3.6.1發(fā)布房源-上傳房屋圖片總練練習動動手，自己來實現(xiàn)獲取房屋圖片吧！提示給提交按鈕，綁定點擊事件在事件處理函數中，判斷是否有房屋圖片如果沒有，不做任何處理如果有，就創(chuàng)建FormData的示例對象（form）遍歷tempSlides數組，分別將每一個圖片圖片對象，添加到form中（鍵為：file，根據接口文檔獲?。┱{用圖片上傳接口，傳遞form參數，并設置請求頭Content-Type為multipart/form-data通過接口返回值獲取到圖片路徑7分鐘練3.6.2發(fā)布房源-上傳房屋圖片視總09：31發(fā)布房源的數據我們已經都獲取到了，接下來就需要把這些數據封裝好，傳遞給服務器要點提示發(fā)布房源-完成掌握程度：應用3.7房源發(fā)布模塊-發(fā)布房源視總練在addHouse方法中，從state里面獲取到所有的房屋數據使用API調用發(fā)布房源接口，傳遞所有房屋數據根據接口返回值中的狀態(tài)碼，判斷是否發(fā)布成功如果狀態(tài)碼是200，標示發(fā)布成功，就提示：發(fā)布成功，并跳轉到已發(fā)布的房源頁面否則，就提示：服務器偷懶了，請稍后再試課堂問答視知識總結3.7.1發(fā)布房源-完成總練練習動動手，自己來實現(xiàn)發(fā)布房源吧！提示在addHouse方法中，從state里面獲取到所有的房屋數據使用API調用發(fā)布房源接口，傳遞所有房屋數據根據接口返回值中的狀態(tài)碼，判斷是否發(fā)布成功如果狀態(tài)碼是200，標示發(fā)布成功，就提示：發(fā)布成功，并跳轉到已發(fā)布的房源頁面否則，就提示：服務器偷懶了，請稍后再試7分鐘練3.7.2發(fā)布房源-完成視總Contents目錄

房源發(fā)布模塊-前期準備工作

房源發(fā)布模塊-關鍵詞搜索房源發(fā)布模塊-發(fā)布房源

項目打包&項目優(yōu)化08：46發(fā)布房源的數據我們已經都獲取到了，接下來就需要把這些數據封裝好，傳遞給服務器要點提示項目打包掌握程度：應用4.1項目打包&項目優(yōu)化視總練打開create-react-app腳手架的打包文檔說明在根目錄創(chuàng)建.duction文件，配置生產環(huán)境的接口基礎路徑在項目根目錄中，打開終端輸入命令：yarnbuild，進行項目打包，生成build文件夾（打包好的項目內容）將build目錄中的文件內容，部署到都服務器中即可也可以通過終端中的提示，使用serve-sbuild來本地查看（需要全局安裝工具包serve）課堂問答視知識總結4.1.1項目打包總練練習動動手，自己來打包項目吧！提示在根目錄創(chuàng)建.duction文件，配置生產環(huán)境的接口基礎路徑在項目根目錄中，打開終端輸入命令：yarnbuild，進行項目打包，生成build文件夾（打包好的項目內容）將build目錄中的文件內容，部署到都服務器中即可也可以通過終端中的提示，使用serve-sbuild來本地查看（需要全局安裝工具包serve）7分鐘練4.1.2項目打包視總05：44默認情況下腳手架配置是隱藏的，我們可以通過兩種方式來修改webpack的配置項要點提示修改腳手架配置說明掌握程度：應用4.2項目打包&項目優(yōu)化視總-reate-react-app中隱藏了webpack的配置，隱藏在react-scripts包中兩種方式來修改-運行命令npmruneject釋放webpack配置（注意：不可逆）-通過第三方包重寫webpack配置（比如：react-app-rewired等）課堂問答視知識總結4.2.1修改腳手架配置說明總12：46按需加載打包有什么好處要點提示項目優(yōu)化-antd-mobile按需加載掌握程度：應用4.3項目打包&項目優(yōu)化視總打開antd-mobile在create-react-app中的使用文檔安裝yarnaddreact-app-rewiredcustomize-cra（用于腳手架重寫配置）修改package.json中的scripts在項目根目錄創(chuàng)建文件：config-overrides.js(用于覆蓋腳手架默認配置)安裝yarnaddbabel-plugin-import插件（用于按需加載組件代碼和樣式）修改config-overrides.js文件，配置按需加載功能重啟項目（yarnstart）移除index.js中導入的antd-mobile樣式文件將index.css移動到App后面，讓index.css中的頁面背景生效課堂問答視知識總結4.3.1項目優(yōu)化-antd-mobile按需加載總15：30路由的懶加載要點提示項目優(yōu)化-基于路由的代碼分割掌握程度：應用4.4項目打包&項目優(yōu)化視總目的：將代碼按照路由進行分割，只在訪問該路由的時候才加載該組件內容，提高首屏加載速度如何實現(xiàn)？React.lazy()方法+import()方法、Suspense組件（ReactCode-Splitting文檔）React.lazy()作用：處理動態(tài)導入的組件，讓其像普通組件一樣使用import('組件路徑')，作用：告訴webpack，這是一個代碼分割點，進行代碼分割Suspense組件：用來在動態(tài)組件加載完成之前，顯示一些loading內容，需要包裹動態(tài)組件內容課堂問答視知識總結4.4.1項目優(yōu)化-基于路由的代碼分割總07：25react-virtualized組件優(yōu)化配置代理解決跨域問題要點提示項目優(yōu)化-其他優(yōu)化和說明掌握程度：了解4.5項目打包&項目優(yōu)化視總react-virtualized只加載用到的組件文檔腳手架配置解決跨域問題

-安裝第三方包

$npminstallhttp-proxy-middleware--save$#or$yarnaddhttp-proxy-middleware-創(chuàng)建src/setupProxy