【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】

最新推荐文章于 2023-02-02 17:13:51 发布

原创最新推荐文章于 2023-02-02 17:13:51 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gateway #Nacos服务注册与发现 #Nacos配置中心 #浏览器的同源策略 #客户端与服务端跨域解决方案

三高商城系统专栏收录该内容

55 篇文章

订阅专栏

本文档详细介绍了三高商城系统的建设过程，包括系统架构、微服务组件应用、前后端开发及部署等内容。重点讲解了商品分类管理功能的实现，涵盖前端ElementUI组件使用、后端接口设计，并解决了跨域访问问题。

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了，请点击这里！】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】

二.管理系统新建菜单

前后端管理模块项目启动并登陆
在这里插入图片描述
新创建一个商品系统一级目录

在这里插入图片描述
结果展示：

在商品系统一级目录下新创建一个类别管理菜单
在这里插入图片描述

结果展示:
在这里插入图片描述

在我们前端的项目下根据我们设置的访问路由，对商品系统模块的分类管理先做一个简单的测试
根据指定的路径位置，新建立与路由对应的文件夹以及文件
在这里插入图片描述

编码实现:
在这里插入图片描述

访问测试:
在这里插入图片描述

三.前端编写实现商品分类管理的逻辑代码

ElementUI官网查找对应的树形样式代码

第一步：展示静态的数据，直接从ElementUI官网拷贝Tree相关案例代码

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

<script>
/* eslint-disable */
export default {
    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);
      }
    }
  };
</script>

<style>

</style>

效果展示:

在这里插入图片描述

第二步：动态获取后台服务的数据

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

<script>
/* eslint-disable */
export default {
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      getCategory(){
        this.$http({
          url: this.$http.adornUrl('/product/category/listTree'),
          method: 'get'
        }).then(({data}) => {
          console.log("成功获取的类别数据：",data.data)
          this.data = data.data
        })
      },
      handleNodeClick(data) {
        console.log(data);
      }
    },created(){
      this.getCategory();
    }
  };
</script>

<style>

</style>

访问三级分类数据并没有得到我们期望的结果。出现了404错误:http://localhost:8080/renren-fast/product/category/listTree

在这里插入图片描述

四.mall-gateway模块配置网关服务1

解决方案:
针对这个错误提示我们需要通过网关服务来实现统一的路由处理

在这里插入图片描述

修改了前端统一的后端服务地址为路由服务后

在这里插入图片描述

访问后这个验证码出不来了

在这里插入图片描述

验证码出不来的原因是请求的地址：http://localhost:8070/captcha.jpg?uuid=688629a3-53e9-42cc-8e77-b39041111252 跑到网关服务获取验证码了，这里网关服务就应该要将这个请求路由到renren-fast服务中。

五.后台管理系统在Nacos配置中心、注册中心的配置

首先renren-fast服务没有在注册中心中注册，网关发现不了，先注册renren-fast服务

在renren-fast中依赖commons

在这里插入图片描述

将renren-fast的starter-parent的版本更新为2.4.12，和我们之前的版本统一
在这里插入图片描述

添加注册中心配置
在这里插入图片描述
配置中心的配置

主启动类添加注册中心客户端扫描注解
在这里插入图片描述

如果启动服务提示如下错误：按照下面对应的解决方案解决，如果没有下面的错误，直接忽略

原因是因为SpringBoot我们把版本升级到了2.4.12那么validation默认被移除了，我们需要收到的添加依赖

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-validation</artifactId>
	<version>2.4.12</version>
</dependency>

启动服务，注册成功

在这里插入图片描述

六.继续配置mall-gateway模块配置网关服务2

mall-gateway模块配置网关服务
前端访问路径加了app，为了后续访问方便
在这里插入图片描述

配置路由规则
在这里插入图片描述
然后测试访问验证码出现了503的错误

出现503错误的原因是Gateway网关服务中会根据loadbanlance负载均衡路由到renren-fast但是缺少了对应的依赖，在Gateway服务中添加即可

<!--加入网关的负载均衡-->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-loadbalancer</artifactId>
            <version>3.0.1</version>
        </dependency>

在这里插入图片描述

先启动网关模块，然后再启动人人后台管理模块
访问测试----》成功访问到了验证码
在这里插入图片描述

七.浏览器的同源策略与解决跨域问题实操案例

输入用户名、密码，验证码，有出现如下的问题—》跨域的问题
在这里插入图片描述

同源策略:
由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容
注：同源策略，单说来就是同协议，同域名，同端口

URL 说明是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名不允许

跨域网站学习
客户端与服务端跨域请求流程

对于跨域问题的解决我们统一在Gateway中设定。

package com.ljw.mall.gateway.config;

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

@Configuration
public class MallCorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration configuration = new CorsConfiguration();
        // 配置跨域的信息
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");
        // SpringBoot升级到2.4.0 之后需要使用该配置
        configuration.addAllowedOriginPattern("*");
        configuration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**",configuration);
        return new CorsWebFilter(source);
    }
}