ant design pro 当中改变ant design 组件的样式和 数据管理

Posted 2020-12-14 rembang

ant design pro 简介

官网简介

链接 https://pro.ant.design/docs/getting-started-cn

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 这个就是你的页面，通过他发起请求，渲染数据

话不多说直接上代码

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) =>{
    ...
   
  }