專案建立於2023年1月底,到現在已經接近半年,在此寫下半年來專案的實踐過程以及自己對前端的學習與體悟。技術選型
框架:react
路由:react-router 4
狀態管理:redux
ui元件庫:ant design
搭建工程
首先我們並不打算將react
讓webpack
打包,而使用第三方的cdn,直接在html
檔案以script
標籤引入。在此我們選用用友的tinper公共靜態資源庫。
改動webpack
配置檔案
externals:
而若引入第三方cdn,需要分引入為生產環境還是開發環境的**。
如在生產環境下要引入
而在開發環境引入。
選用ejs-compiled-loader
,這樣另我們可以在html
檔案使用ejs
模板引擎。
繼續改動webpack
配置檔案
new htmlwebpackplugin(),
在html
使用模板引擎
最後,設定webpack
的別名,讓後續引用的地方減少路徑的複雜度。
alias: ,
如在src
資料夾下有兩個資料夾a
和b
,倘若b
下的m.js
需要引用a
下的n.js
,需要import x from 『../a/n.js』
,設定別名後可寫為root/a/n.js
。
前後端分離
在知乎上面找了張,前後端分離,簡單的說,就是前端負責頁面互動,顯示後台提供的資料,而後端負責資料的處理,提供給前台資料。
可以看出前後端是有很強的耦合關係,後端需要依賴前端請求,前端需要依賴後端響應。不過此處後端是可以輕鬆模擬前端請求,如postman
等。剩下的解決要點為如何給前端模擬資料。因此,我們在設計介面約定資料後構建另乙個簡單的server
,這個server
會簡單的響應前端請求,根據約定返回模擬的資料。我們將這個server
成為mock server
。
其中mock server
可分成本地及遠端。
本地的mock server
需要每個前端在自己電腦上部署伺服器,且若後台改動api,後台無法同步維護mock server
與real server
。
因此打算建立遠端的mock server
(其實還有個關鍵是我使用用友配的電腦開發,在本地部署的話電腦配置。。。)不過此步驟我們也可以省略了,用友的大前端技術團隊提供了mock平台。
他的功能十分齊全,具備許可權管理,mock server,資料匯入等等的功能。
React 實踐專案 (四)
react在github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習react也有一段時間了,現在就開始用 react redux 進行實戰!上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...
React 實踐專案 (四)
react在github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習react也有一段時間了,現在就開始用 react redux 進行實戰!上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...
react專案實踐 (4)依賴安裝與配置
1.修改package.json,新增需要安裝的包 keywords author license isc devdependencies dependencies 2.執行 npm i 安裝。3.修改webpack.config.js const path require path const h...