目標：實現一個基礎模組

基礎模組

基礎模組的定義

• 基礎模組（瞭解一個基礎模組包含哪些基本功能，包括基本功能的展示方式等）

基礎模組中前置知識準備

• 各功能元件介紹（瞭解各個模組使用到的元件以及元件的在使用過程中的注意事項）
  • 查詢操作的基本元件
    1. Form 表單的使用
    2. Table 元件的使用
    3. Loading 控制
  • 新增/修改操作的基本元件和常用元件
    1. Modal 元件使用
    2. Form 表單深入
    3. message 元件提示
    4. Switch 控制
    5. Select 選擇
    6. Input 輸入框
    7. InputNumber 數字輸入框
    8. 上傳圖片
    9. 上傳檔案/下載檔案
  • 刪除操作的基本元件
    1. Popconfirm 氣泡確認框

開始實踐

專案拉取和安裝

1. git 拉取專案
2. 安裝專案依賴包

建立頁面

1. 建立頁面
2. 基本業務操作的相關元件渲染

資料互動

資料渲染（瞭解如何獲取資料，並將資料渲染出來？）

1. react 生命週期
2. dva框架的資料流向（深入理解頁面、models、services 三者之間的關係）
   1. 資料流向說明
   2. 高階函式@connect
   3. dispatch action
3. ant design pro 的使用（在實現資料渲染的程式碼中會遇到以下知識點）
   1. ES6 解構賦值
   2. async 和 await
   3. yield
   4. call put

資料更新（新增修改刪除操作之後，要如何更新資料？）

1. 介面規範（清楚各種型別的介面返回什麼樣的資料）
2. 新增修改刪除的處理

打包釋出

打包壓縮命令

釋出打包的檔案

補充說明

1. CMS管理後臺框架 (Ant Design Pro v1.0)

作者簡介：李堯暉，蘆葦科技web前端開發工程師，代表作品：飛花亭小程式、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、微信公眾號開發、微信小程式開發、小遊戲製作、企業微信製作、H5建設，專注於前端框架、服務端渲染、SEO技術、互動設計、影象繪製、資料分析等研究。

歡迎和我們一起並肩作戰： [email protected]
訪問 www.talkmoney.cn 瞭解更多

提供深圳微信公眾號外包，高質量的釘釘開發，專業的企業微信建設，東莞微信小程式開發，廣州小遊戲製作，廣東H5建設