谷粒商城实战笔记-48~49-商品服务-API-三级分类-查询-树形展示三级分类数据-前端优化

news2024/9/24 12:26:47

文章目录

  • 一，48-商品服务-API-三级分类-查询-树形展示三级分类数据
    • 1，创建商品服务命名空间
    • 2，商品服务增加配置
    • 3，网关增加商品服务的路由配置
    • 4，前端树形展示
    • 5，测试
  • 二，49-商品服务-API-三级分类-删除-页面效果
    • 1，支持编辑三级分类
    • 2，体验优化
    • 完整代码
  • 高效干活：nacos快速启动

本节的主要内容是前后端联调，解决网关到商品服务的路由配置、前端的树形展示、已经前端的功能增加和体验优化。

一，48-商品服务-API-三级分类-查询-树形展示三级分类数据

1，创建商品服务命名空间

在nacos上创建product命名空间，所有商品服务相关的配置都放在这个空间。

在这里插入图片描述

把商品服务数据库相关的配置从本地迁移到nacos。

在这里插入图片描述

2，商品服务增加配置

商品服务增加bootstrap.yml配置文件，其中包含nacos配置中心信息：

  • 配置中心地址
  • 配置中心命名空间
  • 服务名称
spring:
  cloud:
    nacos:
      config:
        server-addr: 127.0.0.1:8848
        namespace: 709272d4-12a3-4657-b039-af32012c794f
  application:
    name: gulimall-product

3，网关增加商品服务的路由配置

网关配置路由。

        - id: gulimall-product
          uri: lb://gulimall-product
          predicates:
              - Path=/api/product/**
          filters:
              - RewritePath=/api/(?<segment>.*),/$\{segment}

在这里插入图片描述
这段配置是Spring Cloud Gateway的路由规则定义，它用于将特定的HTTP请求转发到微服务后端。下面是配置的详细解释：

  • id: gulimall-product:
    这是路由的唯一标识符，可以帮助你在配置中引用这个路由规则。

  • uri: lb://gulimall-product:
    这指定了当匹配路由规则时，请求应该被转发到哪个服务。这里的lb://表示使用负载均衡方式调用服务。gulimall-product是服务名，通常在服务发现机制（如Netflix Eureka、Consul等）中注册的服务实例会被查找。

  • predicates:
    这是一个谓词列表，用于定义哪些请求应该被此路由规则处理。这里的Path=/api/product/**表示任何以/api/product/开头的URL路径都会匹配这个规则。

  • filters:
    路由过滤器允许对请求和响应进行修改。这里的RewritePath=/api/(?<segment>.*),/$\{segment}是一个路径重写过滤器，其作用是将原始请求路径中的/api/部分移除，然后将剩余部分转发给目标服务。

    • /(?<segment>.*?): 这个正则表达式捕获从/api/开始直到下一个/前的所有字符（包括多个层级的路径），并将这部分保存为名为segment的组。
    • ,/$\{segment}: 这个字符串模板告诉Spring Cloud Gateway将捕获的segment值替换回URL中，但不包含/api/这部分。

举个例子，如果客户端发送一个请求到http://localhost:8080/api/product/list，根据上述配置，这个请求将会被重写为http://gulimall-product/list（假设gulimall-product服务监听在默认端口上），从而绕过/api/前缀直接转发给gulimall-product服务。

4，前端树形展示

为了将三级分类在前端以树形结构进行展示，需要对组件category.vue做几处调整。

在这里插入图片描述

  • 将数组名改为menus，更容易读
  • label改为name，是因为后台数据中分类名称字段名是那么

此外，请求接口获得分类数据后，为数组menus赋值。
在这里插入图片描述
完整代码

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

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    // 获取分类数据
    getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'get'
        }).then(({data}) => {
          console.log(data)
          this.dataListLoading = false
          this.menus = data.data
        })
      }
  },
  created() {
    this.getDataList()  // 获取分类数据
  }
}
</script>
<style scoped>
</style>

5，测试

在浏览器中访问，发现商品分类已经以树形结构进行展示了。

在这里插入图片描述

二，49-商品服务-API-三级分类-删除-页面效果

这一节的内容是优化前端界面，增加下列特性。

1，支持编辑三级分类

在每个三级分类后面增加两个按钮：

  • append，每个分类增加子分类
  • delete，删除当前分类

在这里插入图片描述

要实现这个效果，参考官网，在el-tree标签下增加如下代码。

<span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button type="text" size="mini" @click="() => append(data)">
          Append
        </el-button>
        <el-button type="text" size="mini" @click="() => remove(node, data)">
          Delete
        </el-button>
      </span>
    </span>

在这里插入图片描述

同时，脚本下增加两个相对应的函数。

在这里插入图片描述
保存代码，刷新浏览器界面，两个按钮就会出现分类后。

2，体验优化

①点击append和delete按钮时，不要收缩分类树

el-tree绑定属性即可：:expand-on-click-node="false"

②一级和二级分类才能append子分类，三级分类不能append

使用v-if结合分类数据的结构，满足条件才展示响应的按钮。

在这里插入图片描述

在Vue.js中，v-if是一个条件渲染指令，它根据表达式的真假来判断是否应该渲染一段代码。当表达式的结果为真时，对应的元素或片段将被插入到DOM中；反之，如果结果为假，则对应的元素或片段将不会被渲染，也就是说，它们完全不会存在于最终的DOM树中。

现在分析一下代码段：

<el-button v-if="node.level<=2" size="mini" @click="() => append(data)">
  Append
</el-button>
<el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)">
  Delete
</el-button>

两个<el-button>标签，每个都使用了v-if指令：

  • ①第一个按钮的v-if条件是node.level<= 2。这意味着只有当node.level属性的值小于等于2时，这个按钮才会被渲染。

  • ②第二个按钮的v-if条件是node.childNodes.length == 0。这意味着只有当节点没有子节点时，“Delete”按钮才会被渲染，只允许删除没有子节点的节点。

③增加复选框

在这里插入图片描述
el-tree增加show-checkbox属性，即可显示复选框。
在这里插入图片描述
④el-tree增加node-key在这里插入图片描述

在Element UI的el-tree组件中，node-key属性用于指定树节点的唯一标识符。在树形结构的数据集中，每个节点通常都有一个唯一的ID或键，用来区分不同的节点。node-key属性就是用来告诉el-tree组件使用哪个字段作为节点的唯一标识。

作用：

①唯一标识：通过node-key属性，你可以指定树节点数据模型中哪个字段的值作为节点的唯一标识符。这在处理复杂的树形数据结构时非常有用，因为每个节点的标识符需要是全局唯一的，以避免在操作节点（如展开、折叠、选择、删除等）时产生冲突。

②性能优化：使用node-key可以提高el-tree组件在大数据量下的性能，尤其是在节点频繁变动的情况下。这是因为当el-tree内部需要查找或操作某个节点时，它可以快速定位到该节点，而无需遍历整个树。

③状态管理：在使用el-tree时，组件可能会存储某些状态信息，比如哪些节点被选中或展开。node-key属性的值可以帮助组件在更新状态时准确地追踪和识别每个节点。

完整代码

<template>
  <el-tree node-key="catId" :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox>
    <span class="custom-tree-node" slot-scope="{ node, data }" >
      <span>{{ node.label }}</span>
      <span>
        <el-button v-if="node.level<=2" size="mini" @click="() => append(data)">
          Append
        </el-button>
        <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)">
          Delete
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    append(data){
      console.log(data);
    },
    remove(node, data){
      console.log(node, data);
    },
    // 获取分类数据
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log(data);
        this.dataListLoading = false;
        this.menus = data.data;
      });
    },
  },
  created() {
    this.getDataList(); // 获取分类数据
  },
};
</script>
<style scoped>
</style>

高效干活：nacos快速启动

windows上nacos的本地启动比较麻烦，每次要打开cmd，切换到对应目录，执行一个不容易记住命令，效率很低。

要解决这个问题也很简单，写一个bat脚本，配置到环境变量中，以后只要输入一个简单的命令就可以启动nacos了。

在这里插入图片描述

@echo off
setlocal enabledelayedexpansion
set NAOS_HOME=D:\sofeware\nacos-server-2.1.2\nacos
cd /d "!NAOS_HOME!\bin"
call startup.cmd -m standalone
endlocal

将这个脚本所在的目录配置到环境变量。

在这里插入图片描述

之后，只要在cmd输入下面的命令就可以启动nacos了。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

未来的智能交通系统：智能合约在交通管理中的应用前景

未来的智能交通系统：智能合约在交通管理中的应用前景

随着城市化进程的加快和交通问题日益突出&#xff0c;智能交通系统成为了解决城市交通拥堵和安全问题的重要手段。本文将探讨智能合约在未来智能交通系统中的应用前景&#xff0c;分析其在交通管理中的潜力和优势。 什么是智能交通系统&#xff1f; 智能交通系统利用先进的信息…
阅读更多...
数据结构经典测题3

数据结构经典测题3

1. 设有定义&#xff1a; char *p; &#xff0c;以下选项中不能正确将字符串赋值给字符型指针 p 的语句是【多选】&#xff08; &#xff09; A: pgetchar(); B: scanf("%s",p); C: char s[]"china"; ps; D: *p"china"; 答案为ABD A选项&…
阅读更多...
汇昌联信数字做拼多多运营实力好吗？

汇昌联信数字做拼多多运营实力好吗？

汇昌联信数字在拼多多运营方面的实力如何?汇昌联信数字作为一家专注于电子商务运营服务的公司&#xff0c;其在拼多多平台的运营能力是值得关注的。根据市场反馈和客户评价&#xff0c;汇昌联信数字在拼多多的运营实力表现良好&#xff0c;能够为客户提供专业的店铺管理、产品…
阅读更多...
学习大数据DAY23 Linux基本指令4与ngnix安装以及Shell,python编写环境配置

学习大数据DAY23 Linux基本指令4与ngnix安装以及Shell,python编写环境配置

目录 其他扩展类 echo 输出字符串 date 显示当前日期 (用于日期转字符串) date -d 日期解析&#xff08;用于字符串转日期&#xff09; date 设置日期 linux 网络对时 cal 查看日历 wget 命令 seq 命令 Linux 定时执行计划 特殊符号说明 linux 添加硬盘分区挂载 上…
阅读更多...
PotatoTool 蓝队版 V1.3 发布：增强功能和性能优化

PotatoTool 蓝队版 V1.3 发布：增强功能和性能优化

一、简介 经过广大网友的反馈和建议&#xff0c;我们对V1.1版本中存在的问题进行了优化。其中&#xff0c;我们针对MD5库进行了本地化处理&#xff0c;以提高查询效率。然而&#xff0c;这也导致了软件体积的飙升。二、优化概述 1、兼容性 兼容arm架构系统 2、UI 2.1 界面…
阅读更多...
Meta革命性发布：Llama 3.1——性能最强的AI开源模型，开启智能新时代！

Meta革命性发布：Llama 3.1——性能最强的AI开源模型，开启智能新时代！

前言 &#x1f680; Meta隆重推出Llama 3.1&#xff1a;迄今为止性能最强的AI模型 Meta公司近日发布了他们最新的AI语言模型——Llama 3.1&#xff0c;这一消息迅速在科技界掀起了波澜。作为猫头虎技术团队&#xff0c;我们将为大家详细解析Llama 3.1的强大功能及其应用前景。…
阅读更多...
unity文字||图片模糊

unity文字||图片模糊

一.文字模糊 1、增大字体大小后等比缩放 快捷键R 2、更改字体渲染模式 二.图片模糊 1、更改过滤模式 2、更改格式或者压缩 3、如果只是图片边缘看不清&#xff0c;可以增加canvas/图片的每单位参考像素
阅读更多...
C++学习笔记01-语法基础（问题-解答自查版）

C++学习笔记01-语法基础（问题-解答自查版）

前言 以下问题以Q&A形式记录&#xff0c;基本上都是笔者在初学一轮后&#xff0c;掌握不牢或者频繁忘记的点 Q&A的形式有助于学习过程中时刻关注自己的输入与输出关系&#xff0c;也适合做查漏补缺和复盘。 本文对读者可以用作自查&#xff0c;答案在后面&#xff0…
阅读更多...
AV1技术学习：Quantization

AV1技术学习：Quantization

量化是对变换系数进行&#xff0c;并将量化索引熵编码。AV1的量化参数 QP 的取值范围是0 ~ 255。 一、Quantization Step Size 在给定的 QP 下&#xff0c;DC 系数的量化步长小于 AC 系数的量化步长。DC 系数和 AC 系数从 QP 到量化步长的映射如下图所示。当 QP 为 0 时&…
阅读更多...
inventory主机清单管理与playbook剧本

inventory主机清单管理与playbook剧本

1 inventory主机清单管理 Inventory支持对主机进行分组&#xff0c;每个组内可以定义多个主机&#xff0c;每个主机都可以定义在任何一个或多个主机组内。 如果是名称类似的主机&#xff0c;可以使用列表的方式标识各个主机。 vim /etc/ansible/hosts [webservers] 192.168.8…
阅读更多...
L60---1189. “气球” 的最大数量(排序）---Java版

L60---1189. “气球” 的最大数量(排序）---Java版

1.题目 2.思路 (1)用字典的方法 (2)今天脑子已经无法思考了&#xff0c;明天再补充 3.代码实现 class Solution {public int maxNumberOfBalloons(String text) {// 单词 "balloon" 中各字母的需求Map<Character, Integer> required new HashMap<>()…
阅读更多...
leetcode3098. 求出所有子序列的能量和

leetcode3098. 求出所有子序列的能量和

官解 class Solution(object):# 定义常量mod int(1e9 7) # 模数&#xff0c;用于防止结果溢出inf float(inf) # 无穷大&#xff0c;用于初始化时的特殊值def sumOfPowers(self, nums, k):n len(nums) # 数组长度res 0 # 用于存储最终结果# 三维动态规划表&#xff0c;…
阅读更多...
JAVA.包、final、权限

JAVA.包、final、权限

包 final 权限 代码块 1.构造代码块 创建这个本类的对象的时候会先指向构造代码块再执行构造方法 作用&#xff1a;把构造方法重复的部分抽取出来 2.静态代码块 static 随着类的加载而加载&#xff0c;只执行一次。 作用&#xff1a;数据初始化&#xff0c;比如在学生管…
阅读更多...
AV1技术学习：Constrained Directional Enhancement Filter

AV1技术学习：Constrained Directional Enhancement Filter

CDEF允许编解码器沿某些(可能是倾斜的)方向应用非线性消阶滤波器。它以88为单位进行。如下图所示&#xff0c;通过旋转和反射所示的三个模板来定义八个预设方向。 Templates of preset directions and their associated directions. The templates correspond to directions of…
阅读更多...
从零开始：在Linux系统上创建和管理Conda环境的详细指南【安装教程】

从零开始：在Linux系统上创建和管理Conda环境的详细指南【安装教程】

引言 在数据科学和机器学习领域&#xff0c;使用虚拟环境来管理不同项目的依赖是一个常见且重要的实践。Conda是一个强大的包管理和环境管理工具&#xff0c;广泛应用于Python和R的开发环境中。本文将详细介绍如何在Ubuntu系统上从零开始安装和使用Conda&#xff0c;通过创建和…
阅读更多...
keras框架的to_categorical方法

keras框架的to_categorical方法

在阅读keras的中文文档时候&#xff0c;对于这里的代码不了解 y_train keras.utils.to_categorical(np.random.randint(10, size(1000, 1)), num_classes10)这里应该拆分为两部分看待 第一个是np.random.randint() 查看numpy文档知道&#xff1a; random.randint ( low , hi…
阅读更多...
设计模式--创建型

设计模式--创建型

实现 #include <iostream> #include <memory>// 抽象产品类 class Product {public:virtual void Operation() const 0; };// 具体产品 类A class ConcreteProductA : public Product {public:virtual void Operation() const override {std::cout << &quo…
阅读更多...
Tomcat部署、优化、压力测试

Tomcat部署、优化、压力测试

目录 Tomcat概念 核心组件 Web容器 Web服务器之间解析请求的区别 Apache HTTP Server Nginx Tomcat Servlet容器 JSP容器 字节码文件 Tomcat表面处理请求的过程 Tomcat底层处理请求的过程 内部结构 Tomcat部署 JRE环境配置 PATH冒号位置的区别 安装Tomcat 目…
阅读更多...
连接Redis异常：JedisMovedDataException

连接Redis异常：JedisMovedDataException

redis.clients.jedis.exceptions.JedisMovedDataException: MOVED 5798 192.168.187.138:6379 在使用JAVA API连接redis的时候&#xff0c;出现了异常&#xff1a; 问题的原因 JAVA API实现是redis集群实现方式&#xff0c;而在配置文中就配置的是单结点的方式。 Moved表示使…
阅读更多...
MySQL的高可用(MHA)

MySQL的高可用(MHA)

高可用模式下的故障切换&#xff0c;基于主从复制。 单点故障和主从复制不能切换的问题。 至少需要三台。 故障切换过程0-30秒 vip地址&#xff0c;根据vip地址所在的主机&#xff0c;确定主备。 主 vip 备 vip 主和备不是优先级确定的&#xff0c;主从复制的时候就确定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023