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

启动人人fast服务:

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第1张图片

打开本地的前端项目,启动:

命令:npm run dev

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第2张图片

账号密码:admin/admin

对应的数据库:

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第3张图片

接下来在商品系统目录中添加子菜单:

数据库中可以看到记录 

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第4张图片

退出账号,重新登录

点击分类维护的路径是:product/category

准备在moudles下新建product文件夹,新建category.vue

新建category.vue,保存后,刷新页面

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第5张图片

浏览器:

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第6张图片

饿了么UI

Element - The world's most popular Vue UI framework 

找到树形组件

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第7张图片

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第8张图片

参考其他vue,重新编写代码





修改全局访问地址:

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第9张图片

修改对应下面网关的配置网关端口号88,前端api开头的请求都走网关

将后台的人人项目注册到nacos

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第10张图片

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第11张图片

pom.xml 

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第12张图片

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第13张图片

准备让前端的请求走网关,修改网关的配置: 

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第14张图片

增加网关路径重写:

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第15张图片

启动网关服务,看有没有注册到nacos中

报错:org.yaml.snakeyaml.parser.ParserException: while parsing a block collection

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第16张图片

缩进格式不对,重新改下,注意- id之间有空格,启动ok

网关的配到dev中了

Guli商城-商品服务-API-三级分类-配置网关路由与路径重写_第17张图片

重新登录,发现有跨域问题: 

这个问题下一章解决! 

你可能感兴趣的:(GuLi商城,java)