1.商品服务三级分类前后端联调
-
登录后台管理系统，添加系统管理菜单：
目录(一级菜单)--商品系统、
菜单(二级菜单)--分类维护、 ----- 在侧边栏会显示新增加的菜单； -
编写分类维护菜单的前端页面代码
在src -- views -- modules -- 新建product目录 -- 新建category.vue页面
<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('/product/category/list/tree'),
method: 'get',
}).then(({data}) => {
console.log("成功获取到数据" + data)
this.menus=data.data;
})
}
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getMenus();
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {},// 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>
- 刷新页面，点击该分类页面：报错404，Referrer Policy: strict-origin-when-cross-origin ---- 跨域问题
2.使用网关解决跨域问题
2.1修改前端配置
- 修改static -- config -- index.js文件，请求地址配置，让前端发起的请求统一到网关
// api接口请求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8088/api';
2.2修改后端admin服务(renren-fast)
-
把后端项目renren-fast注册进Nacos，在renren-fast项目的pom.xml文件中添加 webshop-common 依赖；(注意：renren-fast的版本与之前的服务要保持一致，否则服务启动会出问题，需要降低版本。)
-
在 renren-fast 项目的 application.yml 中加上配置中心地址和服务名
spring:
application:
name: renren-fast
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
- 启动类再加上服务注册与发现的注解 @EnableDiscoveryClient
- 把renren-fast项目下config目录里的CorsConfig文件内容注释掉，跨域的配置在网关中进行；
2.3修改网关配置
-
说明：之后不管是对哪种服务的请求，都会先经过网关，经网关转发到具体的服务上去，那么就在网关层解决跨域问题；
-
创建一个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);
}
}
- 网关服务的路由规则配置为：
spring:
cloud:
gateway:
routes:
- id: product_route
uri: lb://webshop-product
predicates:
- Path=/api/product/**
filters:
- RewritePath=/api/(?<segment>.*),/$\{segment}
- id: admin_route
uri: lb://renren-fast
predicates:
- Path=/api/**
filters:
- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
- 说明：首先要清楚前端过来的请求，都会带一个api/，所以带/api/的请求路径都路由到后台管理系统服务；其次，商品服务是/api/product/**这样的一个形式，所以带有/api/product前缀的请求应该被路由到商品服务，重要的，更细致的路由规则应该放在前面，避免请求被一个更大范围匹配的路由规则分发到错误的服务。
2.4验证
- 启动项目：开启nacos服务端，启动网关服务，后台管理服务，商品服务；
- 登录后端管理平台，点击商品系统下的分类维护，可以看到有数据展示；
- 至此，商品服务三级分类初步联调完成。
注意
- renren-fast的版本与SpringCloud 的版本要匹配，否则服务启动出问题；