Ant Design Pro 从零到一（Mock 使用）

认识 Mock

学到这里就算是开始踏入 AntD 的门，然后我们还得学习一下常用的一些操作，例如 Mock。

针对与 Mock 他大致就是用来模拟数据的，为什么会有它的出现呢？因为现在前后端开发基本是分离的，但是数据结构一般都会先定好，在日常开发中，为了前端的进度不受到后端的影响，常用 Mock 来做虚拟数据来模拟后端发来的请求。

本文只是简单的介绍一下 Mock 的使用，如果要详细学习请自行百度

Mock 基本格式

export default {
  'GET /api/getValue': {
    data:[{
      name:'zhangsang',
      sex:'男'
    },{
      name:'李四',
      sex:'男'
    },]
  },
};

我们稍微变一下型，为了看起来更加美观就变成了这样

const getList = ()=>{
    const result = {
        success:true,
        data:[
            {
                id:1,
                name:'test01',
                sort:1
            },{
                id:2,
                name:'test02',
                sort:2
            }
        ]
    };
    return res.json(result);

}
export default {
    'GET /api/testList':getList,
}

在 return 的时候，我们看到了 res.json()进行了一下 json 格式转化，因为我们在实际开发中，基本前后端交互都是靠 JSON。

然而我们一般来说发送请求都是异步的，这时候 Mock 是怎么做的呢？

import {Request,Response} from "express";

const getList = async (req:Request,res:Response)=>{
    const result = {
        success:true,
        data:[
            {
                id:1,
                name:'test01',
                sort:1
            }
        ]
    };
    return res.json(result);

}
export default {
    'GET /api/testList':getList,
}

从上面可以看到就是简单的加了 async 关键字，让后加了 request 和 response

认识 Service

在上面说了 Mock 的一个基本使用，那他是如何工作的呢？

前面已经说了，Mock 相当于模拟服务器数据，那请求数据的地方在哪里呢？那就是 Service 的文件夹中，这时候我们大致看一下 Service 的基础结构，方便后面的 demo 看懂。

import {request} from "umi";

export async function getList(){
    return request('/api/testList');
}

或者是

export async function fakeAccountLogin(params: LoginParamsType) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}

这基本就是一个 service 的构成，其中 export async function 都是关键字，request()中的'/api/tesetList'就是我们之前写的 Mock 中的接口。

PS：

request():其实结构是下面这样，如果是 ｇｅｔ 请求可以简写。

request('/api/getValue',{
method://请求方式 GET、POST、PUT、DELETE
data: //请求参数
})

来个 Ｄｅｍｏ

我们将 test 文件夹下面的 index.tsx 写入以下内容

import React from "react";
import ProTable from "@ant-design/pro-table";
import {ProColumns} from "@ant-design/pro-table";
import {getList} from "@/services/test";
import {PageContainer} from "@ant-design/pro-layout";
import {Card} from "antd";
const TestList : React.FC= ()=>{
    const columns:ProColumns[]=[
        {
            title:'id',
            dataIndex:'id'
        },{
            title: 'name',
            dataIndex: 'name'
        },{
            title: 'sort',
            dataIndex: 'sort'
        }]

    return <div>
       <PageContainer>
           <Card>
               <ProTable columns={columns}
                         request={async (params) =>{
                             let result = await getList();
                             return result;
                         }}/>
           </Card>
       </PageContainer>
    </div>
}

export default TestList;

然后在 service 文件夹下新建 test.tx 文件然后写入以下内容：

import {request} from "umi";

export async function getList(){
    return request('/api/testList');
}

接下来就是在 Mock 中新建立 test.tx 文件写入

import {Request,Response} from "express";

const getList = async (req:Request,res:Response)=>{
    const result = {
        success:true,
        data:[
            {
                id:1,
                name:'test01',
                sort:1
            },{
                id:2,
                name:'test02',
                sort:2
            },{
                id:3,
                name:'test03',
                sort:3
            },{
                id:4,
                name:'test04',
                sort:4
            }
        ]
    };
    return res.json(result);

}
export default {
    'GET /api/testList':getList,
}

接下来运行你的项目，访问，你就会看到这样

相关链接

上一篇：👀

Ant Design Pro 从零到一（页面创建）

下一篇：👀

Ant Design Pro 从零到一（学习 Model）

Ant Design Pro 系列：👀

Ant Design Pro 从零到一教程

React 从零到一 Demo 演练（上）

React 从零到一 Demo 演练（下）

Ant Design Pro 从零到一（认识 AntD）

Ant Design Pro 从零到一（页面创建）

Ant Design Pro 从零到一（Mock 使用）

Ant Design Pro 从零到一（学习 Model）

Ant Design Pro 从零到一 （总结）