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

超、凢脫俗 2024-02-19 11:11 17阅读 0赞

启动人人fast服务：

![f444bd2415f74e4a80b2d0b6067000e2.png][]

打开本地的前端项目，启动：

命令：npm run dev

![b7f2a78bdb4d45e09043bdba83734bd1.png][]

![98fce0a2444d4798af8d357baac60906.png][]

![e3081e328f1f489abe0e78096393f5e5.png][]

账号密码：admin/admin

![d07f91bcfad041159826977916920463.png][]

![449afe02248e4de89331a483f7e59118.png][]

对应的数据库：

![54fdb84c98164e9fb09d712d858c7721.png][]

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

![b31f38ab938c48d48aba94d973f479ba.png][]

数据库中可以看到记录

![f395fa7a0f644d5ab570db82bccd4dbf.png][]

退出账号，重新登录

![cc1070783def4ebda6e9acd3029f29f7.png][]

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

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

![9ee8cf8a677b4e2aad071c5f3f0f88aa.png][]

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

![264f9678bbba4216a619452fdcb1612e.png][]

浏览器：

![9e143297c44b4a8ab028008d6f0adfb4.png][]

饿了么UI

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

找到树形组件

![90c31699c27e4e778340eb9ceeb7d559.png][]

![928ce6a5f3d54604b4459c059287bda6.png][]

![59bea02cf4ef41de8c64969e1c3df703.png][]

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

<template>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </template>
    
    <script>
    export default {
    data() {
          return {
            data: [],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        },
        //生命周期
        activated () {
          this.getDataList()
        },
        methods: {
          // 获取数据列表
          getDataList () {
            this.$http({
              url: this.$http.adornUrl('/product/category/list/tree'),
              method: 'get'
            }).then(({data}) => {
              console.log("成功获取到菜单数据.....",data)
            })
          },
          // 每页数
          sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
          },
          // 当前页
          currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
          },
          // 多选
          selectionChangeHandle (val) {
            this.dataListSelections = val
          },
          // 新增 / 修改
          addOrUpdateHandle (id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
              this.$refs.addOrUpdate.init(id)
            })
          },
          // 删除
          deleteHandle (id) {
            var ids = id ? [id] : this.dataListSelections.map(item => {
              return item.roleId
            })
            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$http({
                url: this.$http.adornUrl('/sys/role/delete'),
                method: 'post',
                data: this.$http.adornData(ids, false)
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.getDataList()
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            }).catch(() => {})
          }
        }
    }
    </script>
    
    <style>
    
    </style>

修改全局访问地址：

![aa23c0ce993b4891aa5546d444374d51.png][]

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

![7404ffaab0d2457aba2c87cb90233c00.png][]

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

![0d9692fc952145a889ba07398f65371c.png][]

![9ed7384c4a734d90b7ce133364e234b8.png][]

pom.xml

![fc9d6675188b4843a9a73bebd70cce2c.png][]

![a854ca1be83e4d40be8d6b35f31cf90e.png][]

![bb2a67e558f54e17ae71abed7fdce899.png][]

准备让前端的请求走网关，修改网关的配置：

![86217d699cc64f04af408223cac2fc1c.png][]

增加网关路径重写：

![3576ddef08e64792b26ccd4e1660c334.png][]

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

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

![aa5f3aeaebca44828407f6ff5cd33fb9.png][]

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

![c9f13487506049f89f875cad7b0b0cca.png][]

网关的配到dev中了

![f8fe408c9dd24388b39457a189e749ec.png][]

重新登录，发现有跨域问题：

![61583a8ddc264e52bba8b50e0d7c5098.png][]

这个问题下一章解决！

[f444bd2415f74e4a80b2d0b6067000e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/07de85e36cae4ccb8755f7a3381284c9.png
[b7f2a78bdb4d45e09043bdba83734bd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d5d2859861e14b83915d0704d5c1f669.png
[98fce0a2444d4798af8d357baac60906.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e5ed2381b115495d8124987f34b603f9.png
[e3081e328f1f489abe0e78096393f5e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d8c53e12b62641529b308df3da91471f.png
[d07f91bcfad041159826977916920463.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/822730702c6041758de80775116e7a3a.png
[449afe02248e4de89331a483f7e59118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f5be7984c52647f9a3fdd94b644a222b.png
[54fdb84c98164e9fb09d712d858c7721.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/7ebfbfa4b7db4e3a932cf3235a967c3f.png
[b31f38ab938c48d48aba94d973f479ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/ab8e44fba3984bfaaecee17b70bd893b.png
[f395fa7a0f644d5ab570db82bccd4dbf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/46ae7820fcad46f1a023c3af34c1bb73.png
[cc1070783def4ebda6e9acd3029f29f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/4092f0b00eba498caf5992e08ca77a91.png
[9ee8cf8a677b4e2aad071c5f3f0f88aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/05f8f4d237f8470c8656833e004ecb40.png
[264f9678bbba4216a619452fdcb1612e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2cc2354d39ea45a28b244126530b930e.png
[9e143297c44b4a8ab028008d6f0adfb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/eb4a945e36da40d484f61862412c9dba.png
[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/installation
[90c31699c27e4e778340eb9ceeb7d559.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/b853caa269a2449fb9fa64344f5d70ae.png
[928ce6a5f3d54604b4459c059287bda6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/859874b974ce44ed910afb863f326715.png
[59bea02cf4ef41de8c64969e1c3df703.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1349c3b20a8646328c561e770f4bbe0b.png
[aa23c0ce993b4891aa5546d444374d51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/c3ab94b48ce641b3a2466c3b17bd877b.png
[7404ffaab0d2457aba2c87cb90233c00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/abd8d17ec0064a45b0292fe57f448050.png
[0d9692fc952145a889ba07398f65371c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e5b6fd6ddb8745059b96cc3639b6e390.png
[9ed7384c4a734d90b7ce133364e234b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/7a909a2b98c74c3691af62b69ce629e9.png
[fc9d6675188b4843a9a73bebd70cce2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/cec4aa6af74d4b769c58f4d252c1a628.png
[a854ca1be83e4d40be8d6b35f31cf90e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/40eaeec1441e4886bca99e7ea8bd7520.png
[bb2a67e558f54e17ae71abed7fdce899.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2529212a21774629a79d10c3176dc4f2.png
[86217d699cc64f04af408223cac2fc1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3068d12c7d3d48c2ad88e5a1a97be9bf.png
[3576ddef08e64792b26ccd4e1660c334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1d60bfa3b7f34cf6801c68fe174cbdf7.png
[aa5f3aeaebca44828407f6ff5cd33fb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/f710a03294af47459b0f6a2a5186cf59.png
[c9f13487506049f89f875cad7b0b0cca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/57d6b484d6704305be6910d5a5a9a11f.png
[f8fe408c9dd24388b39457a189e749ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/e1b083e2399b44a7b161af0df88c41d5.png
[61583a8ddc264e52bba8b50e0d7c5098.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/2c5ef668206c4d2888ec12d5572bb058.png