目录
题记:
本篇是使用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数据的删减
项目需要时再写吧