Mock数据(二)

目录

题记：

 一、使用mock模拟出数据并且在浏览器中能看到

 二、将mock数据渲染到antd表格中

三、实现对Mock数据的删减

---

题记：

本篇是使用Mock数据渲染的实例，主要实现使用Mock生成数据并渲染到antd表格当中，并且实现在表格中对mock数据的删减。

由于作者初学相关前端代码，肯定文章大有错误，欢迎大家在评论区指正，万分感谢！

一、使用mock模拟出数据并且在浏览器中能看到

代码：

export default {
    //最常见生成mock数据方法
    "GET /text1": {
        data: [{ title: '单位建筑面积能耗', nowdata: '2560.9kgce/m2', hisdata: '2560.9kgce/m2' },
        { title: '人均综合能耗', nowdata: '2560.9kgce/人', hisdata: '2560.9kgce/人' },
        { title: '综合能耗', nowdata: '2893.15kgce', hisdata: '2893.15kgce' },
        { title: '工业负荷能耗', nowdata: '4399kgce', hisdata: '4399kgce' },
        { title: '商业负荷能耗', nowdata: '5533kgce', hisdata: '5533kgce' },
        { title: '居民负荷能耗', nowdata: '3455kgce', hisdata: '3455kgce' },
        { title: '学校负荷能耗', nowdata: '2333kgce', hisdata: '2333kgce' },
        { title: '充电桩能耗', nowdata: '1111kgce', hisdata: '1111kgce' }]
    }
}

浏览器查看到的json数据：

二、将mock数据渲染到antd表格中

流程：

1，使用umi包装好的request插件--该插件可以发起任意的的异步请求（GET/POST..）

2，通过该插件获取mock定义到的数据，具体代码见演示代码1，获取到数据之后抛出封装好的参数

3，使用react-hooks语法在函数式组件中获取数据、传递数据，具体见演示代码2

4，通过步骤3已经拿到了数据，下一步需要将数据进行渲染，见演示代码3。

演示代码1：

import { request } from 'umi'; //请求数据的一个方法，详见插件
//向mock实现数据的异步请求，还不是很懂
export const opeA1Get = () => {
  //导出、抛出  自定义的opeA1Get
  return request('/text1', {
    //抛出的相当于一个API，到mock那里去了,具体就是个那个地址
    method: 'GET',
  });
};

演示代码2：

let [data, setData] = useState([])
    useEffect(() => {
        opeA1Get().then(res => {
            console.log('打印定义的MOCK数据', res);
        })
    }, [])//数组起到监听作用，这里只执行一次，故是一个空数组，当数组里面有参数，参数每改变一次，则会执行一次。

浏览器打印及表格的呈现：

 

演示代码3：

   //usedata和useeffect是react-hooks中的一种语法
    // 这里将空数组传递给定义的两个参数
    let [data, setData] = useState([])
    useEffect(() => {
        opeA1Get().then(res => {
            console.log('打印定义的MOCK数据', res);
            setData(res.data)
        })
    }, [])//数组起到监听作用，这里只执行一次，故是一个空数组，当数组里面有参数，参数每改变一次，则会执行一次。

三、实现对Mock数据的删减

项目需要时再写吧