## 前言 * 这一节是重点内容，将向大家介绍如何在sword上进行开发一个CRUD的完整模块 * 在开发之前，我们需要配置一下mock数据，根据接口返回动态生成菜单按钮 * 当切换成服务模式的时候，则从菜单管理模块进行可视化操作即可动态生成菜单 ## 增加菜单接口返回数据 1. 到mock文件夹中找到menu.js，加入红框内的json数据 ![](https://box.kancloud.cn/61ed23eb5f33daf3080b04ebd9511bf2_1666x896.png) 2. 返回系统，退出系统后重新登录，发现，多了一个菜单，并且点击后就跳转到了我们先前写到Demo页面 ![](https://box.kancloud.cn/8d2c0c69d8ddfed72d322007809c427f_1042x900.png) 3. 但是我们发现菜单中显示到是英文，而不是中文，这是因为框架在这一块采用了国际化，所以要显示对应到语言文字，我们需要进行菜单到国际化配置 4. 根据如下截图找到对应到三个国际化文件 ![](https://box.kancloud.cn/c3b70e7b3c1e23a0ac4a67fa1f904275_780x1828.png) 5. 增加如下配置，对应的检索就是根据返回的code字段，子模块则用点号分割（例如demo模块就是menu.platform.demo，而menu是前缀，每个都需要带上） ![](https://box.kancloud.cn/c4eb40648fcd55f93d150b5b0d6e889b_1150x518.png) 6. 改好后刷新页面，发现国际化配置成功 ![](https://box.kancloud.cn/fc504daed211be629ab9be4557f10674_1046x910.png) 7. 系统右上角切换成因为，发现整个菜单也统一切换成了英文 ![](https://box.kancloud.cn/34262ac3da6143da8a4a20176652060d_620x394.png) ![](https://box.kancloud.cn/d4c03991ea7cbd4c67b1228d0d312948_1058x760.png) 8. 更多国际化配置，请参考ant design pro官方文档：https://pro.ant.design/docs/i18n-cn ## 增加按钮接口返回数据 1. 到mock文件夹找到menu.js，加入红框内的json数据 ![](https://box.kancloud.cn/ce4a0135d4474f81221dafd4daf4b8cd_1920x1682.png) 2. 第一层code则是对应菜单模块的code，后续列表也传入这个code，就可以检索到他所属的按钮集合从而显示在页面上了 3. 下面我们就开始编写一个基础的crud模块吧！