商品服务2-三级分类-配置网关路由与路径重写

第一步：启动人人快速开发的前后端，登录进去之后在菜单管理中新增商品系统以及其下的分类维护，然后参照系统原有的角色管理来写商品系统的分类维护页面。


第二步：（1）在src>views>modules下创建一个product文件夹，再在这个product文件夹下创建一个category.vue文件（这些操作是参考角色管理来弄的）。（2）在element UI上找到Tree树形控件，将里面的代码复制到category.vue文件中对应的位置，然后保存前端代码可以看到页面的展示效果。



第三步：上面的展示只是示例数据，如果要展示真实的数据需要给10000（商品服务的端口）端口发送/product/category/list/tree请求来获取。获取方式：在methods中写一个getMenus()方法，然后在created中调用这个方法，在一创建这个组件后就向后台发送请求获取分类的数据。

第四步：在完成第三步保存代码后会发现在发送tree请求时报错，因为前端是给http://localhost:8080/renren-fast/product/category/list/tree发送的请求，这是个基准路径在src>static>index.js中定义，定义的路径为：http://localhost:8080/renren-fast/，如果把这个地址改为我们要访问的服务端口（http://localhost:10000）并不合适，因为商品服务可能上线了多个服务（比如：10001，10002…），或者要给其它服务发请求，这样都要改一下这个路径，所以应该统一一下地址，只需要给网关发送请求，让网关再路由到指定的地址，因此这个基准路径应修改为http://localhost:88，截图中还有一个/api会在下文中说明：

第五步：修改基准路径保存后，会发现人人快速开发平台会让重新登录且有一个获取验证码报错的信息，因为是直接发送http://localhost:88/captcha.jpg?..请求来获取验证码（即，给网关发送请求来获取验证码&