ant design pro 當中改變ant design 組件的樣式和 數據管理

ant design pro 簡介

官網簡介

鏈接 https://pro.ant.design/docs/getting-started-cn
項目結構 https://github.com/ant-design/ant-design-pro

Ant Design Pro 是一個企業級中后台前端/設計解決方案，我們秉承 Ant Design 的設計價值觀，致力於在設計規范和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提升企業級中后台產品設計研發過程中的『用戶』和『設計者』的體驗。隨着『設計者』的不斷反饋，我們將持續迭代，逐步沉淀和總結出更多設計模式和相應的代碼實現，闡述中后台產品模板/組件/業務場景的最佳實踐，也十分期待你的參與和共建。

我的理解

ant design pro 是快速搭建web端的后台管理信息系統的框架，在其中，我們可以使用ant design 這個ui 庫，也可以使用框架中提供的很多頁面，里面也存在圖表等一些組件，讓我們不必要畫更多時間去學習echart，highchart，這種圖表插件。

可能有人會存在疑問，我們通過css來改變ui庫的原始css屬性沒那么容易。ant design pro 提供了一種less寫法，我們可以給我們所使用的組件綁定一個class的名字，然后確定element當中我們需要改變樣式的元素類名，然后通過嵌套選中的形式，就可以改變我們想改變的元素樣式。

第一個問題：改變ant design 的原始樣式

less 文件

.and_collapse_list{
    td[class='ant-table-row-cell-break-word']{
        position: relative;
        line-height: 20px;
    }
}

jsx文件

 // 1. 引入我們要使用的less
import style from "./collapselist.less"
<Table columns={columns} dataSource={iOSList} bordered className={style.and_collapse_list} /> 

在這里，我給Table 綁定了 and_collapse_list 這個類名，然后通過 td[class='ant-table-row-cell-break-word'] 標簽名字+ class 的方式 確定一個元素，改變他的樣式。

第二個問題 ant design pro 當中數據管理的方式

在pro項目當中，存在一個封裝好的請求方式"umi-request"

umi-request鏈接：https://github.com/umijs/umi-request

我們可以在這個基礎方進行二次封裝，也可以直接使用他發起異步請求

一般我們數據維護需要三個文件

• 存放數據請求的js 可以叫api.js
• 數據管理的js 可以叫model.js
• 視圖容器jsx 這個就是你的頁面，通過他發起請求，渲染數據
• 引入我們新建的model dva.js 里面 app.model({ namespace: '命令空間', ...(require('路徑').default) });

話不多說直接上代碼

api.js

// 這里用到的是我們二次封裝好的request.js
import request from '@/utils/request';

// 這里導出一個async 或者 普通函數都不影響
export async function getA(newData) {
    return request("/a",{
        method: "post",
        headers: {},
        data: newData
    })
}

export  async function getB(newData) {
    return request("/b",{
        method: "post",
        headers: {},
        data: newData
    })
}

model.js

import {getA,getB} from 'api.js'
const CollapseModel = { 
    // 這里是每一個model的命名空間，是唯一的。
    namespace : "collapse",
    // 這里就是倉庫里面的值
    state : {
        AndInfo:{},
        IosInfo:{}
    },  
    // 這里存放異步方法
    effects : {
      // * 是es6當中generetor 生成器函數
      // {payload,callback} 這里是傳遞過來的參數 用到了解構賦值
      // call 是用來調用異步方法的，如果你想在jsx當中使用異步請求回來的值需要使用這個回掉函數。
      // put 是用來調用reducer當中的同步的方法
        *getA({payload,callback},{call,put}) {
          
            let {newData} = payload
          const data =   yield call(getA,newData)
          if(callback){
            // 把data傳遞給我們的callback，讓我們jsx當中對的callback可以使用它
            callback(data)
          }
        },
        *getB({payload,callback},{call,put}) {
            let {newData} = payload
            const data =   yield call(getB,newData)
            if(callback){
              callback(data)
            }
        },
    },
    // reducer 是一個純函數  這個可以去百度了解一下。同樣的輸入換取同樣的輸出
    // 如果對概念不理解，那么就可以仿照我的寫法。記住不可以直接改變state
    reducers: {
        saveA(state,{payload}) {
            let newState = JSON.parse(JSON.stringify(state))
            newState.IosInfo =payload.data
            console.log(newState)
            return newState
        }
    },
}
export default CollapseModel

jsx 我們的頁面

// 必須引入這個高階函數，把我們的組件和model聯系起來，如果熟悉redux的話，實際就是在我們的組件外層包裹了Provider 並且提供了一個store。讓倉庫的數據穿透我們的組件
// 高階函數就是將函數作為參數傳遞給另一個函數
import { connect } from 'dva'; 
// 這是一個修飾器寫法 實際是通過connect函數把我們的組件傳遞進去，並且返回一個新的組件
// 第一個參數是mapstate 是對傳遞過來的值進行處理，類似vue中的計算屬性，第二個參數就是組件
// 比如在這里我要使用 model 文件中 state 里面的 AndInfo
@connect((collapse) => ({
    AndInfo:collapse.AndInfo
}))

//使用這個值 是通過this.props獲取的
componentDidMount() {
  const {AndInfo,dispatch} = this.props
  // 調用model 里面的方法 必須通過dispatch
  dispatch({
    type:"collapse/getA",
    payload:{
        newData:{a:"123"}
    },
    // 因為我們把一個函數當作一個變量進行傳遞所以在這個過程當中一定需要綁定this
    callback:this.callbackA.bind(this)
  })
}
           
callbackA = (res) =>{
    ...
   
  }