💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 一、概述 以下的说明,完全依赖于本章节的主章节文档中的实例,基于代码生成器生成的文件,生成的文件根目录,为web\pcv1; ## 二、配置处理 ### **api.js** 将生成的samplecase.api.js中的代码,拷贝到**src>services>api.js**中; 生成的: ![](https://img.kancloud.cn/84/b9/84b93ce0100e67e23072679c45756005_1366x736.png) 合并后: ![](https://img.kancloud.cn/45/93/459321c57c7aa8e428194a0b4971c43c_1366x736.png) >[danger] 这里需要注意,合并的时候,保持原文件的格式,不然会导致诸如Request failed with status code 404等错误; ### **router.map.js** 将生成的samplecase.router.map.js中的代码,拷贝到**src>router>async>router.map.js**中去; 生成的: ![](https://img.kancloud.cn/25/85/25858d9ac404c87f1fa2309db4b1a49d_1366x736.png) 合并后: ![](https://img.kancloud.cn/c9/fd/c9fda39847502b58f30b42ff1f644a7c_1366x736.png) >[danger] 注意: > 1、考虑到路由菜单的层级,一般不直接放到根目录下,因此,默认的,生成了一个父级路由,配合后台路由设置中的定义,形成菜单目录和菜单项,因此,如果是一个模块,已经有了父路由,需要把重复的父路由剔除,不必全部拷贝进来; > 2、具体到这里实例,如果**父级菜单**已经有了,则仅需要拷贝**示范列表**路由; > 3、pcV1这里针对每个实体生成三个路由项(对应三个独立页),而pcV2仅生成一个列表路由项(仅一个列表独立页,新增和修改放到列表里面弹出); ## 三、页面处理 将生成的web/pc/pages目录下生成文件,拷贝到工程目录下pages/business之下(生成的文件夹必须放到business下,如果当前工程还没有创建该文件夹请手动添加); ![](https://img.kancloud.cn/6b/94/6b94fb972cecdbcd713379dbc8810194_1366x736.png) ## 四、路由配置 ### **后台注册路由** 增加父路由菜单: ![](https://img.kancloud.cn/c8/29/c829ef030d59bf1a03fe92f85acccf47_1366x736.png) 这里,路由组件和路径,依据刚才生成的实例,都填写sample; 在新的父路由下新增子路由: ![](https://img.kancloud.cn/30/ce/30ce5027555e7824df6637c240e2c0e5_1366x736.png) 注意,这里,如果是pcV1版本,除了列表路由外,还需要注册新增和修改两个路由,设定为不显示,与列表路由为兄弟关系; ![](https://img.kancloud.cn/e7/bd/e7bd8356a5583374f1fae8cb122c70db_1366x736.png) ![](https://img.kancloud.cn/13/8b/138bcb1bbc138ae0ed71ee1ea43db980_1366x736.png) ### **角色分配路由** 给指定的角色分配刚才增加的路由,那些拥有该角色的账号登录系统,就能看到新增加的测试业务示范实例了; ![](https://img.kancloud.cn/bf/47/bf473e0c0b2a5e0cbf29625954bca8e8_1366x736.png) > 必须把路由和子路由都勾选上; ## 五、效果 重新登录,可以看到,效果出来了: 列表页: ![](https://img.kancloud.cn/f5/c8/f5c84cda1d84c1aac5db3e1c81a41260_1366x736.png) 新增页: ![](https://img.kancloud.cn/65/10/6510338d6195e733af9d0644c244dcdf_1366x736.png) 修改页: ![](https://img.kancloud.cn/b0/b1/b0b145d6f74cb5876e0b5685339328d0_1366x736.png) 查看页: ![](https://img.kancloud.cn/a7/6b/a76b554e59a9bf5526762362ea40a934_1366x736.png) 删除: ![](https://img.kancloud.cn/0c/03/0c033cd93ff4480d03faa04c8598e333_1366x736.png) >[info] 你看,一行代码没写,前后端分离的完整功能,全部实现了,是不是很省力?