第一步:启动人人快速开发的前后端,登录进去之后在菜单管理中新增商品系统以及其下的分类维护,然后参照系统原有的角色管理来写商品系统的分类维护页面。
第二步:(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?..请求来获取验证码(即,给网关发送请求来获取验证码),但这个验证码实际上是在renren-fast服务里(在8080端口),所以需要让网关先默认把请求转给renren-fast服务,如果要转的话网关需要先发现这个服务,网关发现这个服务需要这个服务先注册到注册中心。注册步骤:
(1)在renren-fast的pom.xml里引入gulimall-common(这里面引入了nacos的注册中心和配置中心);
com.atguigu.gulimall gulimall-common 0.0.1-SNAPSHOT
(2)在renren-fast的application.yml中添加如下配置:
application:
name: renren-fast//服务名
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848//nacos地址
(3)在RenrenApplication中使用注解@EnableDiscoveryClient开启注册服务:
(4)重启renren-fast服务在nacos中会有这个服务的列表。
第五步:将所有请求由网关转给renren-fast服务。在gulimall-gateway的application.yml中增加如下配置:
spring:
cloud:
gateway:
routes:
- id: admin_route
uri: lb://renren-fast
predicates:
- Path=/api
UrlbasedCorsConfigurationSource source = new UrlbasedCorsConfigurationSource();
//配置跨域信息
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 允许跨域的头:所有
corsConfiguration.addAllowedHeader("*");
// 允许跨域的请求方式:所有
corsConfiguration.addAllowedMethod("*");
// 允许跨域的请求来源:所有
corsConfiguration.addAllowedOrigin("*");
// 是否允许携带cookie跨域
corsConfiguration.setAllowCredentials(true);
//任意路径都进行跨域配置,传入的参数还需要一个corsConfiguration
//所以需要创建一个corsConfiguration
source.registerCorsConfiguration("
return new CorsWebFilter(source);
}
}



