React Ant design pro 访问服务器接口，获取数据显示

                                                          React Ant design pro 访问服务器接口

一、前两天更新了Ant design pro环境搭建，需要了解的小伙伴可以看一下之前的内容，还有react基础教程噢。

二、框架搭建完后，一般第一时间都是查看官方文档，但我依然看的还是一头水务，有许多知识点还是不太了解。

       官方文档地址：https://pro.ant.design/docs/getting-started-cn

       里面已经详细的介绍了一些最基本的框架基础，每个文件夹是做什么用的，都已经进行了阐述，文档一定要多读几遍，多读几遍才能看到一些已经被自己忽略掉的知识点。刚拿到框架，无非就是了解页面该怎么写，菜单、路由在哪控制，与服务器该怎样进行通讯获取数据。这里我主要说一下怎么连接数据库，拿取数据显示。

三、知识点准备：

整个框架核心，应该了解一下dva是怎么操作数据的。dva官方地址：https://dvajs.com/guide/,这里就不在过多赘述了。

      官方文档给出的请求流程：

      在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1. UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.ts 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 model。

四、前端部分编写

先看一下我的目录文件,需要创建或者更改的文件我都已经标注：