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 (

    <div>

     {

        listList.map(it=>{

          return <h1 key={it.id}>{it.userName}</h1>

      })

     

    }

    </div>

  )

}

export default connect()(withRouter(Home))