模塊準備 · Sword開發手冊

## 前言 * 這一節是重點內容，將向大家介紹如何在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模塊吧！