基于ant design pro 的前端表格开发（与本地后端联调）——针对前端小白

任务目标：基于ant design开发自定义自己的表格，进行增删改查并与本地后端进行联调
适用人群：对前端开发比较小白的人群，本文只讲逻辑步骤，类似于操作大纲。具体详细步骤后续有时间的话会一一讲解。
任务所需： ant design pro官方项目 ，这样比较容易跑起来。

效果图（我用的另一个ant design项目效果图，没用官方那个，但讲解代码是用的上述链接代码中的。）

运行ant design pro 项目

先根据上文中的链接操作好，只需要看开始使用和启动项目即可，文件夹结构了解即可。看看项目本来的运行效果。（由于官方文档有较详细的操作指南，这一步骤就省略了，如果大家有什么不懂的，欢迎留言讨论。

复制自定义表格页面文件夹

首先我们考虑的是在不更换demo其他页面的情况下进行操作，故对表格页面文件夹进行复制粘贴，并进行自命名（customdatalist)，当然，你要是对自己有自信，也可以就在原表格页面文件进行修改。
根据文件夹结构，定位到pages页面下，Tablelist，根据名字就是我们要找的，复制粘贴重命名即可，本文命名为：CusTablelist。

更改config路径配置

为了将我们自定义的表格页面展示出来，需要修改配置文件夹中，即config/route.ts中项修改为自己文件夹项

{
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './Tablist', 
  },

中 component: './Tablist',修改为： component: './CusTablist',

与后端数据进行关联

为了与后端数据进行关联，需要对前端进行设置。有两种设置方式，最正规的就是修改config/proxy.ts中dev模式的后端网址，并且在调试的时候运行yarn run dev进入调试模式，这种方式需要在后端写上包括登陆界面等所有数据处理方式。但是本项目只是为了自定义表格，故采取另一种简便方法，只用处理表格数据即可，即定位到前端与后端进行交互时的函数那里，将其修改为服务器端路径即可。这样我们的后端就只用处理表格数据

编写表格代码

根据需要，模仿着表格进行列设置即可。需要注意三点，一是表格列的设置；二是数据格式的设置，在编辑器中对于数据格式设置即可。

前后端联调

修改完成后开启后端进行测试即可，最好在后端开启固定端口，不然需要经常改前端与后端的路径代码。

总结

本文基于ant design 亮点就是经过本文设置，后端可以不用处理所有ant design前端数据，只需要处理表格数据即可，以上省略的步骤有人看再更吧，如果要写的太详细了文章就太长了。

本人承接各种计算机项目，价格普通大学生就能接受，物美价廉，质量可靠，包让老师和客户满意。欢迎联系，私信即可。