码迷,mamicode.com
首页 > 其他好文 > 详细

前端模拟数据的4种技术方案

时间:2019-06-15 20:10:04      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:ops   react   接口   div   异步   end   efault   ora   前端   

一、模拟死数据

1、写在函数的变量里面或者写在全局变量

let listData = [{id: ‘001‘, name: ‘banana‘},{id: ‘002‘, name: ‘orange‘},{id: ‘003‘, name: ‘apple‘}];

2、写在defaultProps里面,或者this.state里面

如果前端框架用的是react,把假数据写在defaultProps里面,然后解构读取this.props,或者把假数据写在this.state里面,然后解构读取this.state。

// render函数
render() {
    let {data} = this.props;

    return (
      <div>
        <table>
          <tbody>
            <tr><th>id</th><th>name</th></tr>
            {
              data.map((item, i) => {
                return <tr key={i}><td>{item.id}</td><td>{item.name}</td></tr>
              })
            }
          </tbody>
        </table>
      </div>
    );
  }


// defaultprops
FakeData.defaultProps = {
  ‘data‘: [
      {
          ‘id‘: ‘001‘,
          ‘name‘: ‘banana‘
      },
      {
          ‘id‘: ‘002‘,
          ‘name‘: ‘orange‘
      },
      {
          ‘id‘: ‘003‘,
          ‘name‘: ‘apple‘
      }
  ]
};

二、模拟异步数据

1、写函数模拟异步

2、从接口读取数据

前端模拟数据的4种技术方案

标签:ops   react   接口   div   异步   end   efault   ora   前端   

原文地址:https://www.cnblogs.com/camille666/p/fe_fake_data.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!