關於後續更多進展和分享歡迎持續關注公眾號或部落格。
Mock平台3-初識Antd React 開箱即用中台前端框架
微信搜索【大奇測試開】,關注這個堅持分享測試開發乾貨的傢伙。
內容提要
首先說下為啥這次測試開發系列教程前端選擇Antd React,其實也是糾結對比過最終決定挑戰一把,想法大概有幾下幾點:
- 筆者自己走出
vue
舒適區,拓展全棧的能力,也為平台開發測試同學提供多一種選擇; - 對比後發現它有官方的持續維護和更完善生態,比如助手插件、區塊、模板組件、圖表、設計資源等;
- 在外企和遠程的需求中 React 占很重的比例,或許為後續的測試轉型提供一種可能技能。
當然本身Mock這個項目之前是用element ui admin完成的前端開發,在系列的最後如果需要的人多,我也可以整理作為一個分支分享出來,供有隻想用vue的同學做學習參考。
準備和說明
編譯環境: 開發電腦上已安裝NodeJs,配置好 npm、node, tyarn 命令
開發工具:推薦 WebStorm
前端語言:React (是一個用於構建用戶介面的 JavaScript 庫 )
掌握內容
- 了解Antd相關框架知識和官方一些建議
- 源程式碼運行演示,以及如何初始新項目
- 了解程式碼結構,對比React和Vue的不同
新手須知
Ant Design Pro
是螞蟻開源的開箱即用的中台前端/設計解決方案,內部UI組件庫是antd
(基於 Ant Design 設計體系的 React UI 組件庫)它提供完整的腳手架,涉及 國際化,許可權,mock,數據流,網路請求等各個方面。為中後台中常見的方案提供了最佳實踐來減少學習和開發成本。同時為了提供更加高效的開發體驗,提供了一系列模板組件,ProLayout,ProTable,ProList 都是開發中後台的好幫手,可以顯著的減少樣板程式碼。可以通過下面的大圖來了解整個 Ant Design Pro 的架構。
更多的詳細內容參考下官方文檔,這裡不粘貼複述,建議了解下。
雖然 知其然知其所以然 更好,但不會也沒任何關係,對系列開發學習不會有太大影響,因為後續的文章後我會一步步帶了解。
源碼運行體驗
首先看下源碼(完整版)的運行的效果,順便驗證自己的開發環境是否OK。
步驟(保姆級)如下:
1. 官方跳轉github項目,複製https克隆地址
2.通過Git下載然後IDE導入,或者WebStorm 通過Get from VCS直接創建
3.切到程式碼分支(重要)到all-blocks,因為默認master 是簡版,沒有包含全部演示頁面
4.開啟 Terminal進入項目 或WebStorm底部terminal直接打開
5.運行依賴安裝和運行命令,正常會出現App running at 提示
npm isntall # 安裝依賴 # npm isntall --force # 依賴安裝出錯時嘗試 # npm audit fix --force # 安裝還不行時候嘗試 npm start # 開發模式編譯運行
6. 通過 //localhost:8000 訪問,內部的更多頁面可自行體驗,下載源碼及體驗這個完整版的目的是後續如果有需要類似的頁面,可以做很好的參考甚至直拷貝接使用。
官方在線預覽地址 //preview.pro.ant.design
模板項目
創建腳手架
由於依賴初始化受外部網路的不穩定影像,官方建議的是使用yarn
管理包
關於yarn也是一種JS包的管理工具,相比npm它有安裝速度快、版本統一等優點,想了解更多參考//yarn.bootcss.com/docs
1. 創建模板項目,打開終端切斷換到對應目錄,通過命令執行腳手架
# 使用 yarn yarn create umi daqitemplete
2. 按照終端提示提示,選擇 ant-design-pro模板 -> 選擇JavaScript語言 -> 選擇simple基礎模板
antd 的模板中 simple 是基礎模板,只提供了框架運行的基本內容,complete 包含 antd 的集成方案,不太適合當基礎模板來進行二次開發,和上邊源程式碼運行一樣,比較適合參考開發。
3. 安裝依賴和運行腳手架項目
官方操作影片://gw.alipayobjects.com/os/antfincdn/0wSaPUs36y/My%252520Sequence_1.mp4
cd daqitemplete && tyarn # 或 cd daqitemplete && npm install # 開發模式運行 npm run start
除了命令行也同樣可以導入WebStorm中配置運行,然後瀏覽器通過訪問 //localhost:8000 預覽,可以從下邊的截圖中看到只包含了最簡單的三個頁面簡單後台
Tips:Antd有個很好用的工具插件可以方便添加區塊和模版,可以通過命令打開後重新運行項目查看一下,具體的使用將在開發實戰篇用應用。
# 打開開發模式下頁面右下角的小氣泡,方便添加區塊和模版等pro資產 tyarn add @umijs/preset-ui -D # 或 npm install --save-dev @umijs/preset-ui
項目結構
腳手架會生成一套完整的開發框架,提供了涵蓋後台開發的各類功能和坑位,官方給出的目錄結構說明如下,有些在我們的Mock項目中用不到的,後續我逐步刪掉,大家到時候注意下項目源程式碼即可。
├── config # umi 配置,包含路由,構建等配置 ├── mock # 本地模擬數據 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地靜態資源 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 業務頁面入口和常用模板 │ ├── services # 後台介面服務 │ ├── utils # 工具庫 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.ts # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json
程式碼結構推薦
對於頁面的開發,官方還給了一個推薦規範,目的讓開發能夠更方便的定位到相關頁面組件程式碼,該規範只作為指導。
src ├── components └── pages ├── Welcome // 路由組件下不應該再包含其他路由組件,基於這個約定就能清楚的區分路由組件和非路由組件了 | ├── components // 對於複雜的頁面可以再自己做更深層次的組織,但建議不要超過三層 | ├── Form.tsx | ├── index.tsx // 頁面組件的程式碼 | └── index.less // 頁面樣式 ├── Order // 路由組件下不應該再包含其他路由組件,基於這個約定就能清楚的區分路由組件和非路由組件了 | ├── index.tsx | └── index.less ├── user // 一系列頁面推薦通過小寫的單一字母做 group 目錄 | ├── components // group 下公用的組件集合 | ├── Login // group 下的頁面 Login | ├── Register // group 下的頁面 Register | └── util.ts // 這裡可以有一些共用方法之類,不做推薦和約束,看業務場景自行做組織 └── * // 其它頁面組件程式碼
React對比Vue
同vue一樣React
也一個JavaScript庫,還有一個angular是目前比較流行的三大前端編程庫,在我的淺顯理解都是為了更好更快的做前端的開發,這裡不會對其各種不同、優缺點做展開說,想知曉的網上一大堆自行搜索,還是那句話測試平台項目中只是掌握其如何應用。因此下邊我也只給出兩種庫demo項目的頁面編寫對比,先了解下編碼不同之處就行。
從疊在一起的兩個模版項目來看,首先是文件格式不同,然後最大的卻別是語法格式上,vue頁面是模組的化的,之前的提測平台系列講過,分了 <template>
、 <script>
、 <css>
三部分,而react採用的是 JSX語法 ,從對比圖上看script和html相關寫在了一起。
JSX 是一個 JavaScript 的語法擴展,將HTML和JavaScript二者共同存放在稱之為「組件」的鬆散耦合單元之中,來實現關注點分離,簡化來說當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析。React不強制要求使用 JSX。
具體JSX語法怎麼寫,Ant Design組件怎麼應用,筆者也是在邊學邊整理中,期待一下自我的挑戰吧,到此本篇前端基礎就分享這麼多,後邊將陸續開始項目開發實戰內容分享,歡迎長期關注一起交流成長!
最後強調一下,本篇前端基礎內容中給出很多鏈接,也涉及很多知識點,這些如果你有時間也感興趣就大致快速學下,有助於你後邊的理解和學習,但不必糾掌握沒、是否需要全部深入學習等問題,因為學習的目的不同,過分看重只會讓你懷疑人生以及打擊積極性。
擴展學習推薦
- Web開發者指南 //developer.mozilla.org/zh-CN/docs/Web/Guide
- react官網 //react.docschina.org/
重要的資源