分布式电商项目十八：为三级分类配置网关和路由并进行路径重写

为三级分类配置网关和路由并进行路径重写

上一章我们完成了三级分类输出的功能，现在我们为分类功能配置网关和路由，并进行路径重写。首先需要启动两个使用的人人开源项目（renren-fast在IDEA中运行，renren-fast-vue在vscode中npm run dev），之后进入到开源项目的前端页面：

在系统管理的菜单管理中节能点击新增：


之后在renren-fast-vue的\src\views\modules\目录下创建一个product的文件夹，用来制作三级分类的增删改查。新建category.vue文件，使用之前创建的vue代码片段，之后使用elementUI官网推荐的树结构：https://element.eleme.cn/#/zh-CN/component/tree

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

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
 data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<stylescoped>

</style>

这是一个基本的数型结构，需要把数据替换成为数据库中的产品分类数据。调用url的方法可以参考role.vue：

methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'roleName': this.dataForm.roleName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },

然后先写基础的调用url请求：

<!--  -->
<template>
  <div class></div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      getMenus() {
        this.$http({
          url: this.$http.adornUrl("/product/category/list/tree"),
          method: "get"
        }).then(data=>{
            console.log("成功获取到菜单数据...",data)
        })
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

此时访问会出现404错误：

这是因为访问的连接是以http://localhost:8080/renren-fast开头的，所以访问不到。需要对其进行修改，统一改为给网关发送请求。在static\config\index.js文件中，将http://localhost:8080/renren-fast;修改为http://localhost:88/api;

添加renren-fast到Nacos

由于把全部的请求都转给了gateway网关，会造成renren-fast收不到前端renren-fast-vue的内容，所以需要把renren-fast添加进Nacos中收取对应的请求。现在renren-fast的pom文件中添加相关依赖：

		<dependency>
			<groupId>com.lastingwar.mall</groupId>
			<artifactId>mall-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.5</version>
		</dependency>

之后在renren-fast的application.yml配置文件中添加配置：

spring
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: renren-fast

最后在主程序添加注释：@EnableDiscoveryClient。
运行程序，来到Nacos页面就能看到renren-fast的服务：

之后在微服务的网关服务中添加新的路由规则mall-gateway/src/main/resources/application.yml：

spring:
  cloud:
    gateway:
      routes:
#        - id: baidu_route
#          uri: https://www.baidu.com
#          predicates:
#            - Query=url,baidu
#
#        - id: qq_route
#          uri: https://www.qq.com
#          predicates:
#            - Query=url,qq
        - id: admin_route  //由于没有别的服务，先把所以的请求发给renrenfast
          uri: lb://renren-fast //lb表示负载均衡，发给renren-fast微服务
          predicates:
            - Path=/api/** //表示/API的所以请求
          filters: //使用过滤器来路径重写
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
           

此时来到renren的登录界面，可以加载验证码，但是登录会因为跨域请求被拒绝。跨域是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全策略。