mockjs用法
/*
* @Author: Qingshan_Chen
* @Date: 2022-01-18 10:02:15
* @Description: 项目描述
* @LastEditors: Qingshan_Chen
* @LastEditTime: 2022-01-20 18:29:17
* @FilePath: \app\src\pages\home\index.js
*/
//就三点引入，引入axios请求，导入引入mock.js语法，然后遍历渲染数据
import { withRouter } from 'react-router-dom' import { connect } from 'react-redux' import './index.less'
import React, { useState ,useRef,useEffect, useCallback} from 'react'; import { Drawer, Button, Space, Radio } from 'antd'; import 'antd/dist/antd.css' import axios from "axios"; //引入axios请求数据方式 import Mock from 'mockjs' //es6语法 const list={} function Home() { // const [state,settate]=useState useEffect(()=>{ // console.log(label.current.style.width); // console.log(btnRef.current.style.width); // console.log(btnRef) },[])
const [listList,setListList] = useState([]) // Mock.setup({ // timeout:500 // }) Mock.mock("http://localhost:3000/#/table/basic/dataSource1",function() { return Mock.mock({ "code":200, "msg":"", "result":{ "list|5":[{ "id|+1":1, "userName":"@cname", "sex|0-1":"1", "status|1":[1,2,3,4,5], "interest|1":[1,2,3,4,5], "birthday":"2020-5-20", "address":"@province", "time":"09:00" }], "page":1, "page_size":1, "total":100 } }) }) // 接收请求： useEffect(()=>{ axios.get("http://localhost:3000/#/table/basic/dataSource1")//接口地址与拦截地址要一致 .then((res)=>{ setListList(res.data.result.list) }) },[]) return (
export default connect()(withRouter(Home))
import { withRouter } from 'react-router-dom' import { connect } from 'react-redux' import './index.less'
import React, { useState ,useRef,useEffect, useCallback} from 'react'; import { Drawer, Button, Space, Radio } from 'antd'; import 'antd/dist/antd.css' import axios from "axios"; //引入axios请求数据方式 import Mock from 'mockjs' //es6语法 const list={} function Home() { // const [state,settate]=useState useEffect(()=>{ // console.log(label.current.style.width); // console.log(btnRef.current.style.width); // console.log(btnRef) },[])
const [listList,setListList] = useState([]) // Mock.setup({ // timeout:500 // }) Mock.mock("http://localhost:3000/#/table/basic/dataSource1",function() { return Mock.mock({ "code":200, "msg":"", "result":{ "list|5":[{ "id|+1":1, "userName":"@cname", "sex|0-1":"1", "status|1":[1,2,3,4,5], "interest|1":[1,2,3,4,5], "birthday":"2020-5-20", "address":"@province", "time":"09:00" }], "page":1, "page_size":1, "total":100 } }) }) // 接收请求： useEffect(()=>{ axios.get("http://localhost:3000/#/table/basic/dataSource1")//接口地址与拦截地址要一致 .then((res)=>{ setListList(res.data.result.list) }) },[]) return (
{
listList.map(it=>{
return
)
}
{it.userName}
}) }export default connect()(withRouter(Home))