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数据的删减

项目需要时再写吧

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ykmk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值