十七.开发联调商品服务三级分类前后端

112 阅读 0 评论 74 点赞

我是靠谱客的博主尊敬海燕，最近开发中收集的这篇文章主要介绍十七.开发联调商品服务三级分类前后端，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一.添加商品系统菜单以及三级分类维护菜单

启动后台管理系统的前端项目renren-fast-vue以及后端项目renren-fast，登录后台管理系统，添加系统管理菜单，如下：
在这里插入图片描述
接着在商品系统下添加分类维护菜单，如下：

最终展示结果如下：

二.编写分类维护菜单前端代码

在前端项目renren-fast-vue的modules文件夹下新建一个prodect文件夹，同时在prodect文件夹下新建一个文件category.vue,如下：
在这里插入图片描述
完善category.vue文件内容，如下：

<!-- 分类维护 -->
<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: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    //获取分类维护列表
    getMenus(){
         this.$http({
          url: this.$http.adornUrl('/prodect/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>

上述的内容加入了element-ui的tree组件，以及点击分类维护菜单应该访问的接口路径，F12查看接口返回结果，如下：
在这里插入图片描述
可以发现接口路径是错的，分类维护的列表接口请求的应该是商品服务。

三.修改路径以及网关路由

先修改index.js的请求地址配置，让前端发起的请求统一到网关，如下：
在这里插入图片描述
把后端项目renren-fast注册进nacos，在renren-fast项目的pom.xml文件中添加webshop-common依赖，如下：

<dependency>
			<groupId>com.jiejie.webshop</groupId>
			<artifactId>webshop-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>

同时在renren-fast项目的application.yml中加上配置中心地址和服务名：

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

启动类再加上服务注册与发现的注解@EnableDiscoveryClient：
在这里插入图片描述

三.配置跨域

通过以上的配置后，请求都会先经过网关，但是这样就不可避免的可能会产生跨域的问题，具体原因可能是由于端口不同，协议不同等等，可以参考下这篇博客【简单了解下跨域】。

既然之后不管是对哪种服务的请求，都会先经过网关，那么就把跨域问题解决在网关层。

所以服务端需要告诉浏览器，是否允许这个域名跨域访问自己，以及自己设置的跨域信息，具体的代码体现在网关层中如下：
在webshop-gateway项目下新增一个config文件夹，同时新增一个CorsConfig类：
在这里插入图片描述
CorsConfig类内容如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

@Configuration
public class CorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource urlBased = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许跨域访问的请求头
        corsConfiguration.addAllowedHeader("*");
        //允许跨域访问的请求方法
        corsConfiguration.addAllowedMethod("*");
        //允许跨域访问的域名
        corsConfiguration.addAllowedOrigin("*");
        //是否支持安全证书，是否允许发送Cookie
        corsConfiguration.setAllowCredentials(true);
        urlBased.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(urlBased);
    }
}

同时要注释掉renren-fast项目下config文件夹里的CorsConfig文件内容，因为这里也配置了跨域，而网关的跨域和这里的跨域就会出现重叠情况，会影响请求的正常响应，注释如下：

在这里插入图片描述

四.配置网关路由规则

首先要清楚前端过来的请求，都会带一个api/，所以带api/的请求路径都路由到后台管理系统服务，其次，商品服务是api/product/**这样的一个形式，所以带有api/product前缀的请求应该被路由到商品服务，重要的，更细致的路由规则应该放在前面，避免请求被一个更大范围匹配的路由规则分发到错误的服务。所以网关的路由规则具体体现如下：

#注册中心地址配置
spring:
  application:
    name: webshop-gateway
  cloud:
    #注册中心地址
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
    gateway:
      routes:
        - id: product_route
          uri: lb://webshop-product
          predicates:
            - Path=/api/prodect/**
          filters:
            - RewritePath=/api/(?<segment>.*),/${segment}
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/${segment}
#网关服务端口
server:
  port: 88

如上述代码，把路由到商品服务的规则放在前面，通过排序，决定路由匹配的顺序(生成代码的时候，商品单词拼成了prodect，请求路径就先将错就错了)。

五.修改前端相应代码

把数据做解构，放入树形标签中，如下：

<!-- 分类维护 -->
<template>
  <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      menus:[],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    //获取分类维护列表
    getMenus(){
         this.$http({
          url: this.$http.adornUrl('/prodect/category/list/tree'),
          method: 'get',
        }).then(({data}) => {
          console.log("成功获取到数据"+data.data)
          this.menus=data.data;
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>