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,數據流網路請求等各個方面。為中後台中常見的方案提供了最佳實踐來減少學習和開發成本。同時為了提供更加高效的開發體驗,提供了一系列模板組件,ProLayoutProTableProList 都是開發中後台的好幫手,可以顯著的減少樣板程式碼。可以通過下面的大圖來了解整個 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組件怎麼應用,筆者也是在邊學邊整理中,期待一下自我的挑戰吧,到此本篇前端基礎就分享這麼多,後邊將陸續開始項目開發實戰內容分享,歡迎長期關注一起交流成長!

 

最後強調一下,本篇前端基礎內容中給出很多鏈接,也涉及很多知識點,這些如果你有時間也感興趣就大致快速學下,有助於你後邊的理解和學習,但不必糾掌握沒、是否需要全部深入學習等問題,因為學習的目的不同,過分看重只會讓你懷疑人生以及打擊積極性。

 

擴展學習推薦

重要的資源

關於後續更多進展和分享歡迎持續關注公眾號或部落格。