18.Modify API Gateway & Show Product list

上一篇已經處理了登入的跨域請求問題，但目前登入後的商品服務無法取得列表

現在預設的請求都會轉給ren-fast，但product應該轉給商品服務才對，所以API Gateway必須再修改

        - id: product_route
          uri: lb://yumall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api(?<segment>.*), /$\{segment}

負載平衡到product，然後判斷依據一樣使用路徑進行斷言，並且加上過濾器(filter)讓路徑重寫成把/api字串去掉後面的部分則一樣，但目前商品服務還沒加入nacos，所以要在yumall-product新增bootstrap.properties檔案

spring.application.name=yumall-product

spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=49d83e8b-0b74-4fe2-b7ba-a5496b990dce

namespace 這部分要在nacos新增名稱空間後把這串UUID寫在設定檔

在application.yml加上nacos設定

spring:
  datasource:
    username: demo
    password: xxxxx
    url: jdbc:mysql://localhost:3306/yumall_pms
    driver-class-name: com.mysql.cj.jdbc.Driver
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

一樣要開啟服務註冊

儲存重啟，檢查nacos，服務註冊都放在public，不做隔離，其他的設定檔才需要做隔離

測試看API （http://localhost:88/api/product/category/list/tree）

{
 msg: "invalid token",
 code: 401
}

發現這是ren-fast出現的警告訊息(非法token)，如果沒登入就會出現，表示在請求經過Filters時，是先經過ren-fast的Filter，所以要調整一下API Gateway的規則順序

再一次打API（http://localhost:88/api/product/category/list/tree）

成功取得資料

取得資料後要在頁面上顯示，所以要在使用VScode修改

到商品列表頁面可以看到，取到的資料都是放在data中

因此在category.vue可以將data弄成一個解構賦值的格式來存放資料

將data加上大刮號，從data中取得名稱為data的屬性（data.data）

存檔後測試

成功取得data資料，然後再把這些資料放在方法裡面讓elementUI去產生，一樣修改category.vue，將:data綁定的資料改成menus，並且在data()也改成menus

<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

export default {
  // import載入的組件需要注入到物件中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

然後在this.menus=data.data把剛取出的資料放入綁定的menus

getMeuns() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        this.menus = data.data;
        console.log("成功取得選單資料：", data.data);
      });
    },