【业务功能篇76】微服务网关路由predicates断言条件-filters路由转换地址-跨域问题-多级目录树化层级设计-mybatisPlus逻辑删除

业务开发-基础业务-分类管理

启动renren-fast如果出现如下错误

image.png

-Djps.track.ap.dependencies=false

添加相关配置即可

image.png

分类管理

1.后端分类接口

JDK8特性：https://blog.csdn.net/qq_38526573/category_11113126.html

在后端服务中我们需要查询出所有的三级分类信息，并将这些信息组合为有父子关系的数据，所以首先我们需要在对应的entity中添加关联字段 childrens

	/**
	 * 当前类别所拥有的所有的子类
	 */
	@TableField(exist = false)
	private List<CategoryEntity> childrens;

然后我们在service中完成对应的数据处理的逻辑,具体实现逻辑参考注释

    /**
     * 查询所有的类别数据，然后将数据封装为树形结构，便于前端使用
     *
     * @param params
     * @return
     */
    @Override
    public List<CategoryEntity> queryPageWithTree(Map<String, Object> params) {
        // 1.查询所有的商品分类信息
        List<CategoryEntity> categoryEntities = baseMapper.selectList(null);
        // 2.将商品分类信息拆解为树形结构【父子关系】
        // 第一步遍历出所有的大类  parent_cid = 0
        List<CategoryEntity> list = categoryEntities.stream().filter(categoryEntity -> categoryEntity.getParentCid() == 0)
                .map(categoryEntity -> {
                    // 根据大类找到多有的小类  递归的方式实现
                    categoryEntity.setChildrens(getCategoryChildrens(categoryEntity,categoryEntities));
                    return categoryEntity;
                }).sorted((entity1, entity2) -> {
                    return (entity1.getSort() == null ? 0 : entity1.getSort()) - (entity2.getSort() == null ? 0 : entity2.getSort());
                }).collect(Collectors.toList());
        // 第二步根据大类找到对应的所有的小类
        return list;
    }

    /**
     *  查找该大类下的所有的小类  递归查找
     * @param categoryEntity 某个大类
     * @param categoryEntities 所有的类别数据
     * @return
     */
    private List<CategoryEntity> getCategoryChildrens(CategoryEntity categoryEntity
            , List<CategoryEntity> categoryEntities) {
        List<CategoryEntity> collect = categoryEntities.stream().filter(entity -> {
            // 根据大类找到他的直属的小类
            return entity.getParentCid().equals(categoryEntity.getCatId());
        }).map(entity -> {
            // 根据这个小类递归找到对应的小小类
            entity.setChildrens(getCategoryChildrens(entity, categoryEntities));
            return entity;
        }).sorted((entity1, entity2) -> {
            return (entity1.getSort() == null ? 0 : entity1.getSort()) - (entity2.getSort() == null ? 0 : entity2.getSort());
        }).collect(Collectors.toList());
        return collect;
    }

CategoryService中同步定义对应的接口方法

public interface CategoryService extends IService<CategoryEntity> {

    PageUtils queryPage(Map<String, Object> params);

    List<CategoryEntity> queryPageWithTree(Map<String, Object> params);
}

然后在CategoryController中新增对应处理的方法

    @GetMapping("/listTree")
    public R listTree(@RequestParam Map<String, Object> params){
        List<CategoryEntity> list = categoryService.queryPageWithTree(params);
        return R.ok().put("data", list);
    }

启动服务访问测试

image.png

2. 前端服务串联

2.1 新增菜单

首先我们新增一个 商品系统的目录

image.png

按照上图的操作完成即可

image.png

然后在商品系统下添加 类别管理的菜单

image.png

对应的三级分类的页面 product/catagory–> src/views/modules/product/category.vue

image.png

2.2 类别数据

ElementUI官网：https://element.eleme.cn/#/zh-CN

第一步：展示静态的数据，直接从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>

页面效果

image.png

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


<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

image.png

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

image.png

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

image.png

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

image.png

验证码出不来的原因是请求的地址：http://localhost:8070/captcha.jpg?uuid=a496be9e-d916-4f3e-813d-d396c13a8b87 跑到网关服务获取验证码了，这里网关服务就应该要将这个请求路由到renren-fast服务中。

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

在renren-fast中依赖commons

		<dependency>
			<groupId>com.msb.mall</groupId>
			<artifactId>mall-commons</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>

添加注册中心和配置中心相关的信息

image.png

image.png

然后放开注册中心

image.png

最后启动服务提示如下错误

image.png

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

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

启动服务，注册成功

image.png

解决验证码图片不显示的问题，我们需要在网关服务中添加对renren-fast服务访问的路由

# 注册中心的信息
spring:
  application:
    name: mall-gateway
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
    gateway:
      routes:
        - id: route1
          uri: http://www.baidu.com
          predicates:
            - Query=url,baidu
        - id: route2
          uri: http://www.jd.com
          predicates:
            - Query=url,jd
        - id: app_route
          uri: lb://renren-fast
          predicates:
            - Path=/app/**
          filters:
            - RewritePath=/app/(?<segment>/?.*), /renren-fast/$\{segment}
# localhost:8070/app/captcha.jpg -->
# localhost:8080/app/captcha.jpg localhost:8080/renren-fast/captcha.jpg
# 指定注册中心的服务端口
server:
  port: 8070

然后测试访问验证码出现了503的错误

image.png

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

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-loadbalancer</artifactId>
        </dependency>

2.3 跨域问题

同源策略

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

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 不同域名 不允许

跨域网站介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORSimage.png

image.png

对于跨域问题的解决我们统一在Gateway中设定。注意删除掉在renren-fast中配置的跨域问题

package com.msb.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);
    }
}

然后登录操作即可

image.png

2.4 查看类别数据

首先需要在Gateway中配置商品服务的路由信息，同时要注意配置规则的先后顺序

image.png

然后服务端响应的数据的字段要在Vue文件中显示的对应，才能正确的显示

image.png

访问测试

image.png

3 删除类别

2> 实现后台服务逻辑删除的操作

在实际开发中针对数据删除这块我们一般都会采用逻辑删除的方法来操作。在本项目中我们可以通过mybatis-Puls中提供的逻辑删除方式来实现

mybatis-plus:https://mp.baomidou.com/guide/

首先配置全局的逻辑删除逻辑

image.png

然后在entity的字段中显示的标明：

image.png

然后我们就可以在service中继续使用delete相关的方法来操作了

    /**
     * 逻辑批量删除操作
     * @param ids
     */
    @Override
    public void removeCategoryByIds(List<Long> ids) {
        // TODO  1.检查类别数据是否在其他业务中使用

        // 2.批量逻辑删除操作
        baseMapper.deleteBatchIds(ids);

    }

然后通过postman测试

image.png

然后在数据库中反应的效果

image.png

3> 串联前后端的逻辑

要实现该效果，首先需要通过ajax异步的来提交请求到后端服务

this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              // 重新加载所有的菜单数据
              this.getCategory();
              // 设置默认展开的父节点信息
              this.expandKeys=[node.parent.data.catId]
            } else {
              this.$message.error(data.msg);
            }

然后删除需要必要的提示信息

this.$confirm(`是否确认删除【${data.name}】记录?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 传递的数据
          let ids = [data.catId];
          // 把删除的请求提交到后台服务
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              // 重新加载所有的菜单数据
              this.getCategory();
              // 设置默认展开的父节点信息
              this.expandKeys=[node.parent.data.catId]
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log("删除", data, node);

image.png

image.png

最后删除成功数据后Tree数据刷新及对应的Tree的默认展示父节点信息

image.png

image.png

image.png

到此，三级分类数据的删除操作搞定

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/94043.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构--树4.2（二叉树）

数据结构--树4.2（二叉树）

目录 一、二叉树的定义和特点 1、定义 2、特点 二、二叉树的基本形态 1、空二叉树 2、只有一个根结点 3、根结点只有左子树 4、根结点只有右子树 5、根结点既有左子树又有右子树 6、斜树 7、满二叉树 8、满二叉树和完全二叉树 三、二叉树的性质 一、二叉树的定义和…
阅读更多...
maven工程的目录结构

maven工程的目录结构

https://maven.apache.org/guides/introduction/introduction-to-the-standard-directory-layout.html maven工程的目录结构&#xff1a; 在maven工程的根目录下面&#xff0c;是pom.xml文件。此外&#xff0c;还有README.txt、LICENSE.txt等文本文件&#xff0c;便于用户能够…
阅读更多...
LeetCode--HOT100题（44）

LeetCode--HOT100题（44）

目录 题目描述&#xff1a;230. 二叉搜索树中第K小的元素&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;230. 二叉搜索树中第K小的元素&#xff08;中等&#xff09; 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你…
阅读更多...
网络安全（黑客）了解学习路线

网络安全（黑客）了解学习路线

谈起黑客&#xff0c;可能各位都会想到&#xff1a;盗号&#xff0c;其实不尽然&#xff1b;黑客是一群喜爱研究技术的群体&#xff0c;在黑客圈中&#xff0c;一般分为三大圈&#xff1a;娱乐圈 技术圈 职业圈。 娱乐圈&#xff1a;主要是初中生和高中生较多&#xff0c;玩网恋…
阅读更多...
工地扬尘自动监测识别算法

工地扬尘自动监测识别算法

工地扬尘自动监测识别系统通过yolov7python网络模型深度学习算法模型&#xff0c;扬尘自动监测识别算法能够全天候、全方位地观测扬尘情况。YOLOv7 的策略是使用组卷积来扩展计算块的通道和基数。研究者将对计算层的所有计算块应用相同的组参数和通道乘数。然后&#xff0c;每个…
阅读更多...
Spring框架

Spring框架

一.简介 Spring 是 2003 年兴起,通过使用IOC 和 AOP 组成的轻量级的为解决企业级开发的Java开发框架 官网:Spring | Home 特点: 1.轻量级:资源jar包少,运行时框架占用资源少,效率更高 2.IOC(Inversion of Control),由Spring容器来对对象实行管理 3.AOP(面相切面的编程)是…
阅读更多...
跳跃游戏 II【贪心算法】

跳跃游戏 II【贪心算法】

跳跃游戏 II class Solution {public int jump(int[] nums) {int cur 0;//当前最大覆盖路径int next 0;//下一步的最大覆盖路径int res 0;//存放结果&#xff0c;到达终点时最少的跳跃步数for (int i 0; i < nums.length; i) {//遍历数组&#xff0c;以给出数组以一个…
阅读更多...
CSS学习笔记01

CSS学习笔记01

CSS笔记01 什么是CSS CSS&#xff08;Cascading Style Sheets &#xff09;&#xff1a;层叠样式表&#xff0c;也可以叫做级联样式表&#xff0c;是一种用来表现 HTML 或 XML 等文件样式的计算机语言。字体&#xff0c;颜色&#xff0c;边距&#xff0c;高度&#xff0c;宽度…
阅读更多...
兼容AD210 车规级高精度隔离放大器：ISO EM210

兼容AD210 车规级高精度隔离放大器：ISO EM210

车规级高精度隔离放大器&#xff1a;ISO EM210 Pin-Pin兼容AD210的低成本,小体积DIP标准38Pin金属外壳封装模块&#xff0c;能有效屏蔽现场EMC空间干扰。功能设计全面&#xff0c;采用非固定增益方式&#xff0c;输入信号经过输入端的前置放大器&#xff08;增益为1-100&#x…
阅读更多...
设计模式之命令模式（Command）的C++实现

设计模式之命令模式（Command）的C++实现

1、命令模式的提出 在软件开发过程中&#xff0c;“行为请求者”和“行为实现者”通常呈现一种“紧耦合”&#xff0c;如果行为的实现经常变化&#xff0c;则不利于代码的维护。命令模式可以将行为的请求者和行为的实现者进行解耦。具体流程是将行为请求者封装成一个对象&…
阅读更多...
AODV代码实现详解——原理与源码分析（一）

AODV代码实现详解——原理与源码分析（一）

首先来几个标准参考&#xff1a; RFC 3561 RFC 3561 中文翻译 一个博客 挺好的另一个博客 事件&#xff1f; 字段长度&#xff1f; 事件驱动 各种定时器 状态转移图&#xff1f; AODV协议 基本概念 AODV&#xff08;Ad hoc On-Demand Distance Vector&#xff09;是一种基于…
阅读更多...
FusionAD：用于自动驾驶预测和规划任务的多模态融合

FusionAD：用于自动驾驶预测和规划任务的多模态融合

论文背景 自动驾驶&#xff08;AD&#xff09;任务通常分为感知、预测和规划。在传统范式中&#xff0c;AD中的每个学习模块分别使用自己的主干&#xff0c;独立地学习任务。 以前&#xff0c;基于端到端学习的方法通常基于透视视图相机和激光雷达信息直接输出控制命令或轨迹…
阅读更多...
【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

代码示例 : <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Banner 轮播</title><style>/* 取消浏览器或者其它标签的默认的内外边距 */* {margin: 0;padding: 0;}/* 取消列表样式 主要是…
阅读更多...
特殊的矩阵与特殊的矩阵关系———实对称、正定、对角、零矩阵

特殊的矩阵与特殊的矩阵关系———实对称、正定、对角、零矩阵

一、特殊的矩阵 1、实对称矩阵 定义&#xff1a;都是实数&#xff0c;且 性质&#xff1a; &#xff08;1&#xff09;可以用特征值来求A的大小 &#xff08;2&#xff09;可以得到A的秩 &#xff08;3&#xff09;必定可以相似对角化 运用&#xff1a; 与实对称矩阵A合同的矩…
阅读更多...
C#，《小白学程序》第二课：数组与排序

C#，《小白学程序》第二课：数组与排序

1 文本格式 /// <summary> /// 《小白学程序》第二课&#xff1a;数组与排序 /// </summary> /// <param name"sender"></param> /// <param name"e"></param> private void button2_Click(object sender, EventArgs …
阅读更多...
如何选择合适的损失函数

如何选择合适的损失函数

目录 如何选择合适的损失函数 1、均方误差&#xff0c;二次损失&#xff0c;L2损失&#xff08;Mean Square Error, Quadratic Loss, L2 Loss&#xff09; 2、平均绝对误差&#xff0c;L1损失&#xff08;Mean Absolute Error, L1 Loss&#xff09; 3、MSE vs MAE &#xff…
阅读更多...
数据增强：提高机器学习性能的有效技巧

数据增强：提高机器学习性能的有效技巧

文章目录 数据增强的原理常用的数据增强技术图像数据增强文本数据增强音频数据增强 数据增强的代码示例拓展应用与挑战结论 &#x1f389;欢迎来到AIGC人工智能专栏~数据增强&#xff1a;提高机器学习性能的有效技巧 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&a…
阅读更多...
Rabbitmq的Federation Exchange

Rabbitmq的Federation Exchange

(broker 北京 ) &#xff0c; (broker 深圳 ) 彼此之间相距甚远&#xff0c;网络延迟是一个不得不面对的问题。有一个在北京的业务(Client 北京 ) 需要连接 (broker 北京 ) &#xff0c;向其中的交换器 exchangeA 发送消息&#xff0c;此时的网络延迟很小&#xff0c;(C…
阅读更多...
【网络基础实战之路】基于三层架构实现一个企业内网搭建的实战详解

【网络基础实战之路】基于三层架构实现一个企业内网搭建的实战详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 【网络基础实战之路】基于…
阅读更多...
推荐前 6 名 JavaScript 和 HTML5 游戏引擎

推荐前 6 名 JavaScript 和 HTML5 游戏引擎

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建3D应用场景 事实是&#xff0c;自从引入JavaScript WebGL API以来&#xff0c;现代浏览器具有直观的功能&#xff0c;使它们能够渲染更复杂和复杂的2D和3D图形&#xff0c;而无需依赖第三方插件。 你可以用纯粹的JavaScript开…
阅读更多...
最新文章

Copyright @ 2022~2023