ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、概述 以下的说明,完全依赖于本章节的主章节文档中的实例,基于代码生成器生成的文件,生成的文件根目录,为web\pcv2; ## 二、配置处理 ### **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/cd/55/cd55c208c34faf57af2aa6b3fc07d4e5_1366x736.png) 合并后: ![](https://img.kancloud.cn/be/d9/bed975613747ddd074513cef5b1198fb_1366x736.png) >[danger] 注意: > 1、考虑到路由菜单的层级,一般不直接放到根目录下,因此,默认的,生成了一个父级路由,配合后台路由设置中的定义,形成菜单目录和菜单项,因此,如果是一个模块,已经有了父路由,需要把重复的父路由剔除,不必全部拷贝进来; > 2、具体到这里实例,如果**父级菜单**已经有了,则仅需要拷贝**示范列表**路由; > 3、pcV1这里针对每个实体生成三个路由项(对应三个独立页),而pcV2仅生成一个列表路由项(仅一个列表独立页,新增和修改放到列表里面弹出); ## 三、页面处理 将生成的web/pc/pages目录下生成文件,拷贝到工程目录下pages/business之下(生成的文件夹必须放到business下,如果当前工程还没有创建该文件夹请手动添加); ![](https://img.kancloud.cn/3b/e0/3be0b87b1c0b3c99e077151ebdd56b1a_1366x736.png) ## 四、路由配置 ### **后台注册路由** 增加父路由菜单: ![](https://img.kancloud.cn/c8/29/c829ef030d59bf1a03fe92f85acccf47_1366x736.png) 这里,路由组件和路径,依据刚才生成的实例,都填写sample; 在新的父路由下新增子路由: ![](https://img.kancloud.cn/30/ce/30ce5027555e7824df6637c240e2c0e5_1366x736.png) ### **角色分配路由** 给指定的角色分配刚才增加的路由,那些拥有该角色的账号登录系统,就能看到新增加的测试业务示范实例了; ![](https://img.kancloud.cn/be/f1/bef15d311130c7795f3d4237f3333ba2_1366x736.png) ![](https://img.kancloud.cn/6a/7b/6a7b319ad1b4df5a61137209c697ba91_1366x736.png) > 必须把路由和子路由都勾选上; ## 五、效果 重新登录,可以看到,效果出来了: 列表页: ![](https://img.kancloud.cn/b5/69/b569e45a6db9313a5cda84f3346c53b0_1366x736.png) 新增页: ![](https://img.kancloud.cn/e8/a6/e8a613e2209623f387d598538de4e32f_1366x736.png) 修改页: ![](https://img.kancloud.cn/b6/50/b65049c40b9dcbf12ca63ff7b5bd760c_1366x736.png) 查看页: ![](https://img.kancloud.cn/81/2b/812bf6fbe9f98d4b3e403b50708cc75f_1366x736.png) 删除: ![](https://img.kancloud.cn/4f/a4/4fa4b2f5144cadf3de9afedbf312ef70_1366x736.png) >[info] 你看,一行代码没写,前后端分离的完整功能,全部实现了,是不是很省力?