1、 配置网关路由
-
启动前端工程renren-fast-vue
-
配置后端renren-fast配置文件;然后启动
-
设置导航栏分类
- 系统管理–> 菜单管理–>新增目录(商品系统)
-
在新增的目录下创建菜单
- 系统管理–> 菜单管理–>新增菜单(分类维护)
-
将三级分类放到分类维护菜单中
- 根据创建的菜单的url来创建对应的vue文件
- 从element-ui中复制树状菜单栏
- 修改数据整理成自己需要的;就需要把数据去请求数据,发请求;所以就是写一个请求方法;并且在active中进行写入,这样每次我们在组件加载的时候就会直接去请求数据了;
- 那我这里有一个疑问🤔️,页面是怎么展示出来的呢,查看路由源码,发现路由是通过一个动态获取菜单的url来进行路由的;所以当我们跳转到对应的url时,其实是路由通过从动态路由中找到对应的url,然后渲染对应的组件;并且在我们的侧边栏导航中会有专门的点击事件来进行路由跳转。
- 发送请求发现数据没有拿到,这是因为我们的数据是在product这个服务模块下的,所以url路径不对;但是前端的默认基础路径api是写死的,我们想要获取多个服务模块的数据就需要用到网管来实现,通过将请求统一全部打到gateway上;让gateway给我们做负载均衡.
- 修改默认的api为gateway的url后;发现后台管理系统的登陆图片验证码无法获取;这是因为验证码是通过后台管理系统的请求生成的;而我们此时是将所有的请求统一发送到网关;那么就需要在nacos中将后台系统注册上;这样就能通过nacos负载均衡、路由匹配、路径重写等功能。
- 在renrenfast后台管理系统中配置nacos配置(注意要引入正确的cloud版本);添加依赖,以及开启注册发现注解
- 在renrenfast后台管理系统中配置路由策略
- 最后就是配置好跨域
- 跨域问题解决方法
-
方法1、使用nginx;前端打包后成有动态请求和静态请求直接放在nginx中,动态请求后端时通过nginx负载均衡反向代理我们的后端服务请求;简单的说就是通过nginx把前端和后端的项目url域名变成统一的。
-
方法2、 通过对option预检头进行相应;在项目中直接写一个corsconfig配置类;这个是对于全局所有的请求的。注意这里要写springcloud gateway 的cors配置或者直接写yaml配置【推荐】
-
方法3、使用spring提供的coss注解,这个需要在每一个controller上面都写上注解
globalcors: corsConfigurations: '[/**]': allowedOriginPatterns: "*" # 允许哪些网站的跨域请求 allowedOrigins: “*” 允许所有网站 allowedMethods: "*" # 允许的跨域ajax的请求方式 “*” 允许所有 allowedHeaders: "*" # 允许在请求中携带的头信息 allowCredentials: true # 是否允许携带cookie maxAge: 360000 # 这次跨域检测的有效期
-
-
最后重启项目进行测试。