分布式微服务项目随手笔记

0 前后端数据交互的数据形式

 

1 无论是使用数组还是 List 集合，Spring 的 HTTP 消息转换器都能够处理并映射复杂的 JSON 数据。这得益于 Spring 框架使用的 Jackson 库（或其他可配置的 JSON 处理库），它能够智能地将 JSON 数据绑定到 Java 对象上。

 

是的，在 Spring Boot 中，无论是使用数组还是 List 集合，Spring 的 HTTP 消息转换器都能够处理并映射复杂的 JSON 数据。这得益于 Spring 框架使用的 Jackson 库（或其他可配置的 JSON 处理库），它能够智能地将 JSON 数据绑定到 Java 对象上。

考虑到您提供的复杂 JSON 数据，您可以根据需要在您的 Spring Boot 应用程序中定义相应的 Java 类，并使用数组或 List 集合来接收嵌套的数组数据。Spring Boot 会自动处理 JSON 到 Java 对象的映射，不管目标类型是数组还是 List。

例如，假设您有以下的 JSON 结构：

{
  "baseAttrs": [
    {"attrId": 1, "attrValues": "非触摸屏", "showDesc": 1},
    {"attrId": 2, "attrValues": "LED显示", "showDesc": 1}
  ],
  "skus": [
    {
      "attr": [
        {"attrId": 11, "attrName": "面积~~", "attrValue": "100*100"},
        {"attrId": 15, "attrName": "颜色", "attrValue": "黑色"}
      ],
      "skuName": "海信电视-01 100*100 黑色"
    }
  ]
}

您可以定义相应的 Java 类来接收这个 JSON 数据，如下：

public class Product {
    private List<BaseAttr> baseAttrs;
    private Sku[] skus;
    // getters and setters
}

public class BaseAttr {
    private int attrId;
    private String attrValues;
    private int showDesc;
    // getters and setters
}

public class Sku {
    private List<Attr> attr;
    private String skuName;
    // getters and setters
}

public class Attr {
    private int attrId;
    private String attrName;
    private String attrValue;
    // getters and setters
}

在这个例子中，baseAttrs 使用了 List 集合，而 skus 使用了数组。这展示了在同一个对象中同时使用 List 和数组是完全可行的。Spring Boot 在处理 POST 请求并将 JSON 数据映射到这些 Java 对象时，会自动根据定义的类型（数组或 List）来处理数据。

因此，不论是选择使用数组还是 List，只要确保您的 Java 类结构与前端发送的 JSON 数据结构相匹配，Spring Boot 都能够正确地映射这些数据。

 

 

@RequestBody 注解在 Spring Framework 中用于将 HTTP 请求体的内容绑定到控制器方法的参数上。当使用此注解时，Spring 的 HTTP 消息转换器会自动将请求体中的内容（通常是 JSON 或 XML）解析并映射到指定的 Java 对象上。这个过程是自动的，依赖于 Spring Boot 配置的消息转换器，通常是基于 Jackson 或 Gson 库进行 JSON 数据的序列化和反序列化。

这里是一个更精确且全面的描述：

@RequestBody 注解主要用于处理 HTTP POST 和 PUT 请求，它告诉 Spring 框架的调度器，方法参数应该被绑定到 Web 请求的体部。这个注解使得控制器能够接收复杂类型的数据结构（如自定义的 Java 对象），而非仅仅是请求参数或路径变量。Spring 框架通过使用配置的 HTTP 消息转换器自动地将请求体内容转换为相应的 Java 类型，从而简化了数据绑定的过程。转换过程不仅限于 JSON，还支持其他格式如 XML，但具体支持哪些格式取决于应用程序上下文中配置的消息转换器。

使用 List 集合的控制器接口示例

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class ProductController {

    @PostMapping("/products")
    public String addProducts(@RequestBody List<Product> products) {
        // 处理接收到的产品列表
        return "Products added";
    }
}

使用数组的控制器接口示例

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ProductController {

    @PostMapping("/products")
    public String addProducts(@RequestBody Product[] products) {
        // 处理接收到的产品数组
        return "Products added";
    }
}

在这两个示例中，无论是接收一个 List 集合还是一个数组，@RequestBody 注解都能够确保请求体中的数据被正确地解析并映射到相应的 Java 对象上。选择使用哪一种数据结构取决于你的具体需求和偏好。

2 前端使用json数组发出数据，后端可以使用数组或者List集合进行接收

是的，前端发送的 JSON 数据的形式可以对应到后端的不同实体类结构上，无论这些结构是数组还是 List 集合。关键是后端定义的实体类（或数据传输对象DTO）需要能够与前端发送的 JSON 数据结构相匹配。Spring Boot 的 @RequestBody 注解和背后的消息转换机制负责将接收到的 JSON 数据映射到相应的 Java 类型上。

这意味着：

  • 如果前端发送的是一个 JSON 对象数组（即 JSON 中的一个数组），后端可以选择将这个数组映射到 Java 中的数组类型或是一个 List 集合。选择哪一个主要取决于后端处理数据的需求和偏好。

  • 如果后端期望的是一个 List 集合，你只需在控制器方法的参数中使用 List 类型。Spring 将自动将 JSON 数组转换成相应的 List 集合。

  • 相似地，如果后端期望的是数组类型，那么在控制器方法的参数中直接使用数组类型即可。Spring 同样能够处理这种映射。

示例说明

假设前端发送如下格式的 JSON 数组：

[
  {
    "name": "产品A",
    "price": 100
  },
  {
    "name": "产品B",
    "price": 200
  }
]

后端可以使用以下任一方式接收数据：

使用 List 集合的控制器方法

@PostMapping("/addProducts")
public ResponseEntity<?> addProducts(@RequestBody List<Product> products) {
    // 这里处理产品列表
    return ResponseEntity.ok("Received products");
}

使用数组的控制器方法

@PostMapping("/addProducts")
public ResponseEntity<?> addProducts(@RequestBody Product[] products) {
    // 这里处理产品数组
    return ResponseEntity.ok("Received products");
}

在这两种情况下，只要 Product 类的属性与前端发送的 JSON 数据中的键匹配，Spring 都能够正确地将数据映射到 Java 对象上。

因此，确实，前端使用 JSON 数组发出数据时，后端可以灵活选择使用数组或者 List 集合进行接收，主要确保数据结构之间能夠对应上即可。

 

3 前端发送的 JSON 中包含"skus": []（一个空数组）或者没有发送skus字段的区别

如果后端是这样声明变量的：

private List<Skus> skus;

并且没有在类的构造函数中或者直接在声明时对 skus 进行初始化，那么接收到的行为将取决于前端发送的 JSON 数据：

  • 如果前端发送的 JSON 中包含 "skus": []（一个空数组），那么 skus 会被初始化为一个空的 List。在这种情况下，skus.size() 为 0，表明列表中没有元素。

  • 如果前端发送的 JSON 中根本没有 skus 字段，那么 skus 属性将保持为 null，除非你在某处（比如在类的构造函数中或者在声明时）显式地对它进行了初始化。

为了确保 skus 不会是 null，从而避免潜在的 NullPointerException，推荐在声明时就对其进行初始化，如下所示：

private List<Skus> skus = new ArrayList<>();

这样做的好处是，无论前端是否发送 skus 字段，或者该字段是否为空数组，后端处理时都不需要担心 skus 为 null 的情况，可以直接使用 skus 进行操作（如遍历、添加元素等），这会使代码更加简洁和健壮。

对于实际开发中，通常建议对于此类可能由前端发送的集合类型的属性，在后端声明时进行初始化，这样可以减少在使用这些属性时需要进行 null 检查的情况，使得代码更加清晰易读。

 

4

1 登录到Linux的指令

#进入目录 D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7
#在该目录下进入到cmd命令台输入vagrant up 开启Linux虚拟机系统
#启动Linux虚拟机
vagrant up
#关闭Linux虚拟机
vagrant halt

#进入目录 D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7
#在该目录下进入到cmd命令台输入vagrant ssh 登录到Linux系统
#使用ssh连接到Linux虚拟机	默认用户名是vagrant
vagrant ssh

#退出ssh连接
exit

D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7>vagrant init centos/7
==> vagrant: A new version of Vagrant is available: 2.4.1 (installed version: 2.2.18)!
==> vagrant: To upgrade visit: https://www.vagrantup.com/downloads.html

A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Box 'centos/7' could not be found. Attempting to find and install...
    default: Box Provider: virtualbox
    default: Box Version: >= 0
==> default: Loading metadata for box 'centos/7'
    default: URL: https://vagrantcloud.com/centos/7
==> default: Adding box 'centos/7' (v2004.01) for provider: virtualbox
    default: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/2004.01/providers/virtualbox/unknown/vagrant.
box
Download redirected to host: cloud.centos.org
    default:
    default: Calculating and comparing box checksum...
==> default: Successfully added box 'centos/7' (v2004.01) for 'virtualbox'!
==> default: Importing base box 'centos/7'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'centos/7' version '2004.01' is up to date...
==> default: Setting the name of the VM: vbcentos7_default_1707581882874_11921
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default:
    default: Vagrant insecure key detected. Vagrant will automatically replace
    default: this with a newly generated keypair for better security.
    default:
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if it's present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Checking for guest additions in VM...
    default: No guest additions were detected on the base box for this VM! Guest
    default: additions are required for forwarded ports, shared folders, host only
    default: networking, and more. If SSH fails on this machine, please install
    default: the guest additions and repackage the box to continue.
    default:
    default: This is not an error message; everything may continue to work properly,
    default: in which case you may ignore this message.
==> default: Rsyncing folder: /cygdrive/d/Java_developer_tools/DistributedMicroservicesProject/vbcentos7/ => /vagrant

D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7>vagrant ssh
[vagrant@localhost ~]$ pwd
/home/vagrant
[vagrant@localhost ~]$ ls
[vagrant@localhost ~]$ cd /
[vagrant@localhost /]$ ls
bin   dev  home  lib64  mnt  proc  run   srv       sys  usr      var
boot  etc  lib   media  opt  root  sbin  swapfile  tmp  vagrant
[vagrant@localhost /]$ cat /etc/centos-release
CentOS Linux release 7.8.2003 (Core)
[vagrant@localhost /]$ exit
logout
Connection to 127.0.0.1 closed.

D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7>

查看当前版本CentOS Linux 版本 cat /etc/centos-release

image-20240212061454919

要关闭使用 Vagrant 启动的 CentOS 7 虚拟机，您可以使用 vagrant halt 命令。这个命令会优雅地关闭虚拟机，确保所有的进程都正确地停止，并且虚拟机状态被安全地保存。

在您的项目目录（在这个例子中是 D:\Java_developer_tools\DistributedMicroservicesProject\vbcentos7）下打开命令行界面，然后运行以下命令：

vagrant halt

如果您想要暂时挂起虚拟机（保存其当前状态以便可以快速恢复），可以使用 vagrant suspend。要重新启动被挂起或停止的虚拟机，可以使用 vagrant up。 若要彻底删除虚拟机（包括其所有的文件和状态），可以使用 vagrant destroy。请注意，vagrant destroy 命令会移除虚拟机，如果你再次需要它，将必须重新创建和配置。

 

2 禁用Hyper-V

禁用Hyper-V可以通过几种不同的方法完成，具体取决于您使用的Windows版本。下面是一些常用的方法：

通过Windows功能禁用

  1. 在搜索栏输入“Windows功能”，然后选择“打开或关闭Windows功能”。

  2. 在弹出的窗口中，找到“Hyper-V”，取消选中旁边的复选框。

  3. 点击“确定”按钮，然后根据提示重启计算机。

通过命令提示符禁用

  1. 以管理员身份打开命令提示符。可以在搜索栏输入“cmd”，然后右键“命令提示符”，选择“以管理员身份运行”。

  2. 在命令提示符窗口中，输入以下命令来禁用Hyper-V：

    dism.exe /Online /Disable-Feature:Microsoft-Hyper-V

  3. 按照提示重启计算机以完成更改。

通过PowerShell禁用

  1. 以管理员身份打开PowerShell。可以在搜索栏输入“PowerShell”，然后右键“Windows PowerShell”，选择“以管理员身份运行”。

  2. 在PowerShell窗口中，输入以下命令来禁用Hyper-V：

    Disable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V-All

  3. 按照提示重启计算机以完成更改。

注意事项

  • 禁用Hyper-V后，任何依赖于Hyper-V的功能或服务（如Windows沙盒、Windows子系统 for Linux 2 (WSL2)）可能无法正常工作。

  • 如果您的计算机上安装了其他虚拟化软件（如VirtualBox或VMware），禁用Hyper-V可能有助于解决兼容性问题。

  • 在某些情况下，特别是在Windows 10或Windows 11上，您可能还需要禁用与虚拟化相关的其他功能，如虚拟机平台和Windows Hypervisor Platform。

在完成这些步骤之后，Hyper-V应该被禁用，您可以尝试重新使用VirtualBox或其他虚拟化软件。如果您决定在将来重新启用Hyper-V，只需按照上述步骤操作，但选择启用Hyper-V功能即可。

3 禁用Hyper-V会影响其他虚拟软件的启动吗？比如VMware

禁用Hyper-V对其他虚拟化软件（如VMware Workstation或Oracle VM VirtualBox）的影响取决于具体的虚拟化技术和软件版本。以下是一些可能的影响和考虑因素：

VMware Workstation

  • 正面影响：禁用Hyper-V通常对VMware Workstation是有益的，尤其是在早期版本中。因为Hyper-V是一种类型1虚拟化技术，而VMware Workstation是类型2，两者同时运行可能会引起冲突。禁用Hyper-V可以提高VMware的性能和兼容性。

  • 启用VT-x/EPT或AMD-V/RVI：禁用Hyper-V后，确保在BIOS/UEFI设置中启用了VT-x（对于Intel处理器）或AMD-V（对于AMD处理器）及其扩展（如EPT或RVI），这对于VMware正常工作是必要的。

Oracle VM VirtualBox

  • 正面影响：对于VirtualBox，禁用Hyper-V也往往有好处。尽管VirtualBox从5.0版本开始提供了对Hyper-V作为后备执行引擎的支持，但这可能会降低性能。完全禁用Hyper-V可以让VirtualBox直接利用硬件虚拟化，从而提高性能。

  • 版本兼容性：确保您使用的VirtualBox版本最优化地支持您的操作系统，尤其是在没有Hyper-V的情况下。

其他虚拟化软件

  • 对于其他虚拟化软件，如QEMU、KVM（在Linux上）等，禁用Hyper-V不会直接影响它们的运行。这些软件通常使用不同的虚拟化技术，与Hyper-V的兼容性问题较少。

注意事项

  • 操作系统功能：禁用Hyper-V可能会影响依赖于Hyper-V的Windows功能，如Windows沙箱和Windows子系统 for Linux（WSL 2）。这些功能需要Hyper-V来运行。

  • 性能考虑：在某些情况下，如果您的工作或开发环境不依赖于Hyper-V特定的功能，禁用Hyper-V可能会带来性能上的提升。

  • 软件版本：在禁用Hyper-V之前，请检查您所使用的虚拟化软件的文档，以确认其对Hyper-V的支持情况以及不使用Hyper-V时的推荐配置。

总的来说，禁用Hyper-V通常对使用VMware Workstation或VirtualBox等其他虚拟化软件有积极影响，特别是在解决兼容性问题和提高性能方面。然而，做出改变之前，请考虑任何依赖于Hyper-V的功能或服务。

 

4 宿主机和Linux网络互通

windows宿主机在VirtualBox虚拟网络里的IP地址如下:192.168.56.1

使用命令行命令ipconfig /all

image-20240211223037813

 

image-20240211223223891

#windows真实的上网ip
192.168.0.13

#windows宿主机在VirtualBox虚拟网络里的IP 
192.168.0.13

#vagrant配置的CentOS7.8 Linux 的ip
192.168.56.100

#重新加载vagrant配置文件
vagrant reload

#登录到Linux
vagrant ssh

#查看当前ip(注意ifconfig此时用不了，需要安装netTools)
ip addr

 

查看修改后的Linux虚拟机IP：

image-20240211223707217

 

宿主机ping Linux虚拟机test1:

C:\Users\yangd>ping 192.168.56.100

正在 Ping 192.168.56.100 具有 32 字节的数据:
来自 192.168.56.100 的回复: 字节=32 时间<1ms TTL=255
来自 192.168.56.100 的回复: 字节=32 时间<1ms TTL=64
来自 192.168.56.100 的回复: 字节=32 时间<1ms TTL=64
来自 192.168.56.100 的回复: 字节=32 时间<1ms TTL=64

192.168.56.100 的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 0ms，最长 = 0ms，平均 = 0ms

C:\Users\yangd>

 

Linux虚拟机ping windows宿主机在VirtualBox虚拟网络里的IP：192.168.56.1 test2:

image-20240211223037813

 [vagrant@localhost ~]$ ping 192.168.56.1
PING 192.168.56.1 (192.168.56.1) 56(84) bytes of data.
64 bytes from 192.168.56.1: icmp_seq=1 ttl=128 time=0.232 ms
64 bytes from 192.168.56.1: icmp_seq=2 ttl=128 time=0.208 ms
64 bytes from 192.168.56.1: icmp_seq=3 ttl=128 time=0.221 ms
64 bytes from 192.168.56.1: icmp_seq=4 ttl=128 time=0.207 ms
^C
--- 192.168.56.1 ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3016ms
rtt min/avg/max/mdev = 0.207/0.217/0.232/0.010 ms
[vagrant@localhost ~]$

 

 

Linux虚拟机ping 宿主机 实际上网地址 test3: 测试虚拟机能否访问外部网络

image-20240211224611095

 [vagrant@localhost ~]$ ping 192.168.0.13
PING 192.168.0.13 (192.168.0.13) 56(84) bytes of data.
64 bytes from 192.168.0.13: icmp_seq=1 ttl=127 time=0.444 ms
64 bytes from 192.168.0.13: icmp_seq=2 ttl=127 time=0.426 ms
64 bytes from 192.168.0.13: icmp_seq=3 ttl=127 time=0.474 ms
64 bytes from 192.168.0.13: icmp_seq=4 ttl=127 time=0.423 ms
^C
--- 192.168.0.13 ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3026ms
rtt min/avg/max/mdev = 0.423/0.441/0.474/0.032 ms
[vagrant@localhost ~]$
--------------------------------------------------------
[vagrant@localhost ~]$ ping www.baidu.com
PING www.baidu.com (198.18.0.78) 56(84) bytes of data.
64 bytes from 198.18.0.78 (198.18.0.78): icmp_seq=1 ttl=63 time=0.451 ms
64 bytes from 198.18.0.78 (198.18.0.78): icmp_seq=2 ttl=63 time=0.489 ms
64 bytes from 198.18.0.78 (198.18.0.78): icmp_seq=3 ttl=63 time=0.495 ms
64 bytes from 198.18.0.78 (198.18.0.78): icmp_seq=4 ttl=63 time=0.482 ms
^C
--- www.baidu.com ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3003ms
rtt min/avg/max/mdev = 0.451/0.479/0.495/0.022 ms
[vagrant@localhost ~]$


 

5 如何使用yum安装netTools,使得Linux可以使用ifconfig命令呢？

要在基于Red Hat的Linux发行版（如RHEL, CentOS, Fedora等）上安装net-tools包（这个包包含了ifconfig命令），你可以使用yum（在较旧的版本中）或dnf（在较新的版本中，如Fedora和RHEL 8及以上版本）包管理器。以下是使用yum安装net-tools的步骤：

  1. 打开终端。

  2. 输入以下命令来安装net-tools：

    sudo yum install net-tools

    • 这条命令会提示你输入管理员密码，输入后按回车继续。

    • 系统可能会询问你是否确认下载和安装，输入y然后按回车确认。

安装完成后，你就可以使用ifconfig命令来查看网络接口的配置了。只需在终端中输入：

ifconfig

如果你的系统使用的是dnf包管理器（如在Fedora或RHEL 8及以上版本），安装命令略有不同：

sudo dnf install net-tools

以上步骤适用于大多数基于Red Hat的Linux发行版。如果你使用的是基于Debian的发行版（如Ubuntu），则需要使用apt包管理器来安装net-tools：

sudo apt-get update
sudo apt-get install net-tools

这些命令将确保你的系统能够使用ifconfig命令来管理和查看网络接口。

 

6 vagrant ssh登录后要切换成root用户，密码默认就是vagrant

image-20240212051538894

 

7 启动docker

 

image-20240212053539810

#安装docker
https://docs.docker.com/engine/install/centos/
#安装命令执行$号后面的
$ sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
                  

$ sudo yum install -y yum-utils
$ sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker- ce.repo

$ sudo yum install docker-ce docker-ce-cli containerd.io 
安装完成
----------------------------------------------------
#启动docker
[vagrant@localhost ~]$ sudo systemctl start docker
#查看当前版本
[vagrant@localhost ~]$ docker -v
Docker version 25.0.3, build 4debf41
#查看当前安装的有哪些镜像
[vagrant@localhost ~]$ sudo docker images
REPOSITORY   TAG       IMAGE ID   CREATED   SIZE

#设置docker自启动
[vagrant@localhost ~]$ sudo systemctl enable docker
Created symlink from /etc/systemd/system/multi-user.target.wants/docker.service to /usr/lib/systemd/system/docker.service.
[vagrant@localhost ~]$

 

执行命令前面要加sudo ，否则执行失败，因为这里需要管理员权限

image-20240212064652234

 

配置阿里云容器 镜像加速，作用是让我们用docker拉取国外docker镜像速度变快

image-20240212060119324

 

https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

image-20240212060220055

 

 

我这里没有配置！！

 

8 如何修改容器内部默认的3306端口呢？对于MySQL，这通常是3306。我想让它改变，如何做

要修改MySQL容器内部使用的默认端口（通常是3306）到另一个端口，你需要调整MySQL的配置文件。在Docker容器中，这通常意味着你需要采取以下步骤：

1. 创建自定义的MySQL配置文件

首先，创建一个自定义的MySQL配置文件，比如my.cnf（或者任何你想命名的文件），在该文件中指定新的端口配置。例如，如果你想将MySQL的端口改为3307，你的配置文件内容可能如下：

[mysqld]
port=3307

2. 使用Dockerfile创建自定义MySQL镜像

接下来，创建一个Dockerfile来构建一个包含你自定义配置的MySQL镜像。你的Dockerfile可能看起来像这样：

FROM mysql:latest
COPY my.cnf /etc/mysql/my.cnf

这个Dockerfile基于官方的MySQL镜像，将你的自定义配置文件复制到容器内适当的位置（/etc/mysql/my.cnf是MySQL的标准配置文件路径之一）。

3. 构建自定义MySQL镜像

在包含Dockerfile和my.cnf文件的目录下运行以下命令来构建你的自定义镜像：

docker build -t my-custom-mysql .

4. 运行你的自定义MySQL容器

最后，使用你的自定义镜像启动MySQL容器，并映射到新的端口。如果你将MySQL内部端口更改为3307，你也可能希望将容器的3307端口映射到宿主机的某个端口（这里以3307为例）：

docker run -p 3307:3307 --name my-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw my-custom-mysql

注意

  • 确保在my.cnf配置文件中指定的端口与docker run命令中的端口映射相匹配。

  • 修改容器内部服务的端口可能需要你调整任何依赖于这个服务的应用配置，以确保它们连接到正确的端口。

  • 如果你还需要修改其他MySQL配置，可以在my.cnf文件中添加这些配置项。

通过这种方式，你可以控制容器内部MySQL实例使用的端口，以及如何将其映射到宿主机上。

9 这里你提出的自定义端口的mysql镜像方式，是需要根据官方镜像重新复制一份新的镜像对吗？

是的，按照我之前描述的步骤，你会基于官方的MySQL镜像创建一个新的自定义镜像。这个过程涉及到创建一个包含你自定义配置（如端口号变更）的配置文件，然后通过编写一个Dockerfile来指定在构建自定义镜像时将这个配置文件复制到镜像内的正确位置。这样做的目的是为了让MySQL在容器启动时使用这个自定义配置，从而监听在一个非默认端口上。

这个过程实质上是创建了一个新的镜像，它在官方MySQL镜像的基础上添加了你的自定义配置。虽然这个新镜像包含了官方镜像的所有内容，但它会根据你提供的配置文件在启动时使用不同的设置（如不同的端口号）。

这种方法的好处是提供了灵活性和控制力，允许你根据需要调整MySQL的配置，而不仅仅是端口号。例如，你可以调整缓存大小、字符集或任何其他MySQL支持的配置选项。此外，通过创建自定义镜像，你可以确保你的配置更改会被版本控制和重用，这对于维护多个环境或需要在团队中共享配置的情况特别有用。

要注意的是，每当官方MySQL镜像更新时，你可能需要重新构建你的自定义镜像以获取最新的安全修复和功能更新。这是管理自定义Docker镜像时的一个常见考虑因素。

10 拉取mysql镜像并启动

 

#需要执行的命令
sudo docker pull mysql:5.7

sudo docker images

#下面这个老韩给的代码不好使
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

#下面这个好使
sudo docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/mysql/data:
/var/lib/mysql -v /mydata/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7


#下面这个好使，是上面这个调整格式后的代码，区别就是加了一层目录`/conf.d`,目录没有会自动创建
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql/conf.d \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

#查看mysql容器是否启动成功，即看STATUS是否显示为UP
sudo docker ps
#启动mysql容器 下面这里的mysql 注意代表的是容器的名称！！
sudo docker start mysql

#重启mysql容器
sudo docker restart mysql

#停止mysql容器
sudo docker stop mysql

# 进入到mysql镜像(独立的Linux环境)的命令
sudo docker exec -it mysql /bin/bash

# 从Docker守护进程中删除一个名为 `mysql` 的容器。
sudo docker rm mysql 
------------------------------------------------
#过程演示
[vagrant@localhost ~]$ sudo docker pull mysql:5.7
5.7: Pulling from library/mysql
20e4dcae4c69: Pull complete
1c56c3d4ce74: Pull complete
e9f03a1c24ce: Pull complete
68c3898c2015: Pull complete
6b95a940e7b6: Pull complete
90986bb8de6e: Pull complete
ae71319cb779: Pull complete
ffc89e9dfd88: Pull complete
43d05e938198: Pull complete
064b2d298fba: Pull complete
df9a4d85569b: Pull complete
Digest: sha256:4bc6bc963e6d8443453676cae56536f4b8156d78bae03c0145cbe47c2aad73bb
Status: Downloaded newer image for mysql:5.7
docker.io/library/mysql:5.7
[vagrant@localhost ~]$ docker images
permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Fru
n%2Fdocker.sock/v1.24/images/json": dial unix /var/run/docker.sock: connect: permission denied
[vagrant@localhost ~]$ sudo docker images
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
mysql        5.7       5107333e08a8   2 months ago   501MB
[vagrant@localhost ~]$ docker images
permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Fru
n%2Fdocker.sock/v1.24/images/json": dial unix /var/run/docker.sock: connect: permission denied
[vagrant@localhost ~]$ sudo docker images
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
mysql        5.7       5107333e08a8   2 months ago   501MB

#下面老韩给的代码不好使
[vagrant@localhost ~]$ sudo docker run -p 3306:3306 --name mysql \
> -v /mydata/mysql/log:/var/log/mysql \
> -v /mydata/mysql/data:/var/lib/mysql \
> -v /mydata/mysql/conf:/etc/mysql \
> -e MYSQL_ROOT_PASSWORD=root \
> -d mysql:5.7
6bf06073853939b6fc870258547e61a40a6d6ec02975df3f76cfc0bf98fbb1e6
[vagrant@localhost ~]$
[vagrant@localhost ~]$ sudo docker ps
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

#使用下面的代码好使，猜测mysql5.7 更新后目录结构改变了
[vagrant@localhost etc]$ sudo docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/mysql/data:
/var/lib/mysql -v /mydata/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7
ab0cd95f6c9f883f34c2c0fb93f80e27e9bb1ce8e81e44bf235e7d43fb3b5bb4
[vagrant@localhost etc]$ sudo docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS
               NAMES
ab0cd95f6c9f   mysql:5.7   "docker-entrypoint.s…"   19 seconds ago   Up 18 seconds   0.0.0.0:3306->3306/tcp, :::3306->3306/t
cp, 33060/tcp   mysql
[vagrant@localhost etc]$

# 进入到mysql镜像(独立的Linux环境)的命令
[vagrant@localhost etc]$ sudo docker exec -it mysql /bin/bash
bash-4.2# ls
bin   dev                         entrypoint.sh  home  lib64  mnt  proc  run   srv  tmp  var
boot  docker-entrypoint-initdb.d  etc            lib   media  opt  root  sbin  sys  usr
bash-4.2# cd /
bash-4.2# ls
bin   dev                         entrypoint.sh  home  lib64  mnt  proc  run   srv  tmp  var
boot  docker-entrypoint-initdb.d  etc            lib   media  opt  root  sbin  sys  usr
bash-4.2# mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.7.44 MySQL Community Server (GPL)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)

mysql> exit;
Bye
#当前登录的用户是root
bash-4.2# whoami
root
bash-4.2#
#退出docker容器 mysql镜像的内部Linux系统 `exit`
bash-4.2# exit
exit
[vagrant@localhost etc]$

启动成功如下

image-20240212072854344

 

image-20240212075342712

 

 

11 Docker mysql容器常用命令

#下面这个好使，是上面这个调整格式后的代码，区别就是加了一层目录`/conf.d`,目录没有会自动创建
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql/conf.d \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

#同一个mysql5.7镜像可以支持运行多个mysql容器
sudo docker run -p 3307:3306 --name mysql2 \
-v /mydata2/mysql/log:/var/log/mysql \
-v /mydata2/mysql/data:/var/lib/mysql \
-v /mydata2/mysql/conf:/etc/mysql/conf.d \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

#查看mysql容器是否启动成功，即看STATUS是否显示为UP
sudo docker ps
#启动mysql容器 下面这里的mysql 注意代表的是容器的名称！！
sudo docker start mysql

#重启mysql容器
sudo docker restart mysql

#停止mysql容器
sudo docker stop mysql

# 进入到mysql镜像(独立的Linux环境)的命令，这里的`mysql`,是容器名称
sudo docker exec -it mysql /bin/bash

# 从Docker守护进程中删除一个名为 `mysql` 的容器。
sudo docker rm mysql

12 vagrant ssh登录Linux后切换为root用户，密码默认是vagrant,执行命令时就不用加 sudo 了

image-20240212083522970

13 同一个mysql5.7镜像可以支持运行多个mysql容器 

[vagrant@localhost ~]$ sudo docker run -p 3307:3306 --name mysql2 \
> -v /mydata2/mysql/log:/var/log/mysql \
> -v /mydata2/mysql/data:/var/lib/mysql \
> -v /mydata2/mysql/conf:/etc/mysql/conf.d \
> -e MYSQL_ROOT_PASSWORD=root \
> -d mysql:5.7
640aefa27b71113d2b82bdfbb54d9c8dafb5bc8b946ff009c19be352e189e65e
[vagrant@localhost ~]$ sudo docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS                                                  NAMES
640aefa27b71   mysql:5.7   "docker-entrypoint.s…"   12 seconds ago   Up 10 seconds   33060/tcp, 0.0.0.0:3307->3306/tcp, :::3307->3306/tcp   mysql2
ab0cd95f6c9f   mysql:5.7   "docker-entrypoint.s…"   58 minutes ago   Up 17 minutes   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mysql
[vagrant@localhost ~]$ sudo docker stop mysql2
mysql2
[vagrant@localhost ~]$ sudo docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED          STATUS          PORTS                                                  NAMES
ab0cd95f6c9f   mysql:5.7   "docker-entrypoint.s…"   59 minutes ago   Up 18 minutes   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mysql
[vagrant@localhost ~]$

image-20240212081950601

 

14 Docker 删除名为 mysql 的容器，命令 sudo docker rm mysql

命令 sudo docker rm mysql 用于从Docker守护进程中删除一个名为 mysql 的容器。这里的各个部分含义如下：

  • sudo: 由于Docker守护进程通常需要超级用户权限来执行操作，sudo 命令确保了当前命令以超级用户（或root用户）的权限运行。这可以确保命令有足够的权限对Docker守护进程进行容器的删除操作。

  • docker: 这是执行Docker命令行工具的调用命令，用于与Docker守护进程进行交互。

  • rm: 这是Docker命令行工具的一个子命令，用于删除一个或多个容器。使用 rm 命令时，你需要指定要删除的容器的名称或ID。

  • mysql: 这是要删除的Docker容器的名称。在这个例子中，容器名称为 mysql。你也可以使用容器的ID代替名称来指定要删除的容器。

执行 sudo docker rm mysql 命令时，Docker会尝试删除名为 mysql 的容器。如果容器正在运行，这个命令会失败，因为默认情况下，Docker不允许删除正在运行的容器。如果你想强制删除一个正在运行的容器，可以使用 -f 或 --force 选项，如 sudo docker rm -f mysql。

请注意，在删除容器之前，确保你已经备份了容器内任何重要的数据或配置，因为一旦容器被删除，所有与容器相关的数据和配置都将丢失。

 

15 后端环境搭建

 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.hspedu.hspliving</groupId>
    <artifactId>hspliving-commodity</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--导入springboot 父工程-规定写法-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <!--<relativePath/> &lt;!&ndash; lookup parent from repository &ndash;&gt;-->
    </parent>

    <name>hspliving-commodity</name>
    <description>顺平(家居生活)-商品模块</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>2020.0.5</spring-cloud.version>
    </properties>

    <!--引入相关的依赖-->
    <dependencies>
        <!--导入web项目场景启动器: 会自动导入和web开发相关的所有依赖[库/jar]
                     后面老师还会说spring-boot-starter-web 到底引入哪些相关依赖
                     web项目场景启动器,这里是真正的引入了依赖
                     starter-web 版本不需要指定 在父工程已经指定好了
                     -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--引入test starter -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <!--只在test模块生效-->
            <scope>test</scope>
        </dependency>

    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

 

16 解释Maven relativePath元素标签

image-20240212211938492

image-20240212211150831

在Maven项目中，relativePath元素通常用于<parent>标签内，指定父POM（Project Object Model）文件的位置。Maven是一个项目管理和构建自动化工具，它使用POM文件（pom.xml）来管理项目的构建、依赖、插件等。

当一个Maven项目是另一个项目的子项目时，子项目的POM文件中会包含对父项目的引用。这个引用通过<parent>标签来实现，其中包含父项目的groupId、artifactId、version，以及可选的relativePath元素。relativePath元素用于指定父POM文件相对于子项目POM文件的路径。

作用

  • 默认行为：如果不指定relativePath，Maven默认会查找子项目目录的../pom.xml作为父POM。这是因为默认的relativePath值是../pom.xml，假设父项目和子项目在文件系统中是相邻的目录结构。

  • 自定义位置：通过显式设置relativePath，你可以指定一个不同的位置来查找父POM。这在父项目不位于默认位置时非常有用。

  • 避免查找：如果设置<relativePath/>（即空的relativePath元素），Maven将不会在文件系统中查找父POM。这在父POM仅通过Maven仓库可用时很有帮助，而不是通过文件系统的相对路径。

示例

<parent>
    <groupId>com.example</groupId>
    <artifactId>parent-project</artifactId>
    <version>1.0.0</version>
    <relativePath>../parent-project/pom.xml</relativePath> <!-- 自定义父POM位置 -->
</parent>

在这个例子中，relativePath指向一个自定义的路径，其中父项目的pom.xml文件位于子项目的../parent-project/目录下。如果父项目的POM文件不在标准位置，或者你希望从一个特定位置引用父POM，这种方式非常有用。

总之，relativePath在Maven项目中是一个灵活的元素，它允许开发者指定父项目POM文件的位置，无论是在本地文件系统中还是在远程仓库中。这有助于维护项目间的层次结构和依赖关系。

 

17 中央仓库明明有对应的jar包，但是刷新maven,导入失败 “Plugin 'com.spotify:docker-maven-plugin:0.4.14' not found”

 

image-20240212220141206

 

image-20240212220334462

 

image-20240212215613461

 

image-20240212220038363

 

多刷新几次！！！

 

18 @MapperScan 和 @Mapper 什么时候可以不写的说明

 

// 如果Dao类上没有写@Mapper注解，则这里需要加上@MapperScan注解，指定要扫描的dao包
// ,如果dao包中的Mapper类上写了@Mapper注解，则这里可以不写
// @MapperScan("com.hspedu.hspliving.commodity.dao")
@SpringBootApplication
public class HsplivingCommodityApplication {
    public static void main(String[] args) {
        //
        SpringApplication.run(HsplivingCommodityApplication.class,args);
    }
}

 

19 java: -source 1.5 中不支持 diamond 运算符

(即钻石符合'<>'报错)(请使用 -source 7 或更高版本以启用 diamond 运算符)

<properties>
        <java.version>1.8</java.version>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
</properties>

 

20 使用idea打开包含.git文件夹的项目，在idea视图界面看不到.git文件夹

 

image-20240225114420778

image-20240225114236333

在 IntelliJ IDEA 中，默认情况下 .git 文件夹是被隐藏的，这是因为 .git 文件夹包含了 Git 版本控制的所有元数据，而这些信息通常不需要在项目的日常开发过程中直接查看。IDEA 提供了其他方式来查看和管理 Git 版本控制信息，例如通过 VCS 操作或 Git 面板。

如果你希望在 IntelliJ IDEA 中查看 .git 文件夹，可以通过修改设置来实现：

  1. 打开 IntelliJ IDEA 并且打开你的项目。

  2. 从菜单栏选择 “File” -> “Settings” （对于 macOS，是 “IntelliJ IDEA” -> “Preferences”）。

  3. 在设置窗口中，展开 “Editor” 部分，然后选择 “File Types”。

  4. 在 “Ignored Files and Folders” 部分，你会看到默认情况下 .git 被列在忽略的文件和文件夹列表中。

  5. 从这个列表中删除 .git 条目。这将使得 .git 文件夹在项目视图中可见。

  6. 点击 “Apply” 然后 “OK” 来保存你的更改。

请注意，即使这样做可以使 .git 文件夹在项目浏览器中可见，但一般不推荐这样做，因为这可能会导致意外修改到版本控制系统的内部文件。如果你需要进行版本控制操作，建议使用 IntelliJ IDEA 提供的 Git 工具和菜单选项来执行这些操作，而不是直接修改 .git 文件夹中的文件。

21 lambda表达式在Java中确实依赖于函数式接口

 

是的，lambda表达式在Java中确实依赖于函数式接口。函数式接口是只有一个抽象方法的接口（尽管它们可以有多个默认或静态方法）。Lambda表达式提供了一种简洁的方式来实现这些接口的抽象方法，而无需显式地定义一个实现类。

当你写一个lambda表达式时，Java编译器会根据上下文推断出这个表达式应该匹配的函数式接口。这个过程称为“目标类型推断”。Lambda表达式的语法允许你省略参数类型，这些类型会从它们的上下文环境中被推断出来，具体来说，就是根据所赋值的函数式接口的类型。

例如，在以下场景中：

  • 当你使用filter方法时，期望的参数是Predicate<T>类型，这是一个函数式接口。因此，提供给filter方法的lambda表达式会被视为Predicate的实现。

  • 当你使用map方法时，期望的参数是Function<T, R>类型，这同样是一个函数式接口。因此，提供给map方法的lambda表达式会被视为Function的实现。

如果你尝试将一个lambda表达式赋值给一个非函数式接口的类型，或者试图将它用在不是明确期待一个函数式接口实例的上下文中，你将得到一个编译错误。因此，lambda表达式的使用确实是依赖于函数式接口的。这种设计使得lambda表达式在Java中既强大又灵活，同时保持了类型安全。

 

22 @FunctionalInterface public interface Comparator<T> { 并不是只有一个抽象方法啊？ int compare(T o1, T o2); boolean equals(Object obj);

你提出了一个很好的问题，它触及了函数式接口定义中的一个细微之处。

根据Java的定义，一个函数式接口是指仅有一个抽象方法的接口。但这里的“抽象方法”指的是那些还没有被实现的方法。在函数式接口的定义中，Object类的公共方法不被视为抽象方法，即使它们在接口中被重新声明。

对于Comparator<T>接口，它定义了如下的方法：

  1. int compare(T o1, T o2); - 这是一个抽象方法，因为Comparator接口期望你提供这个方法的实现，用来定义两个对象的比较逻辑。

  2. boolean equals(Object obj); - 这个方法实际上是从java.lang.Object类继承的。在Java中，所有类都隐式继承自Object类，因此equals(Object obj)方法实际上是一个已经被实现的方法（所有对象都有这个方法）。即使在接口中重新声明equals，它也不被视为接口的抽象方法，因此它不违反函数式接口的单一抽象方法规则。

正因为如此，Comparator<T>仍然符合函数式接口的定义，并且可以安全地用@FunctionalInterface注解标记。这也意味着你可以使用lambda表达式来创建Comparator的实例，因为它只有一个需要实现的抽象方法compare(T o1, T o2)。这个细节是Java函数式接口概念中一个重要而微妙的部分。

 

23 如何查看电脑是否开启了双通道模式？

要检查您的电脑是否开启了双通道模式，您可以按照以下几种方法进行：

  1. 通过BIOS设置查看: 进入您的电脑BIOS设置界面（通常在启动时按F2、F10、DEL或ESC键）。在BIOS设置中，通常可以在内存设置或系统状态部分找到是否启用了双通道模式的信息。

  2. 使用CPU-Z工具: CPU-Z是一款免费的系统信息软件，能够提供有关您的CPU、主板、内存等硬件的详细信息。

    image-20240227175037214

  3. 通过任务管理器: 在某些操作系统中，如Windows 10或更高版本，您可以通过任务管理器检查内存的配置。

    • 右键点击Windows任务栏上的开始按钮，选择“任务管理器”。

    • 转到“性能”标签，然后选择“内存”。

    • 在内存部分，查看它是否提及“通道”信息。不过，请注意，并不是所有版本的Windows都会在这里显示双通道信息。

  4. 查看主板手册: 主板手册通常会指出如何安装内存以启用双通道模式。虽然这不是直接检查是否启用双通道的方法，但它可以帮助您确认内存是否正确安装以支持双通道。

  5. 系统信息软件: 使用系统信息查看软件，如Speccy或其他类似工具，这些软件能提供包括内存配置在内的详细系统信息。

根据您的电脑配置和所使用的操作系统，其中一些方法可能比其他方法更适合您的情况。通常情况下，使用CPU-Z是最简单直接的方式。

 

24 Vue中template中含有了 两个element控件, 因此需要使用 div将 el-tree和el-dialog包起来否则vue会报编译错误

 

image-20240304170325371

 

 

25 useSSL=false和true的区别

SSL(Secure Sockets Layer 安全套接字协议)，在mysql进行连接的时候,如果mysql的版本是5.7之后的版本必须要加上useSSL=false,mysql5.7以及之前的版本则不用进行添加useSSL=false，会默认为false，一般情况下都是使用useSSL=false，尤其是在将项目部署到linux上时，一定要使用useSSL=false！！！，useSSL=true是进行安全验证，一般通过证书或者令牌什么的，useSSL=false就是通过账号密码进行连接，通常使用useSSL=false！！！

 

26 前端使用axios向后端发送数据的携带参数的形式（对象解构和对象简写）

 

updateCategory(){
      //1. 注意: 这里我们只是提交需要修改的字段信息，没有提交的字段，在
      //   数据库中不会被修改(保持原来的值.. 我们可以观察sql语句)
      //2. var {id, name, icon, proUnit} = this.category 进行对象解构
      var {id, name, icon, proUnit} = this.category
      //调用后端程序的接口/API, 发出修改请求
      //发送请求,到后端程序去获取分类信息(实时数据,DB获取)
      this.$http({
        // 解读这里的url是获取后端分级菜单列表的url地址，即获取带层级的商品分类表`commodity_category`所有数据
        url: `http://localhost:9090/commodity/category/update`,
        method: 'post',
        // 下面的adornData()方法中的`{id, name, icon, proUnit}`是一个新创建的对象
        // ，同时使用到了对象的简写
        data: this.$http.adornData({id, name, icon, proUnit}, false)
      }).then(({data}) => { //这里的{data} 是对象解构，解构了上面url请求后端返回来的数据，
        // responseData对象的data属性
        //输出
        console.log("updateCategory()方法 .then(({data}) 返回的data= ", data);
        //返回需要展示的数据 data.data.data
        //如果使用{data}, 得到的要展示的数据使用 data.data 即可，因为解构了一层

        //取消显示对话框
        // this.dialogVisible = false


        //刷新分类列表 绑定数据
        this.getCategories();



        // console.log(" 删除的节点的父节点分类对应的id",node.parent.data.id)
        // console.log(" 删除的节点的父节点node.parent",node.parent)
        //设置需要展开的菜单 删除的节点的父节点分类对应的id
        // node 即为当前点击的节点
        // this.expandedKey = [this.category.parentId]

      })


    },

 

  1. 解构赋值:

    var {id, name, icon, proUnit} = this.category;

    这行代码执行了一个操作：从 this.category 对象中解构出 id, name, icon, 和 proUnit 四个属性，并创建了四个同名的局部变量。如果 this.category 中包含这些属性，那么这些局部变量将被赋予相应的值。

  2. 在 adornData 方法中使用: 当你在调用 this.$http.adornData({id, name, icon, proUnit}, false) 时，实际上是在创建一个新的对象，并将之前解构得到的变量作为该对象的属性值。

这里的 {id, name, icon, proUnit} 是对象字面量的简写语法，等同于：

{
    id: id,
    name: name,
    icon: icon,
    proUnit: proUnit
}

这种简写形式基于ES6的属性名简写特性，如果对象的属性名和变量名（变量存储着要赋给属性的值）相同，则可以省略冒号和值部分，直接写一个名字即可。

因此，解构赋值在这里的作用如下：

  • 首先，它从 this.category 中提取了必要的属性。

  • 然后，通过在 adornData 方法中使用这些同名变量，你实际上构建了一个新的对象，这个新对象拥有与 this.category 中相同的属性名和对应的值。

  • 最后，这个新构建的对象被传递给 adornData 方法，并最终被用于 HTTP 请求的数据部分。

这个过程并非多余，而是一种常见的实践，用于明确地选择要发送的数据字段，尤其在不想发送整个 this.category 对象或者 this.category 包含一些不应该发送的额外属性时。这样可以确保只有需要的数据被发送到服务器，同时还清楚地文档化了 API 调用所使用的数据字段。

27 Vue.js 中，ref 是一个特殊的属性

 

在 Vue.js 中，ref 是一个特殊的属性，当它用在 HTML 元素上时，可以用来给元素或子组件注册引用信息。引用（refs）提供了一种方式来直接访问 DOM 元素或子组件的实例。

在你的代码片段中：

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

ref="tree" 这一行的意思是，你正在为 <el-tree> 组件创建一个引用（reference），并将这个引用命名为 "tree"。在 Vue 组件内部，你可以通过 this.$refs.tree 来访问这个 <el-tree> 组件的实例。这意味着你可以直接调用组件的方法，访问其数据和属性，甚至操作其子 DOM。

例如，如果 el-tree 组件有一个方法叫做 getCheckedNodes()，你可以在父组件中这样调用它：

let checkedNodes = this.$refs.tree.getCheckedNodes();

这样，你就可以获取到树形控件中被选中的节点数组。

使用 ref 是一种非常强大的功能，因为它允许你直接操作子组件，但它也应该谨慎使用，因为过度依赖 ref 可能会使得你的应用更难以维护。它违背了 Vue 数据驱动的设计原则，因此，在可以通过数据和方法实现的情况下，尽量避免使用 ref。然而，对于某些特定场景，如需要直接操作 DOM 或调用子组件的方法，ref 是非常有用的。

 

28 var ids = [] //注意这里是一个数组，后端delete接口使用数组进行接收的

 

      //先收集选中的分类的ids 和 分类名
      var ids = [] //注意这里是一个数组，后端delete接口使用数组进行接收的
      var categoryNames = []
      for (var i = 0; i < checkedNodes.length; i++) {
        ids.push(checkedNodes[i].id)
        categoryNames.push(checkedNodes[i].name)
      }

      //可以给出提示，如果用户选择确定，就调用后端程序接口，完成批量删除(逻辑删除)
      /*
     this.$confirm 在这段代码中并不是一个 axios 对象，而是一个由 Element UI 提供的方法，用于显示确认对话框。这是 Element UI 的一部分，一个基于 Vue 的桌面端组件库。$confirm 方法用于弹出一个模态对话框，询问用户是否确定执行某个操作，并且它返回一个 Promise 对象。
     在 JavaScript 中，Promise 对象用于表示未来某个将要完成（或失败）的异步操作的结果。当 this.$confirm 被调用时，它会显示一个带有确定和取消按钮的对话框。如果用户点击“确定”，Promise 将会被“解决”（resolve），执行 .then() 里的回调函数；如果用户点击“取消”，Promise 将会被“拒绝”（reject），执行 .catch() 里的回调函数。
     因此，当你看到 this.$confirm(...).then(...).catch(...) 这样的代码，它并不是说 $confirm 是一个 axios 请求，而是说 $confirm 返回的是一个可以链式调用 .then() 和 .catch() 方法的 Promise 对象。这样的设计让你可以编写代码来处理用户点击对话框中按钮后的逻辑。
      */
      this.$confirm(`是否批量删除【${categoryNames}】菜单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //如果点击`确定` 进行批量删除操作
        this.$http({
          // 解读这里的url是获取后端分级菜单列表的url地址，即获取带层级的商品分类表`commodity_category`所有数据
          url: 'http://localhost:9090/commodity/category/delete',
          method: 'post',
          //发出请求时携带的数据，参考 src/views/modules/sys/role.vue:158
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {

 

 @RequestMapping("/delete")
    // @RequiresPermissions("commodity:category:delete")
    public R delete(@RequestBody Long[] ids){
		categoryService.removeByIds(Arrays.asList(ids));

        return R.ok();
    }

 

在这段代码中，@RequestBody Long[] ids 表示后端（假设使用的是Spring框架或类似的Java后端应用程序）期待从前端接收的数据是一个数组，该数组的元素类型为 Long。这里的 @RequestBody 注解表示请求的主体部分（即，发送的数据）应直接映射到参数 ids 上。

当前端发送数据给后端时，应该以 JSON 格式发送这个数组。虽然我们称之为“JSON数组”，其实它仍然是 JSON 格式，因为 JSON 支持数组类型的数据。

举个例子，如果你想通过前端发送 ID 为 1, 2, 和 3 的数组给后端，发送的数据格式应该类似于：

[1, 2, 3]

这是一个标准的 JSON 格式表示的数组。前端在发送这个数据时，通常会使用一个 AJAX 请求或使用现代前端框架（如 Axios、Fetch API 等）的 HTTP 客户端，设置 Content-Type 为 application/json，并将上述数组作为请求的主体部分发送。

简而言之，前端发送的是一个 JSON 格式的数组，而后端通过 @RequestBody Long[] ids 接收这个数组，并将其解析为 Java 中的一个 Long 类型数组。

 

29 三元运算符整体赋值给一个变量var ids

 

 
 <el-button v-if="isAuth('commodity:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
 <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
 
 // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            // url: this.$http.adornUrl('/commodity/brand/delete'),
            url: 'http://localhost:9090/commodity/brand/delete',
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  } 
  解释点击删除和批量删除时 var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        }) 这里的意思

 

 

这段代码是用于处理一个 Vue.js 组件中的删除操作的，既支持单个删除也支持批量删除。具体到 var ids = id ? [id] : this.dataListSelections.map(item => { return item.id }) 这行代码的作用，我们可以拆分来看：

  1. id ? [id] : ...：这部分是一个三元运算符，用于判断 id 参数是否存在。如果调用 deleteHandle 函数时提供了一个 id 参数，则 ids 会被赋值为一个只包含这个 id 的数组（[id]）。这种情况通常对应于单个删除操作，也就是用户点击了某个特定条目旁边的删除按钮。

  2. ... : this.dataListSelections.map(item => { return item.id })：如果没有提供 id 参数（即批量删除情况），这部分代码会执行。这里，this.dataListSelections 应该是一个数组，包含了用户在列表中选择的所有条目。.map(item => { return item.id }) 是一个将这些条目映射成一个新数组的操作，新数组只包含这些条目的 id。这样，ids 就会被赋值为一个包含所有选中条目 id 的数组。

总结起来，这行代码的意思是：如果提供了 id 参数，则将 ids 设置为仅包含该 id 的数组；如果没有提供 id（意味着用户想进行批量删除），则将 ids 设置为所有选中条目的 id 组成的数组。这样设置后，无论是单个删除还是批量删除，接下来的代码都可以统一处理这个 ids 数组进行删除操作。

 

var ids = id 可以当作三元运算符的判断条件吗?这不是一个变量的声明吗？this.dataListSelections 为什么应该是一个数组？

你的问题很合理，让我逐一解答：

  1. 三元运算符中的 var ids = id 误解：实际上，在你的代码示例中，“var ids = id ? [id] : ...”这一行并不是将“var ids = id”作为三元运算符的条件。这里的“var ids”是变量声明，而三元运算符的判断条件仅仅是“id”。这个表达式的意思是：“如果id不为空（或者说，id存在），则ids变量将被赋值为一个包含id的数组（即[id]）；如果id为空，则执行冒号后面的表达式。”这里的误解可能来源于格式问题，正常的理解应该是基于 id 是否存在来赋值 ids。

  2. this.dataListSelections 为何假定为数组：在 Vue.js 或类似的现代 JavaScript 框架中，dataListSelections 这样的命名约定通常用于表示列表中被用户选择（或选中）的条目集合。从命名规范和使用场景来看，this.dataListSelections 被理解为一个数组是因为你通常会期望在这样的集合中包含多个条目 —— 特别是在实现批量删除功能时。因此，在这个上下文中，假设 this.dataListSelections 是一个数组是出于对它如何被使用的常规理解。

    this.dataListSelections.map(item => item.id) 这段代码进一步支持了它是数组的假设，因为 .map() 是一个数组方法，用于遍历数组并对每个元素执行一个转换函数（在这里，是取出每个元素的 id 属性），然后返回结果的新数组。

所以，综上所述，var ids = id ? [id] : this.dataListSelections.map(item => item.id); 这行代码是完全合理的，其中利用了三元运算符来决定 ids 的值，并且合理地假设了 this.dataListSelections 是一个数组。

 

如何理解，基于 id 是否存在来赋值 ids ？这里的格式请详细说明

当我们谈到基于 id 是否存在来赋值 ids，实际上我们是在描述一个条件判断过程，这个过程使用了 JavaScript 中的三元运算符（ternary operator）。三元运算符有三个部分，格式为：

condition ? expression1 : expression2;

这里的“condition”是一个条件表达式，它会被计算并转换为一个布尔值（true 或 false）。如果条件为真 (true)，则执行并返回 expression1 的结果；如果条件为假 (false)，则执行并返回 expression2 的结果。

在你的代码示例中：

var ids = id ? [id] : this.dataListSelections.map(item => item.id);

  • condition: id 这里的条件是 id。在 JavaScript 中，一个变量可以直接作为条件，其真假由变量的真值性（"truthiness"）决定。如果 id 有一个非假（"falsy"）值（如非零的数字、非空的字符串、非空对象等），那么它被认为是真（true）。如果 id 是假值（如 0、null、undefined、空字符串''等），它被认为是假（false）。

  • expression1: [id] 如果 id 存在（即 id 被评估为真），则三元运算符的结果是 [id]。这意味着 ids 将被赋值为一个只包含一个元素（即 id 的值）的数组。

  • expression2: this.dataListSelections.map(item => item.id) 如果 id 不存在（即 id 被评估为假），则表达式的结果是执行 this.dataListSelections.map(item => item.id) 的结果。这是将 this.dataListSelections 数组中的每个元素（预期为一个对象）映射成一个新数组，新数组中的每个元素都是原始元素的 id 属性。换句话说，如果没有提供特定的 id，ids 将被赋值为一个包含所有选中项的 id 的数组。

这种格式非常适合于根据某个条件选择不同的操作或值，正如在你的代码中，基于是否提供了特定的 id 来决定是删除单个条目还是批量删除多个条目。

这里的关键点 id ? [id] : this.dataListSelections.map(item => item.id); 是一个整体，根据id是否存在来判断用哪种形式来个ids变量赋值，这样理解对吗

是的，你的理解是正确的。

在表达式 id ? [id] : this.dataListSelections.map(item => item.id); 中，整体结构是根据 id 是否存在（即 id 是否有一个“真值”），来决定 ids 变量的赋值方式。这里使用的是一个三元运算符，它是JavaScript中的条件运算符，用于基于条件表达式的真值性来选择两个表达式中的一个。

  • 如果 id 存在（即 id 是非空、非零等，被判断为“真”），那么 ids 将被赋值为一个只包含此 id 的数组（即 [id]）。

  • 如果 id 不存在（即 id 是 null、undefined、0、空字符串等，被判断为“假”），那么 ids 将被赋值为另一个数组，该数组由 this.dataListSelections 中所有元素的 id 组成，此过程通过调用 .map(item => item.id) 来实现。

因此，整体上这是一个基于 id 的存在与否来对 ids 进行条件赋值的逻辑表达式。

 

30 在 Vue.js 中，特别是在使用 el-table（Element UI的表格组件）时，以下是关于数据渲染和更新机制的总结

问题描述，在Vue的代码中没有看到新增后 el-table表格新生成的行的dom元素的挂载操作

 

在 Vue.js 中，特别是在使用 el-table（Element UI的表格组件）时，以下是关于数据渲染和更新机制的总结点：

  1. 数据绑定与自动渲染： 在 Vue.js 中，通过使用 :data="dataList"（或等价的 v-bind:data="dataList"），将 dataList 数组绑定到 el-table 的数据源。这意味着 el-table 会根据 dataList 数组中的数据自动渲染表格行。当 dataList 更新时（例如，从服务器获取新数据后），el-table 会自动检测到数据变化，并重新渲染表格以反映最新的数据。

  2. 响应式系统： Vue.js 的响应式系统能够追踪依赖于其数据的 DOM 元素。当数据变化时，Vue.js 会自动更新相应的 DOM。因此，在 Vue.js 中，开发者通常不需要直接操作 DOM 或手动更新视图。只需更新数据，Vue 就会处理视图的变更。

  3. 声明式渲染： Vue.js 使用声明式渲染的概念，让开发者通过声明数据如何被渲染为 UI，而不是通过直接操作 DOM 来显示数据。这使得代码更简洁、更易于理解和维护。

  4. 组件和事件： 在 Vue.js 的项目中，如添加或修改数据的操作通常在组件中进行。例如，在你提供的代码中，<add-or-update> 组件可能用于新增或编辑表格数据。完成操作后，可以通过事件（如 @refreshDataList）通知父组件刷新数据列表。这样的组件化和事件机制使得数据管理和界面更新变得更加模块化和可维护。

  5. 无需手动挂载DOM： 在 Vue.js 中，并不需要手动挂载新的DOM元素来显示更新的数据。Vue 的数据绑定和组件系统允许开发者通过简单地更新状态或数据来自动更新视图，无需直接与DOM交互。

总结来说，在使用 Vue.js 和 Element UI (如 el-table) 时，开发者通过更新组件的状态或数据来驱动视图的变化，而不是通过直接操作 DOM。这样的模式大大简化了前端开发，使得代码更加简洁，更容易维护。

 

31 Element UI Switch组件，el-switch的状态发生改变后，active-value="1"和inactive-value="0"的值会给到v-model="scope.row.isshow"绑定的值上面吗？是的

 

<el-switch
            v-model="scope.row.isshow"
            @change="changeIsShow(scope.row)"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>

这里el-switch的状态发生改变后，active-value="1"和inactive-value="0"的值会给到v-model="scope.row.isshow"绑定的值上面吗？

是的，你的理解是正确的。在你提供的 Vue 代码片段中，el-switch 组件使用了 v-model 指令绑定到 scope.row.isshow。这意味着当开关的状态改变时，scope.row.isshow 的值会自动更新。

el-switch 组件有两个重要的属性：active-value 和 inactive-value。

  • active-value 定义了当开关处于激活状态时对应的值，在你的代码中设置为 "1"。

  • inactive-value 定义了当开关处于非激活状态时对应的值，在你的代码中设置为 "0"。

当用户点击开关改变它的状态时，如果开关被激活，scope.row.isshow 将被设置为 "1"（active-value 的值）。如果开关被关闭，scope.row.isshow 将被设置为 "0"（inactive-value 的值）。

此外，@change 事件用于监听状态的改变，并执行 changeIsShow(scope.row) 方法。这意味着每当开关的状态改变时，不仅 scope.row.isshow 的值会更新，还会调用 changeIsShow 方法，并传递当前行的数据 scope.row 作为参数。这样，你可以在 changeIsShow 方法内部执行进一步的操作，如同步更新到服务器等。

 

32 关于 el-switch 控件的类型不匹配问题

 

 <el-switch
            v-model="scope.row.isshow"
            @change="changeIsShow(scope.row)"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>

image-20240306172242328

 

 <el-switch
            v-model="scope.row.isshow"
            @change="changeIsShow(scope.row)"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>

image-20240306172131269

关于 el-switch 控件的类型不匹配问题，我们可以将其分为几个关键点来进行详细总结：

1. 数据类型的重要性：

  • 后端数据类型：通常，后端可能会将状态值（如 isShow）以整数形式返回，比如 1 表示激活，0 表示非激活。

  • 前端期望数据类型：在前端，特别是在 Vue 的 el-switch 组件中，active-value 和 inactive-value 可以设置为任意类型的值，通常为数字或字符串以匹配后端的数据。

2. 类型不匹配的问题：

  • 不加冒号情况（字符串类型）：如果不在 active-value 和 inactive-value 前加冒号，Vue 会将这些值解释为字符串。例如，active-value="1" 和 inactive-value="0" 会被解释为字符串 "1" 和 "0"。

  • 加冒号情况（JavaScript 表达式）：加上冒号，如 :active-value="1" 和 :inactive-value="0"，Vue 解释这些值为 JavaScript 表达式，因此它们会被识别为数字 1 和 0。

3. 实际后果：

  • 匹配错误：如果后端返回数字，但 el-switch 的 active-value 和 inactive-value 被设置为字符串（因为没有加冒号），则会导致类型不匹配。由于 "1"（字符串）不等于 1（数字），el-switch 不会按预期激活或关闭。

  • 状态显示错误：这种类型不匹配会导致 el-switch 无法正确显示其状态，导致界面显示与后端数据不一致的问题。通常，这会表现为 el-switch 总是显示为默认（通常是关闭）状态。

4. 解决方案：

  • 确保类型一致：确保 el-switch 组件的 active-value 和 inactive-value 与后端数据类型一致。如果后端使用数字，则前端也应使用数字（即在属性前加冒号）。

  • 更新组件属性：在 el-switch 组件中使用 :active-value="1" 和 :inactive-value="0"（加上冒号），以确保这些值作为数字处理，从而与后端返回的整数值相匹配。

通过确保前后端数据类型的一致性，可以确保 el-switch 控件能够正确反映后端的状态数据，从而提高用户界面的准确性和用户体验。

 

下面是更加详细的讨论：

 

<el-switch v-model="scope.row.isshow" @change="changeIsShow(scope.row)" :active-value="1" :inactive-value="0" ，为什么这里的 :active-value="1" :inactive-value="0"，需要加上冒号才绑定的是number类型的值呢？

在 Vue.js 中，当你在模板属性中使用 v-bind:（或其简写 :）时，它告诉 Vue 这个属性的值是一个 JavaScript 表达式而不是纯字符串。这意味着，Vue 将计算这个表达式的结果，并将结果用作属性的值。

在你的例子中：

  • :active-value="1"：这里的冒号表示 active-value 的值应该被解释为 JavaScript 表达式，因此传递给 active-value 的是数字 1。

  • :inactive-value="0"：同样，这里的冒号表示 inactive-value 的值应该被解释为 JavaScript 表达式，因此传递给 inactive-value 的是数字 0。

如果不加冒号：

  • active-value="1"：没有冒号，Vue 会把这里的 1 解释为字符串 "1" 而不是数字。

  • inactive-value="0"：同样，没有冒号，0 会被解释为字符串 "0"。

因此，如果你想确保 el-switch 接收的 active-value 和 inactive-value 是数字类型而不是字符串，你应该使用冒号（:）来绑定这些属性值为 JavaScript 表达式。这在处理逻辑或数据类型严格的场景中尤其重要，确保数据类型的一致性可以避免不必要的逻辑错误。

 

如果没有加冒号，页面刷新后不能实时监测到后端数据库的数据，后端的数据isShow 是Integer类型的，页面刷新后不能实时监测到后端数据库的数据为什么呢？

如果在你的 Vue.js 项目中，el-switch 组件的 active-value 和 inactive-value 属性没有加冒号，这意味着这两个值被解释为字符串而不是数字。如果后端数据库中的 isShow 字段是 Integer 类型（即数字类型），那么在数据从后端传到前端时，会存在类型不匹配的问题。

具体来说，如果后端返回的 isShow 值是数字（比如 1 或 0），但是你的 el-switch 的 active-value 和 inactive-value 是字符串（因为没有加冒号，所以 "1" 和 "0" 被视为字符串），那么 Vue.js 在比较这些值时会发现它们不相等（因为 "1"（字符串）不等于 1（数字），"0"（字符串）不等于 0（数字））。结果，el-switch 的状态就不会正确反映后端数据库的数据。

这种类型不匹配会导致 el-switch 无法正确显示其状态，因为它无法识别实际的 isShow 值（数字）与期望的激活/非激活值（错误地设置为字符串）之间的匹配。这就是为什么页面刷新后无法实时反映后端数据库的数据状态。

为了解决这个问题，你需要确保 el-switch 组件的 active-value 和 inactive-value 与后端数据库中 isShow 字段的数据类型保持一致。如果后端是数字类型，那么就应该使用 :active-value="1" 和 :inactive-value="0"（加上冒号）来确保这些值也被视为数字，这样才能正确匹配并实时反映数据库的状态。

这种类型不匹配会导致 el-switch 无法正确显示其状态，因此我一刷新页面总是看到switch未激活状态对吗

是的，你的理解是正确的。如果存在类型不匹配，例如后端数据是整数类型（1 或 0），而 el-switch 组件的 active-value 和 inactive-value 属性因为未加冒号被错误地识别为字符串（"1" 和 "0"），那么会导致 el-switch 无法正确匹配其状态。因为在 JavaScript 中，字符串 "1" 或 "0" 不等于数字 1 或 0。

这就意味着即使后端返回的 isShow 是 1（意味着应该激活开关），但由于 el-switch 期望的激活值是字符串 "1" 而不是数字 1，所以它不会将开关置为激活状态。相同的逻辑也适用于非激活状态。结果，不管后端数据怎样，你每次刷新页面时，el-switch 可能总是显示为未激活状态，因为它的实际值（整数）与期望值（字符串）不匹配。

为了解决这个问题，确保在使用 el-switch 组件时，其 active-value 和 inactive-value 的设置与后端数据的类型相匹配。如果后端是整数类型，那么应该在这些属性前加上冒号（如 :active-value="1" 和 :inactive-value="0"），确保它们被识别为 JavaScript 中的数字类型。这样做可以确保页面刷新时能正确显示 el-switch 的实际状态。

 

33 在 Vue.js 中，方法的对应关系是基于方法名而不是方法签名（即方法的参数）。因此 deleteHandle() 和 deleteHandle(scope.row.id,scope.row.name) 都和方法池中的 deleteHandle (id,name) {} 方法对应

 

<el-button v-if="isAuth('commodity:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>

<el-button type="text" size="small" @click="deleteHandle(scope.row.id,scope.row.name)">删除</el-button>


<script>
  import AddOrUpdate from './brand-add-or-update'
  export default {
    data () {
      return {
// 上面两个 deleteHandle() 和 deleteHandle(scope.row.id,scope.row.name) 都和下面方法池中的  deleteHandle (id,name) {} 方法对应
      methods: {
       deleteHandle (id,name) {

                	}
          	   }
          	 }  
          	}   
          	     } 
</script>

在 Vue.js 中，方法的对应关系是基于方法名而不是方法签名（即方法的参数）。这意味着无论你如何调用一个方法（不管是不带参数，还是带有不同的参数），只要方法名相同，就会调用到同一个方法定义。

在你提供的代码中，存在两种不同的 deleteHandle 方法调用方式：

  1. 批量删除：通过 deleteHandle() 调用，没有提供任何参数。

  2. 单个删除：通过 deleteHandle(scope.row.id,scope.row.name) 调用，提供了两个参数：id 和 name。

尽管调用方式不同，它们都指向下面方法池中的同一个方法定义：

deleteHandle (id, name) {
    // 方法实现
}

这是因为 Vue.js 在处理事件绑定时只查看方法名称 deleteHandle，而不关心调用时使用了多少参数。在 JavaScript 中，函数参数是灵活的，意味着一个函数可以被调用时传递任意数量的参数，这不会引起错误。如果函数定义时包含参数，但在调用时没有提供相应的参数，这些参数只会被赋值为 undefined。

因此，无论是不带参数的 deleteHandle() 还是带有两个参数的 deleteHandle(scope.row.id,scope.row.name)，它们都会映射到同一个 deleteHandle 方法上。在 deleteHandle 方法的实现中，可以通过检查参数 id 和 name 是否存在来区分是哪种调用情况，并相应地执行不同的逻辑处理：

  • 如果 id 和 name 都是 undefined（或其他非期望值），那么可以认为是执行批量删除。

  • 如果 id 和 name 有具体的值，那么可以认为是执行针对特定项目的删除操作。

这种设计允许 deleteHandle 方法在不同场景下复用，简化代码并提高代码的可维护性。

这种设计允许 deleteHandle 方法通过不同的调用形式（有参数调用和无参数调用）来处理不同的删除场景（单个删除和批量删除）。方法内部的逻辑需要根据是否传入参数（以及参数的值）来执行相应的操作，这体现了 JavaScript 函数和 Vue 事件处理器的灵活性。

 

34 阿里云OSS名词说明

 

阿里云对象存储OSS（Object Storage Service）

 

RAM（Resource Access Management）是阿里云提供的资源访问控制服务。RAM Policy是基于用户的授权策略。通过设置RAM Policy，您可以集中管理您的用户（例如员工、系统或应用程序）以及控制用户可以访问您名下哪些资源的权限，例如限制您的用户只拥有对某一个Bucket的读权限。

 

35 Maven POM 文件插件:spring-boot-maven-plugin说明

@RestController

简介 @RestController 是 Spring Boot 中的注解，将 @Controller 和 @ResponseBody 注解组合在一起，用于处理请求并返回 JSON 格式的数据。

工作原理 @Controller：标识类为控制器，负责处理客户端请求。 * @ResponseBody：使方法直接将返回值写入 HTTP 响应体，而不是渲染为视图。 因此，如果在方法上使用 @RestController，Spring Boot 将自动将返回值转换为 JSON 格式并返回给前端。

 

 

Maven POM 文件插件:spring-boot-maven-plugin

该插件默认包含在父项目spring-boot-starter-parent中

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
</parent>

需要手动在 pom 文件中导入插件 spring-boot-maven-plugin 的情景包括：

* 使用自定义版本：Maven 中央存储库中提供的 spring-boot-maven-plugin 版本可能不是所需的版本。手动导入插件允许指定所需的版本。

* 使用SNAPSHOT 版本：Maven 快照版本是仍在开发中的版本。它们不存储在中央存储库中，必须手动导入。

* 使用私有插件：如果 spring-boot-maven-plugin 放在私有存储库中，则必须手动导入该插件。

* 自定义插件配置：手动导入 spring-boot-maven-plugin 可以自定义插件的配置，例如执行目标或插件参数。

* 使用插件的多个版本：手动导入允许在同一项目中使用 spring-boot-maven-plugin 的多个版本，这对于使用插件的不同功能或解决与特定版本相关的兼容性问题非常有用。

* 使用父 POM：如果父 POM 没有导入 spring-boot-maven-plugin，则子 POM 需要手动导入它。

* 复杂的项目结构：在具有复杂项目结构的项目中，手动导入 spring-boot-maven-plugin 可以提供更好的控制和灵活性。

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
</build>

 

用途：将 Spring Boot 应用打包成可执行的 JAR 文件。

功能：

提供额外的配置选项，如设置主类和生成调试信息。

允许自定义插件配置。

总结

  • @RestController 可用于直接返回 JSON 格式的数据。

  • spring-boot-maven-plugin 插件用于打包 Spring Boot 应用，并提供自定义配置选项。

 

 

36 cors 前端中一般是跨域问题吗？

是的，CORS（Cross-Origin Resource Sharing，跨来源资源共享）问题通常出现在前端开发中，尤其是当你的网页尝试从不同源（域名、协议或端口）的服务器上请求资源时。浏览器出于安全考虑，默认禁止跨源 HTTP 请求，这就是所谓的"同源策略"。

当你尝试从前端代码（如 JavaScript）中访问另一个源（域名、协议或端口不同）的资源时，如果对方的服务器没有返回适当的 CORS 头来允许请求，浏览器就会拦截这个请求，导致跨域问题。

为了解决这个问题，资源的提供者需要在服务器上设置适当的 CORS 响应头，比如 Access-Control-Allow-Origin，来明确允许某些域名进行资源访问。如果你控制着资源的服务器，你可以通过配置这些响应头来解决跨域问题。如果你不控制资源服务器，你可能需要联系服务器的管理员，或者寻找其他方法来获取数据，例如使用JSONP（如果支持的话），或者通过你自己的服务器中转请求。

 

37 HTTP协议中，OPTIONS请求方法的作用

 

在HTTP协议中，OPTIONS请求方法的作用是发现服务器支持哪些HTTP方法。当你看到浏览器在发起实际的POST或GET请求之前发送OPTIONS请求时，这通常与CORS（跨来源资源共享）有关。

在处理跨域HTTP请求时，浏览器会首先发送一个OPTIONS请求到服务器，这个过程被称为“预检请求”(preflight request)。这个请求用于确认服务器是否允许来自不同源的通信。预检请求的回应中，服务器将返回允许的方法（如GET、POST、PUT），允许的头信息，以及是否允许发送cookies等信息。

在你的情况下，对于从localhost发起的跨域POST请求，浏览器首先使用OPTIONS方法向服务器发送了一个预检请求。如果服务器的响应表明它接受来自这个源的POST请求，那么浏览器随后将发送实际的POST请求。在你提供的图像中，我们可以看到两个OPTIONS请求都成功了（返回了200状态码），意味着预检请求通过了。然而，紧随其后的POST请求返回了403状态码，意味着服务器拒绝了这个请求。这个403错误可能是由服务器端的权限设置引起的，而不是CORS问题。

 

image-20240309173407263

 

38 "发起者"栏显示的“xhr”指的是XMLHttpRequest。

img-20240309190213185

在你提供的截图中，"发起者"栏显示的“xhr”指的是XMLHttpRequest。XMLHttpRequest（XHR）是一种浏览器内置的API，用于在浏览器和服务器之间异步交换数据。这意味着可以在不重新加载整个页面的情况下，更新网页的一部分。

在现代web开发中，XHR广泛用于前端JavaScript代码中，以实现异步通信。例如，当你在网页上填写表单并提交时，JavaScript可以使用XHR向服务器发送数据，并处理服务器的响应，然后根据这些响应更新网页，而无需加载新页面。

在你的截图中，有两个请求（一个OPTIONS请求和一个GET请求）都标记为由“xhr”发起，这意味着这些请求是通过XMLHttpRequest对象生成的。这通常是在处理AJAX（Asynchronous JavaScript and XML）请求时发生的情况。而且，根据截图，这两个请求似乎都遇到了问题，OPTIONS请求由于缺少CORS（跨源资源共享）响应头而失败，而GET请求因为URL问题（NS_ERROR_DOM_BAD_URI）而失败。

 

39 SingleUpload组件会更新dataForm.logo字段为阿里云OSS中存储的文件的URL。是那几行代码体现的？

位置:

D:\Java_developer_tools\DistributedMicroservicesProject\hspedu_hspliving\renren-fast-vue\src\components\upload\singleUpload.vue

 

 

在提供的代码中，SingleUpload 组件更新 dataForm.logo 字段为阿里云OSS中存储的文件的URL是通过下面这几行代码体现的：

handleUploadSuccess(res, file) {
  console.log("上传ok...")
  this.showFileList = true;
  this.fileList.pop();
  this.fileList.push({
    name: file.name,
    url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}", file.name)
  });
  this.emitInput(this.fileList[0].url);
}

这段代码位于 SingleUpload 组件的 handleUploadSuccess 方法内。当文件成功上传到阿里云OSS后，这个方法会被调用。方法中做了以下几个操作：

  1. 设置 showFileList 为 true 以显示上传的文件列表。

  2. 从 fileList 中移除上一个文件的信息（如果有的话），然后添加当前上传成功的文件信息。这个文件信息包括文件的名称（file.name）和URL。这里的URL是通过连接 dataObj.host（阿里云OSS的域名）和由 dataObj.key（文件在OSS中的路径）构成的。dataObj.key.replace("${filename}", file.name) 替换操作确保文件名正确嵌入路径中。

  3. 通过 this.emitInput(this.fileList[0].url) 调用，将上传成功的文件的URL更新到 dataForm.logo。这是因为 emitInput 方法通过 this.$emit('input', val) 向父组件发送了新的logo URL，这通常会更新父组件中绑定的 dataForm.logo 值。

总之，dataForm.logo 字段的更新是通过组件的事件传播机制实现的：SingleUpload 组件处理文件上传，并在上传成功后通过内部事件将新的文件URL传达给父组件，父组件随后更新其数据模型中的对应字段。

40 解释 emitInput 方法通过 this.$emit('input', val) 向父组件发送了新的logo URL，这通常会更新父组件中绑定的 dataForm.logo 值 和 组件的事件传播机制

在Vue.js中，子组件可以使用this.$emit方法向其父组件发送事件。这是组件之间进行通信的常见方式之一，尤其是用于自定义事件的传播。这种机制允许子组件向上通知其父组件某些事件的发生，比如数据的改变或用户的操作，而不需要直接操作父组件的数据。

在你提供的代码中，emitInput方法的作用是在SingleUpload组件内部使用，当文件上传成功并且需要更新父组件中与之绑定的数据时调用。这里的val是指上传成功后文件在阿里云OSS上的URL。具体的方法实现可能如下所示：

emitInput(val) {
  this.$emit('input', val);
}

这个方法通过this.$emit('input', val)向父组件发出一个名为input的事件，并传递新的logo URL作为事件的参数。在Vue.js中，input事件通常与v-model指令结合使用，用于创建自定义组件的双向数据绑定。当父组件监听到这个input事件时，它会更新与v-model绑定的数据属性，也就是在这个场景中的dataForm.logo。

例如，如果父组件使用了SingleUpload组件如下：

<single-upload v-model="dataForm.logo"></single-upload>

这里，父组件通过v-model将dataForm.logo绑定到SingleUpload组件。在Vue中，v-model在自定义组件上的用法本质上是一个语法糖，它等价于：

<single-upload :value="dataForm.logo" @input="value => { dataForm.logo = value }"></single-upload>

这意味着当SingleUpload组件发出input事件并传递新的URL时，父组件的dataForm.logo属性会自动更新为该URL。这就是Vue中组件事件传播机制的一个实例，它使得父子组件间的数据传递变得既简洁又高效。

 

40 Vue插槽机制实例

 

1 根据当前行的图片url，取出图片，进行展示 scope.row.logo

<el-table
  :data="dataList"
  border
  v-loading="dataListLoading"
  @selection-change="selectionChangeHandle"
  style="width: 100%;">
  <el-table-column
    type="selection"
    header-align="center"
    align="center"
    width="50">
  </el-table-column>
  <el-table-column
    prop="id"
    header-align="center"
    align="center"
    label="id">
  </el-table-column>
  <el-table-column
    prop="name"
    header-align="center"
    align="center"
    label="品牌名">
  </el-table-column>
    
    
  <el-table-column
    prop="logo"
    header-align="center"
    align="center"
    label="logo">
      
    <!--使用插槽机制,给表格的列插入 template，显示logo图片-->
    <template slot-scope="scope">
      <img :src="scope.row.logo">
    </template>
  </el-table-column>

2 根据当前行scope.row，取出当前行的 isshow 的值scope.row.isshow

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="品牌名">
      </el-table-column>
      <el-table-column
        prop="logo"
        header-align="center"
        align="center"
        label="logo">
        <!--使用插槽机制,给表格的列插入 template，显示logo图片-->
        <template slot-scope="scope">
          <img :src="scope.row.logo">
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        header-align="center"
        align="center"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="isshow"
        header-align="center"
        align="center"
        label="显示">

        <!--引入自定义的内容，使用template和插槽机制
        1. 使用插槽机制，给表格的列加入一个 template , 这可以参考 ElementUI-Table 表格-自定义列模板的代码
        2. 在 template 中替换成 el-switch 控件，参考 ElementUI-Switch 开关-基本用法
        3. v-model="scope.row.isshow" 动态绑定当前行的 isshow 的值
        4. active-color / inactive-color 是激活和未激活的颜色
        5. active-value="1" 激活状态的值，和数据库表isShow字段对应
        6. inactive-value="0" 未激活状态的值，和数据库表isShow字段对应
        7. @change="changeIsShow(scope.row)" 当switch控件状态切换时，会触发changeIsShow(scope.row)
           ，而且我们把 当前行数据scope.row传递到该方法
        -->
        <template slot-scope="scope">
          <!--引入el-switch
          绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
          scope.row.isshow 通过插槽机制获取到当前行，然后再获取到isshow

          el-switch 组件使用了 v-model 指令绑定到 scope.row.isshow。这意味着当开关的状态改变时，
          scope.row.isshow 的值会自动更新。

          el-switch 组件有两个重要的属性：active-value 和 inactive-value。
          active-value 定义了当开关处于激活状态时对应的值，在你的代码中设置为 "1"。
          inactive-value 定义了当开关处于非激活状态时对应的值，在你的代码中设置为 "0"。
          当用户点击开关改变它的状态时，如果开关被激活，scope.row.isshow 将被设置为 "1"
          （active-value 的值）。如果开关被关闭，scope.row.isshow 将被设置为 "0"
          （inactive-value 的值）。



          注意:
          :active-value="1"：这里的冒号表示 active-value 的值应该被解释为 JavaScript 表达式，因此传递给 active-value 的是数字 1。
          :inactive-value="0"：同样，这里的冒号表示 inactive-value 的值应该被解释为 JavaScript 表达式，因此传递给 inactive-value 的是数字 0。
          如果不加冒号：

          active-value="1"：没有冒号，Vue 会把这里的 1 解释为字符串 "1" 而不是数字。
          inactive-value="0"：同样，没有冒号，0 会被解释为字符串 "0"。
          -->
          <el-switch
            v-model="scope.row.isshow"
            @change="changeIsShow(scope.row)"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>

        </template>

      </el-table-column>
      <el-table-column
        prop="firstLetter"
        header-align="center"
        align="center"
        label="检索首字母">
      </el-table-column>
      <el-table-column
        prop="sort"
        header-align="center"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
          
          
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<!--          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>-->
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id,scope.row.name)">删除</el-button>
        </template>
          
          
          
      </el-table-column>
    </el-table>

 

 

42 图片的css样式只设置宽度style="width: 80px"，图片就会按照比例进行缩小

<!--使用插槽机制,给表格的列插入 template，显示logo图片
style="width: 80px", 这里图片的样式只设置宽度，图片就会按照比例进行缩小展示
不需要再指定图片的高度，否则图片有可能会变形
-->
<template slot-scope="scope">
  <img :src="scope.row.logo" style="width: 80px">
</template>

43 网关Gateway的 lb://

在 Spring Cloud Gateway 中，lb:// 是一种特殊的 URI 前缀，用于启用客户端负载均衡。当你在路由配置中使用 uri: lb://some-service 时，它告诉 Spring Cloud Gateway 使用 Spring Cloud 的负载均衡机制来解析服务实例并进行请求转发。

具体来说，lb://member-service-provider 中的 lb 表示“负载均衡（Load Balancer）”，member-service-provider 是注册到 Eureka 或其他服务发现平台的服务名称。这意味着当网关收到一个请求，它会通过服务发现获取 member-service-provider 的所有可用实例，然后根据配置的负载均衡策略（如轮询、随机等）选择一个实例，并将请求转发到该实例上。

这种机制允许你的微服务架构动态扩展，因为网关会根据服务实例的当前可用性和负载情况来转发请求，而不是写死到一个具体的服务实例上。这也是微服务架构中常见的做法，用于实现服务的高可用和负载均衡。

 

44 使用 lb:// 与使用 http:// 在 Spring Cloud Gateway 中主要有以下区别：

lb://（负载均衡）:

  1. 服务发现与负载均衡：当你在路由配置中使用 lb:// 前缀，这表明你想要使用 Spring Cloud 的负载均衡机制。这意味着网关将通过服务发现机制（如Eureka、Consul等）查询服务名对应的所有可用实例，并根据负载均衡策略选择一个实例来转发请求。

  2. 动态路由：使用 lb:// 使得路由更加动态和灵活。你不需要知道后端服务的具体实例地址，也不需要手动更改配置以指向新的服务实例。如果服务实例的地址更改，或者添加了更多的实例，网关能够自动适应这些变化。

  3. 服务抽象：使用 lb:// 实现了对后端服务的抽象，你只需要知道服务的名称。这有助于解耦服务消费者和提供者，也使得服务的迁移和伸缩更加方便。

http://（直接路由）:

  1. 静态路由：使用 http:// 前缀时，你需要指定具体的服务实例地址。这种方式更静态，如果后端服务的地址改变，你需要手动更新网关的配置。

  2. 无服务发现：与 lb:// 不同，使用 http:// 不会涉及服务发现和负载均衡。请求会被直接发送到指定的地址，无论这个地址背后是单个服务实例还是一个负载均衡器。

  3. 直接控制：虽然这种方式灵活性较低，但它允许你直接控制请求应该转发到哪里，有时在调试或特定场景下可能会很有用。

总结来说，lb:// 提供了基于服务名的动态路由能力，适合于微服务架构中服务实例动态变化的环境。而 http:// 提供了基于具体地址的静态路由能力，可能适合于后端服务位置固定不变或不使用服务发现机制的环境。在实际应用中，选择哪种方式取决于你的具体需求和架构设计。

45 通过 lb:// 转发的请求仍然是 HTTP 请求。

是的，最终通过 lb:// 转发的请求仍然是 HTTP 请求。

在 Spring Cloud Gateway 中，使用 lb:// 是为了启用负载均衡功能，这个过程是透明的。当你在路由配置中使用 lb:// 时，这意味着你希望网关先通过服务发现机制找到对应服务的所有可用实例，然后根据负载均衡策略选择一个实例，并对这个选择的实例发起 HTTP 请求。

这个流程如下：

  1. 服务发现：当网关接收到一个包含 lb:// 的请求时，它会查询服务注册中心（如Eureka、Consul等）以获取指定服务的所有活跃实例。

  2. 负载均衡：然后，根据配置的负载均衡策略（如轮询、随机等），网关选择一个实例。

  3. 请求转发：最后，网关将原始请求转发到选定的服务实例上。这个请求是一个普通的 HTTP 请求，只是它的目标地址是由网关动态选定的服务实例地址。

因此，尽管 lb:// 在请求的URI中指代的是一种服务发现和负载均衡的机制，但实际上请求仍然是通过 HTTP 协议发送的。在 Spring Cloud Gateway 处理这类请求时，lb:// 只是用来告知网关需要进行服务发现和负载均衡，最终发出的仍然是 HTTP 或 HTTPS 请求。

 

46 执行 Maven 的 clean 命令会删除所有编译的类和构建产物，而 package 命令会重新编译代码并打包，这就相当于强制刷新了整个构建和输出过程，因此通常能够解决修改了代码但未生效问题。

47 如果同时引入了Gateway和web-starter报错：

Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway at this time. Please remove spring-boot-starter-web dependency.

 

    <!--
            1. gateway本身不需要 spring-boot-starter-web
            2. 所以不用引入 spring-boot-starter-web，如果引入spring-boot-starter-web,启动时会报告冲突
        -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
            <!--<version>Greenwich.SR3</version>-->
            <!--Greenwich.SR3 实际上是一个 Spring Cloud 的版本号
            ，它不直接对应于 Spring Cloud Gateway 的任何版本。-->
        </dependency>

 

<!--导入web项目场景启动器: 会自动导入和web开发相关的所有依赖[库/jar]
                     后面老师还会说spring-boot-starter-web 到底引入哪些相关依赖
                     web项目场景启动器,这里是真正的引入了依赖
                     starter-web 版本不需要指定 在父工程已经指定好了
                     -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

 

C:\jdk\jdk1.8\bin\java.exe -XX:TieredStopAtLevel=1 -noverify -Dspring.output.ansi.enabled=always -Dcom.sun.management.jmxremote -Dspring.jmx.enabled=true -Dspring.liveBeansView.mbeanDomain -Dspring.application.admin.enabled=true "-javaagent:D:\Java_developer_tools\developer_tools_IDEA\IntelliJ IDEA 2020.2.1\lib\idea_rt.jar=55878:D:\Java_developer_tools\developer_tools_IDEA\IntelliJ IDEA 2020.2.1\bin" -Dfile.encoding=UTF-8 -classpath C:\jdk\jdk1.8\jre\lib\charsets.jar;C:\jdk\jdk1.8\jre\lib\deploy.jar;C:\jdk\jdk1.8\jre\lib\ext\access-bridge-64.jar;C:\jdk\jdk1.8\jre\lib\ext\cldrdata.jar;C:\jdk\jdk1.8\jre\lib\ext\dnsns.jar;C:\jdk\jdk1.8\jre\lib\ext\jaccess.jar;C:\jdk\jdk1.8\jre\lib\ext\jfxrt.jar;C:\jdk\jdk1.8\jre\lib\ext\localedata.jar;C:\jdk\jdk1.8\jre\lib\ext\nashorn.jar;C:\jdk\jdk1.8\jre\lib\ext\sunec.jar;C:\jdk\jdk1.8\jre\lib\ext\sunjce_provider.jar;C:\jdk\jdk1.8\jre\lib\ext\sunmscapi.jar;C:\jdk\jdk1.8\jre\lib\ext\sunpkcs11.jar;C:\jdk\jdk1.8\jre\lib\ext\zipfs.jar;C:\jdk\jdk1.8\jre\lib\javaws.jar;C:\jdk\jdk1.8\jre\lib\jce.jar;C:\jdk\jdk1.8\jre\lib\jfr.jar;C:\jdk\jdk1.8\jre\lib\jfxswt.jar;C:\jdk\jdk1.8\jre\lib\jsse.jar;C:\jdk\jdk1.8\jre\lib\management-agent.jar;C:\jdk\jdk1.8\jre\lib\plugin.jar;C:\jdk\jdk1.8\jre\lib\resources.jar;C:\jdk\jdk1.8\jre\lib\rt.jar;D:\Java_developer_tools\DistributedMicroservicesProject\hspedu_hspliving\hspliving\hspliving-gateway\target\classes;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-starter-gateway\2.1.3.RELEASE\spring-cloud-starter-gateway-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-starter\2.1.3.RELEASE\spring-cloud-starter-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-context\2.1.3.RELEASE\spring-cloud-context-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\security\spring-security-crypto\5.1.6.RELEASE\spring-security-crypto-5.1.6.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-commons\2.1.3.RELEASE\spring-cloud-commons-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\security\spring-security-rsa\1.0.7.RELEASE\spring-security-rsa-1.0.7.RELEASE.jar;C:\Users\yangd\.m2\repository\org\bouncycastle\bcpkix-jdk15on\1.60\bcpkix-jdk15on-1.60.jar;C:\Users\yangd\.m2\repository\org\bouncycastle\bcprov-jdk15on\1.60\bcprov-jdk15on-1.60.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-gateway-core\2.1.3.RELEASE\spring-cloud-gateway-core-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\io\projectreactor\addons\reactor-extra\3.2.3.RELEASE\reactor-extra-3.2.3.RELEASE.jar;C:\Users\yangd\.m2\repository\io\projectreactor\reactor-core\3.2.12.RELEASE\reactor-core-3.2.12.RELEASE.jar;C:\Users\yangd\.m2\repository\org\reactivestreams\reactive-streams\1.0.3\reactive-streams-1.0.3.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-webflux\2.1.8.RELEASE\spring-boot-starter-webflux-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-reactor-netty\2.1.8.RELEASE\spring-boot-starter-reactor-netty-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\io\projectreactor\netty\reactor-netty\0.8.11.RELEASE\reactor-netty-0.8.11.RELEASE.jar;C:\Users\yangd\.m2\repository\io\netty\netty-codec-http\4.1.39.Final\netty-codec-http-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-common\4.1.39.Final\netty-common-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-buffer\4.1.39.Final\netty-buffer-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-transport\4.1.39.Final\netty-transport-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-resolver\4.1.39.Final\netty-resolver-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-codec\4.1.39.Final\netty-codec-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-codec-http2\4.1.39.Final\netty-codec-http2-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-handler\4.1.39.Final\netty-handler-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-handler-proxy\4.1.39.Final\netty-handler-proxy-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-codec-socks\4.1.39.Final\netty-codec-socks-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\io\netty\netty-transport-native-epoll\4.1.39.Final\netty-transport-native-epoll-4.1.39.Final-linux-x86_64.jar;C:\Users\yangd\.m2\repository\io\netty\netty-transport-native-unix-common\4.1.39.Final\netty-transport-native-unix-common-4.1.39.Final.jar;C:\Users\yangd\.m2\repository\org\glassfish\javax.el\3.0.0\javax.el-3.0.0.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-webflux\5.1.9.RELEASE\spring-webflux-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\synchronoss\cloud\nio-multipart-parser\1.1.0\nio-multipart-parser-1.1.0.jar;C:\Users\yangd\.m2\repository\org\synchronoss\cloud\nio-stream-storage\1.1.3\nio-stream-storage-1.1.3.jar;D:\Java_developer_tools\DistributedMicroservicesProject\hspedu_hspliving\hspliving\hspliving-common\target\classes;C:\Users\yangd\.m2\repository\com\alibaba\cloud\spring-cloud-starter-alibaba-nacos-discovery\2.1.0.RELEASE\spring-cloud-starter-alibaba-nacos-discovery-2.1.0.RELEASE.jar;C:\Users\yangd\.m2\repository\com\alibaba\cloud\spring-cloud-alibaba-nacos-discovery\2.1.0.RELEASE\spring-cloud-alibaba-nacos-discovery-2.1.0.RELEASE.jar;C:\Users\yangd\.m2\repository\com\alibaba\nacos\nacos-client\1.1.1\nacos-client-1.1.1.jar;C:\Users\yangd\.m2\repository\com\alibaba\nacos\nacos-common\1.1.1\nacos-common-1.1.1.jar;C:\Users\yangd\.m2\repository\commons-io\commons-io\2.2\commons-io-2.2.jar;C:\Users\yangd\.m2\repository\org\apache\commons\commons-lang3\3.8.1\commons-lang3-3.8.1.jar;C:\Users\yangd\.m2\repository\com\alibaba\nacos\nacos-api\1.1.1\nacos-api-1.1.1.jar;C:\Users\yangd\.m2\repository\com\alibaba\fastjson\1.2.47\fastjson-1.2.47.jar;C:\Users\yangd\.m2\repository\com\google\guava\guava\19.0\guava-19.0.jar;C:\Users\yangd\.m2\repository\commons-codec\commons-codec\1.11\commons-codec-1.11.jar;C:\Users\yangd\.m2\repository\io\prometheus\simpleclient\0.5.0\simpleclient-0.5.0.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-starter-netflix-ribbon\2.1.3.RELEASE\spring-cloud-starter-netflix-ribbon-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-netflix-ribbon\2.1.3.RELEASE\spring-cloud-netflix-ribbon-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-netflix-archaius\2.1.3.RELEASE\spring-cloud-netflix-archaius-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\cloud\spring-cloud-starter-netflix-archaius\2.1.3.RELEASE\spring-cloud-starter-netflix-archaius-2.1.3.RELEASE.jar;C:\Users\yangd\.m2\repository\com\netflix\archaius\archaius-core\0.7.6\archaius-core-0.7.6.jar;C:\Users\yangd\.m2\repository\com\google\code\findbugs\jsr305\3.0.1\jsr305-3.0.1.jar;C:\Users\yangd\.m2\repository\commons-configuration\commons-configuration\1.8\commons-configuration-1.8.jar;C:\Users\yangd\.m2\repository\com\netflix\ribbon\ribbon\2.3.0\ribbon-2.3.0.jar;C:\Users\yangd\.m2\repository\com\netflix\ribbon\ribbon-transport\2.3.0\ribbon-transport-2.3.0.jar;C:\Users\yangd\.m2\repository\io\reactivex\rxnetty-contexts\0.4.9\rxnetty-contexts-0.4.9.jar;C:\Users\yangd\.m2\repository\io\reactivex\rxnetty-servo\0.4.9\rxnetty-servo-0.4.9.jar;C:\Users\yangd\.m2\repository\com\netflix\hystrix\hystrix-core\1.5.18\hystrix-core-1.5.18.jar;C:\Users\yangd\.m2\repository\org\hdrhistogram\HdrHistogram\2.1.9\HdrHistogram-2.1.9.jar;C:\Users\yangd\.m2\repository\javax\inject\javax.inject\1\javax.inject-1.jar;C:\Users\yangd\.m2\repository\io\reactivex\rxnetty\0.4.9\rxnetty-0.4.9.jar;C:\Users\yangd\.m2\repository\com\netflix\ribbon\ribbon-core\2.3.0\ribbon-core-2.3.0.jar;C:\Users\yangd\.m2\repository\com\netflix\ribbon\ribbon-httpclient\2.3.0\ribbon-httpclient-2.3.0.jar;C:\Users\yangd\.m2\repository\commons-collections\commons-collections\3.2.2\commons-collections-3.2.2.jar;C:\Users\yangd\.m2\repository\org\apache\httpcomponents\httpclient\4.5.9\httpclient-4.5.9.jar;C:\Users\yangd\.m2\repository\com\sun\jersey\jersey-client\1.19.1\jersey-client-1.19.1.jar;C:\Users\yangd\.m2\repository\com\sun\jersey\jersey-core\1.19.1\jersey-core-1.19.1.jar;C:\Users\yangd\.m2\repository\javax\ws\rs\jsr311-api\1.1.1\jsr311-api-1.1.1.jar;C:\Users\yangd\.m2\repository\com\sun\jersey\contribs\jersey-apache-client4\1.19.1\jersey-apache-client4-1.19.1.jar;C:\Users\yangd\.m2\repository\com\netflix\servo\servo-core\0.12.21\servo-core-0.12.21.jar;C:\Users\yangd\.m2\repository\com\netflix\netflix-commons\netflix-commons-util\0.3.0\netflix-commons-util-0.3.0.jar;C:\Users\yangd\.m2\repository\com\netflix\ribbon\ribbon-loadbalancer\2.3.0\ribbon-loadbalancer-2.3.0.jar;C:\Users\yangd\.m2\repository\com\netflix\netflix-commons\netflix-statistics\0.1.1\netflix-statistics-0.1.1.jar;C:\Users\yangd\.m2\repository\io\reactivex\rxjava\1.3.8\rxjava-1.3.8.jar;C:\Users\yangd\.m2\repository\mysql\mysql-connector-java\8.0.17\mysql-connector-java-8.0.17.jar;C:\Users\yangd\.m2\repository\org\projectlombok\lombok\1.18.8\lombok-1.18.8.jar;C:\Users\yangd\.m2\repository\org\apache\httpcomponents\httpcore\4.4.12\httpcore-4.4.12.jar;C:\Users\yangd\.m2\repository\commons-lang\commons-lang\2.6\commons-lang-2.6.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-web\2.1.8.RELEASE\spring-boot-starter-web-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter\2.1.8.RELEASE\spring-boot-starter-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot\2.1.8.RELEASE\spring-boot-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-autoconfigure\2.1.8.RELEASE\spring-boot-autoconfigure-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-logging\2.1.8.RELEASE\spring-boot-starter-logging-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\ch\qos\logback\logback-classic\1.2.3\logback-classic-1.2.3.jar;C:\Users\yangd\.m2\repository\ch\qos\logback\logback-core\1.2.3\logback-core-1.2.3.jar;C:\Users\yangd\.m2\repository\org\apache\logging\log4j\log4j-to-slf4j\2.11.2\log4j-to-slf4j-2.11.2.jar;C:\Users\yangd\.m2\repository\org\apache\logging\log4j\log4j-api\2.11.2\log4j-api-2.11.2.jar;C:\Users\yangd\.m2\repository\org\slf4j\jul-to-slf4j\1.7.28\jul-to-slf4j-1.7.28.jar;C:\Users\yangd\.m2\repository\javax\annotation\javax.annotation-api\1.3.2\javax.annotation-api-1.3.2.jar;C:\Users\yangd\.m2\repository\org\yaml\snakeyaml\1.23\snakeyaml-1.23.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-json\2.1.8.RELEASE\spring-boot-starter-json-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\core\jackson-databind\2.9.9.3\jackson-databind-2.9.9.3.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\core\jackson-annotations\2.9.0\jackson-annotations-2.9.0.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\core\jackson-core\2.9.9\jackson-core-2.9.9.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\datatype\jackson-datatype-jdk8\2.9.9\jackson-datatype-jdk8-2.9.9.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\datatype\jackson-datatype-jsr310\2.9.9\jackson-datatype-jsr310-2.9.9.jar;C:\Users\yangd\.m2\repository\com\fasterxml\jackson\module\jackson-module-parameter-names\2.9.9\jackson-module-parameter-names-2.9.9.jar;C:\Users\yangd\.m2\repository\org\springframework\boot\spring-boot-starter-tomcat\2.1.8.RELEASE\spring-boot-starter-tomcat-2.1.8.RELEASE.jar;C:\Users\yangd\.m2\repository\org\apache\tomcat\embed\tomcat-embed-core\9.0.24\tomcat-embed-core-9.0.24.jar;C:\Users\yangd\.m2\repository\org\apache\tomcat\embed\tomcat-embed-el\9.0.24\tomcat-embed-el-9.0.24.jar;C:\Users\yangd\.m2\repository\org\apache\tomcat\embed\tomcat-embed-websocket\9.0.24\tomcat-embed-websocket-9.0.24.jar;C:\Users\yangd\.m2\repository\org\hibernate\validator\hibernate-validator\6.0.17.Final\hibernate-validator-6.0.17.Final.jar;C:\Users\yangd\.m2\repository\javax\validation\validation-api\2.0.1.Final\validation-api-2.0.1.Final.jar;C:\Users\yangd\.m2\repository\org\jboss\logging\jboss-logging\3.3.3.Final\jboss-logging-3.3.3.Final.jar;C:\Users\yangd\.m2\repository\com\fasterxml\classmate\1.4.0\classmate-1.4.0.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-web\5.1.9.RELEASE\spring-web-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-beans\5.1.9.RELEASE\spring-beans-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-webmvc\5.1.9.RELEASE\spring-webmvc-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-aop\5.1.9.RELEASE\spring-aop-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-context\5.1.9.RELEASE\spring-context-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-expression\5.1.9.RELEASE\spring-expression-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\slf4j\slf4j-api\1.7.28\slf4j-api-1.7.28.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-core\5.1.9.RELEASE\spring-core-5.1.9.RELEASE.jar;C:\Users\yangd\.m2\repository\org\springframework\spring-jcl\5.1.9.RELEASE\spring-jcl-5.1.9.RELEASE.jar com.hspedu.hspliving.gateway.HsplivingGatewayApplication
2024-03-11 23:51:51.453  INFO 19940 --- [           main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.cloud.autoconfigure.ConfigurationPropertiesRebinderAutoConfiguration' of type [org.springframework.cloud.autoconfigure.ConfigurationPropertiesRebinderAutoConfiguration$$EnhancerBySpringCGLIB$$bf9326d3] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.1.8.RELEASE)

2024-03-11 23:51:53.522  INFO 19940 --- [           main] c.h.h.g.HsplivingGatewayApplication      : No active profile set, falling back to default profiles: default
2024-03-11 23:51:54.049  INFO 19940 --- [           main] o.s.cloud.context.scope.GenericScope     : BeanFactory id=b5401dba-0300-3296-82f7-4c03e5337eee
2024-03-11 23:51:54.067  INFO 19940 --- [           main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.cloud.autoconfigure.ConfigurationPropertiesRebinderAutoConfiguration' of type [org.springframework.cloud.autoconfigure.ConfigurationPropertiesRebinderAutoConfiguration$$EnhancerBySpringCGLIB$$bf9326d3] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
2024-03-11 23:51:54.263  INFO 19940 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 5050 (http)
2024-03-11 23:51:54.284  INFO 19940 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2024-03-11 23:51:54.284  INFO 19940 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.24]
2024-03-11 23:51:54.416  INFO 19940 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2024-03-11 23:51:54.416  INFO 19940 --- [           main] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 885 ms
2024-03-11 23:51:54.483  WARN 19940 --- [           main] c.n.c.sources.URLConfigurationSource     : No URLs will be polled as dynamic configuration sources.
2024-03-11 23:51:54.483  INFO 19940 --- [           main] c.n.c.sources.URLConfigurationSource     : To enable URLs as dynamic configuration sources, define System property archaius.configurationSource.additionalUrls or make config.properties available on classpath.
2024-03-11 23:51:54.488  WARN 19940 --- [           main] c.n.c.sources.URLConfigurationSource     : No URLs will be polled as dynamic configuration sources.
2024-03-11 23:51:54.488  INFO 19940 --- [           main] c.n.c.sources.URLConfigurationSource     : To enable URLs as dynamic configuration sources, define System property archaius.configurationSource.additionalUrls or make config.properties available on classpath.
2024-03-11 23:51:54.594  WARN 19940 --- [           main] GatewayClassPathWarningAutoConfiguration : 

**********************************************************

Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway at this time. Please remove spring-boot-starter-web dependency.

**********************************************************


2024-03-11 23:51:56.503  INFO 19940 --- [           main] o.s.cloud.commons.util.InetUtils         : Cannot determine local hostname
2024-03-11 23:51:58.377  INFO 19940 --- [           main] o.s.cloud.commons.util.InetUtils         : Cannot determine local hostname
2024-03-11 23:51:59.193  WARN 19940 --- [           main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'routeDefinitionRouteLocator' defined in class path resource [org/springframework/cloud/gateway/config/GatewayAutoConfiguration.class]: Unsatisfied dependency expressed through method 'routeDefinitionRouteLocator' parameter 4; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'org.springframework.core.convert.ConversionService' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Qualifier(value=webFluxConversionService)}
2024-03-11 23:51:59.195  INFO 19940 --- [           main] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]
2024-03-11 23:51:59.208  INFO 19940 --- [           main] ConditionEvaluationReportLoggingListener : 

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2024-03-11 23:51:59.365 ERROR 19940 --- [           main] o.s.boot.SpringApplication               : Application run failed

org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'routeDefinitionRouteLocator' defined in class path resource [org/springframework/cloud/gateway/config/GatewayAutoConfiguration.class]: Unsatisfied dependency expressed through method 'routeDefinitionRouteLocator' parameter 4; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'org.springframework.core.convert.ConversionService' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Qualifier(value=webFluxConversionService)}
	at org.springframework.beans.factory.support.ConstructorResolver.createArgumentArray(ConstructorResolver.java:769) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.ConstructorResolver.instantiateUsingFactoryMethod(ConstructorResolver.java:509) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateUsingFactoryMethod(AbstractAutowireCapableBeanFactory.java:1321) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1160) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:555) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:515) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:320) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:222) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:318) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:199) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:845) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:877) ~[spring-context-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:549) ~[spring-context-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:141) ~[spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:744) [spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:391) [spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:312) [spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1215) [spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1204) [spring-boot-2.1.8.RELEASE.jar:2.1.8.RELEASE]
	at com.hspedu.hspliving.gateway.HsplivingGatewayApplication.main(HsplivingGatewayApplication.java:16) [classes/:na]
Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'org.springframework.core.convert.ConversionService' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Qualifier(value=webFluxConversionService)}
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.raiseNoMatchingBeanFound(DefaultListableBeanFactory.java:1658) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1217) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1171) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.ConstructorResolver.resolveAutowiredArgument(ConstructorResolver.java:857) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	at org.springframework.beans.factory.support.ConstructorResolver.createArgumentArray(ConstructorResolver.java:760) ~[spring-beans-5.1.9.RELEASE.jar:5.1.9.RELEASE]
	... 19 common frames omitted


Process finished with exit code 1

 

48 pom配置是正确的，但是idea还是报错 <dependencyManagement>,Gateway,Greenwich.SR3 实际上是一个 Spring Cloud 的版本号

问题描述

在 IntelliJ IDEA 中修改了 Maven 项目的 pom.xml 文件，设置了 <spring-cloud.version> 为 Greenwich.SR3 并引入了 spring-cloud-dependencies。尝试使用 spring-cloud-starter-gateway 但未指定具体版本，预期其版本由 Spring Cloud BOM 管理。然而，IntelliJ IDEA 报错，提示找不到 org.springframework.cloud:spring-cloud-starter-gateway:pom:Greenwich.SR3。

Greenwich.SR3 实际上是一个 Spring Cloud 的版本号，它不直接对应于 Spring Cloud Gateway 的任何版本。

下面的配置是正确的，但是idea还是报错 


    <!--在这里可以用来指定mysql、mybatis.spring.boot.version...的版本
    ，不使用版本仲裁-->
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>Greenwich.SR3</spring-cloud.version>
    </properties>

    <!--引入相关的依赖-->
    <dependencies>

        <!--
            1. gateway本身不需要 spring-boot-starter-web
            2. 所以不用引入 spring-boot-starter-web，如果引入spring-boot-starter-web,启动时会报告冲突
        -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
            <!--<version>Greenwich.SR3</version>-->
            <!--Greenwich.SR3 实际上是一个 Spring Cloud 的版本号
            ，它不直接对应于 Spring Cloud Gateway 的任何版本。-->
        </dependency>
	</dependencies>    
        
        

 <!--
       1. 这里使用dependencyManagement，进行版本控制
       2. dependencyManagement 用于指定版本，但是本身并不引入相关依赖
   -->
    <dependencyManagement>
        <!--引入 cloud alibaba 的BOM ，其中nacos也被该BOM管理，因此可以在这里指定
            nacos的版本，使用版本仲裁
        -->
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <!--<version>Greenwich.SR3</version>-->

                <version>${spring-cloud.version}</version>
                <!-- 老师解读:
                    1. type: pom 和 scope import 配合使用
                    2. 表示父项目的子模块和当前模块(hspliving-gateway)
                       ,在引入 spring-cloud-dependencies 相关依赖时锁定版本为${spring-cloud.version}
                    3. 通过 pom + import 解决 maven 单继承机制
                    -->
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

 

Spring Cloud Gateway 和 Spring Cloud 版本关系：Spring Cloud Gateway 是 Spring Cloud 的一个组件，其版本是由 Spring Cloud 的发布版（比如 Greenwich、Hoxton 等）来统一管理的。这意味着，当你选择了一个特定的 Spring Cloud 版本，如 Greenwich.SR3，它会包含一个兼容的 Spring Cloud Gateway 版本。

如果写的是如下程序块中的导入信息: 则会报错: Could not find artifact org.springframework.cloud:spring-cloud-starter-gateway:pom:Greenwich.SR3, 是因为 Spring Cloud Gateway 并没有一个直接名为 Greenwich.SR3 的版本。Spring Cloud 的版本（如 Greenwich.SR3）是用于整个 Spring Cloud 项目集合，而不是单独的组件。

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
            <version>Greenwich.SR3</version>
            <!--Greenwich.SR3 实际上是一个 Spring Cloud 的版本号
            ，它不直接对应于 Spring Cloud Gateway 的任何版本。-->
        </dependency>

尝试将 spring-cloud-starter-gateway 的版本设置为 Greenwich.SR3，Maven 报错，因为没有这样一个版本的 spring-cloud-starter-gateway。Greenwich.SR3 实际上是一个 Spring Cloud 的版本号，它不直接对应于 Spring Cloud Gateway 的任何版本。

为了修复这个问题，你应该在 dependencyManagement 部分指定Spring Cloud 的版本号Greenwich.SR3 ，并且确保在 dependencies 部分不要为 spring-cloud-starter-gateway 指定版本号。而是让它的版本通过 Spring Cloud 的 BOM 来管理。

通过这样配置，spring-cloud-starter-gateway 的版本将由 spring-cloud-dependencies 中定义的版本管理，这样 Maven 不会尝试查找不存在的 Greenwich.SR3 版本的 spring-cloud-starter-gateway，而是使用与 Spring Cloud Greenwich.SR3 兼容的正确版本。

 

解决方法

  1. 确保网络连接：确认可以正常访问 Maven 中央仓库（https://repo.maven.apache.org/maven2）。如果在中国大陆，考虑配置 Maven 使用国内镜像。

  2. 依赖管理：在 pom.xml 文件中，通过 <dependencyManagement> 引入 spring-cloud-dependencies BOM，这样可以集中管理 Spring Cloud 组件的版本，无需为每个单独指定：

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

  3. Maven 强制更新：在命令行中执行 mvn clean install -U 强制更新项目依赖。

  4. IDEA 缓存清理：如果问题仍然存在，尝试在 IntelliJ IDEA 中使用 “Invalidate Caches / Restart…” 功能。

  5. 重启 IntelliJ IDEA：关闭并重新打开 IntelliJ IDEA，这可以帮助 IDE 重新加载项目配置和依赖。

相关概念

  • Spring Cloud BOM：Bill of Materials (BOM) 提供了一种依赖版本管理的方式，使得在项目中引用时无需指定具体版本，保证了版本一致性。

  • <dependencyManagement>：Maven 用于集中管理项目依赖的版本。在父 POM 文件中配置后，子模块可以继承并使用这些依赖而无需指定版本。

  • Maven -U 参数：在执行 Maven 命令时，-U 参数会强制更新所有 SNAPSHOT 依赖和插件。

  • IntelliJ IDEA 缓存：IDEA 缓存项目和依赖信息，以加速构建过程。缓存错误或过时可能导致项目更新不正确。

通过以上步骤，通常可以解决由于依赖配置错误或 IDE 缓存问题导致的 Maven 项目错误。

 

49 跨域问题解决代码

 

image-20240313014930821

 

/**
 * Copyright (c) 2016-2019 人人开源 All rights reserved.
 *
 * https://www.renren.io
 *
 * 版权所有，侵权必究！
 */

package com.hspedu.hspliving.commodity.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

   // 下面这段代码，可以解决跨域问题
   @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
           .allowedOrigins("*")
           .allowCredentials(true)
           .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
           .maxAge(3600);
   }
}

 

 

package com.hspedu.hspliving.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.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

/**
 * @author yangda
 * @create 2024-03-13-1:38
 * @description: 配置解决网关跨域问题，之前解决跨域问题的配置类需要实现
 * web-starter中的一个接口，但是网关gateway和web-starter同时引入会冲突
 * ，因此之前的解决跨域问题的配置类 `public class CorsConfig implements WebMvcConfigurer`  用不了
 *
 */
@Configuration
public class HsplivingGatewayCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter() {
        System.out.println("enter....");
        // 这里要选 org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource , 不要选错了
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

 

 

50 跨域问题 已拦截跨源请求：同源策略禁止读取位于 http://localhost:5050/api/sys/login 的远程资源。（原因：不允许有多个 'Access-Control-Allow-Origin' CORS 头）。

 

image-20240313014726217

 

出现该问题的原因是: 写了两次解决跨域的配置类代码

前端项目renren-fast-vue发出请求-> 后端网关项目hspliving-gateway(写了解决跨域的配置类代码) ->

网关请求转发到后端项目renren-fast(也写了解决跨域的配置类代码)，所以返回多个Access-Control-Allow-Origin请求头,报错

image-20240313015605040

 

 

在你提供的情况中，前端项目 renren-fast-vue 发出请求到后端网关项目 hspliving-gateway，然后由网关转发请求到后端项目 renren-fast。这里出现了因为在两个后端服务（网关和后端项目）中都配置了跨域解决方案，导致多个 Access-Control-Allow-Origin 响应头被返回的问题。

通常，跨域资源共享（CORS）策略是浏览器安全的一部分，用于限制网页能够如何请求其他域上的资源。当你的前端应用尝试从不同的源（不同的协议、域名或端口）访问后端服务时，浏览器会强制执行CORS策略。

在你的架构中，前端请求首先发送到网关，网关则充当中介将请求转发到实际的后端服务。这里的关键点在于，实际发生跨域问题的地方是在前端应用与网关之间，而不是网关与后端服务之间。因为跨域是浏览器的安全策略，只有当浏览器直接发起请求到不同源的服务器时，跨域检查才会被触发。

 

当网关收到前端的请求后，它将作为一个服务器端的组件，向其他后端服务发起请求。这个过程不经过浏览器，因此不受CORS策略限制。因此，在网关到后端服务的通信中通常不需要配置CORS，因为这部分通信不涉及浏览器的直接请求。

因此，你只需要在处理前端请求的入口点（在这个例子中是你的网关 hspliving-gateway）配置CORS。后端服务 renren-fast 不需要配置CORS，因为从网关到后端服务的请求不会被浏览器的CORS策略所限制。这就是为什么你在后端项目 renren-fast 中配置跨域代码后会遇到问题，因为它导致当请求通过网关时返回了多个 Access-Control-Allow-Origin 头，这违反了CORS策略，因此浏览器报错。

 

51 跨域问题出现的场景

直接通过浏览器访问后端接口

如 通过浏览器直接访问 http://localhost:9090/commodity/category/list/tree

不会发生跨域问题，跨域问题只会发生在 在某个端口进行监听的前端项目中的代码里，访问在另一个端口监听的后端服务时发生

GPT: 
是的，你的理解是正确的。

当你直接在浏览器地址栏中输入一个URL（如 `http://localhost:9090/commodity/category/list/tree`）并访问时，你实际上是在进行一个简单的GET请求。这种情况下，没有涉及到任何跨域请求，因为不存在从一个源（origin）到另一个源的请求过程。浏览器只是简单地向该URL发送请求并展示响应。这种情况不触发CORS策略，因此没有跨域问题。

跨域问题主要出现在当一个Web页面试图通过JavaScript（比如通过XMLHttpRequest或Fetch API）向不同源（不同协议、域名或端口）的服务器发起请求时。浏览器出于安全考虑，会执行CORS策略来限制这种请求，除非被请求的服务器明确表示允许来自该原始源的请求。

因此，如果你有一个在某个端口（例如8080）上运行的前端应用，试图通过JavaScript访问在不同端口（例如9090）上运行的后端服务，浏览器会识别这为一个潜在的跨源请求，并执行CORS检查。如果后端服务没有适当地设置CORS响应头来允许来自前端应用源的请求，浏览器将阻止这次请求，并在控制台中显示跨域错误。

 

52 Nacos配置中心实时刷新并获取 spring.cloud.nacos.config.ext-config[0].refresh=true 的说明

 

在Nacos配置中心配置的信息如下:

server:
  port: 7070

#配置OSS
spring:
  cloud:
    alicloud:
      access-key: xxxxxxxxxx5
      secret-key: xxxxxxxxxxSEJG
      oss:
        endpoint: oss-xxxxx.aliyuncs.com
        bucket: xxxxxng-10000

image-20240321165136282

bootstrap.properties文件的配置如下:

# 这里使用.properties的方式 来配置, 为了让小伙伴多见识一点儿

# 注册到nacos的name
spring.application.name=hspliving-service
# 指定nacos服务注册和发现地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
# 指定nacos配置中心地址
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
# 指定获取配置信息的namespace
spring.cloud.nacos.config.namespace=8446ff11-63de-4e1a-a5ee-55587ea68c3a
# 指定namespace下的 group 组
spring.cloud.nacos.config.group=dev
# 通过ext-config[?] 扩展配置 来指定data-id 和 是否实时刷新获取的配置
spring.cloud.nacos.config.ext-config[0].data-id=hspliving-service.yml
spring.cloud.nacos.config.ext-config[0].refresh=true
# 下面这里指定了组，上面的`spring.cloud.nacos.config.group=dev`可以不指定,也能跑起来,当然都指定也没有问题
spring.cloud.nacos.config.ext-config[0].group=dev

 

在你提供的配置中，spring.cloud.nacos.config.ext-config[0].refresh=true 表示如果在 Nacos 配置中心对应的 data-id（即 hspliving-service.yml）中的配置信息发生变化，那么这些变化会被实时地（动态地）反映到你的 Spring Cloud 应用中。这种机制是基于 Spring Cloud 的 Environment 和 @RefreshScope 实现的，允许某些配置属性在运行时被更新，而无需重启应用。

然而，并非所有的配置都可以通过这种方式进行动态更新。例如，一些核心的配置，如服务的端口（server.port）、数据库配置等，一旦应用启动后就不能再更改了，因为它们是在应用启动的早期阶段就已经读取和固定下来的。如果你在 Nacos 中改变这些配置，你的应用不会自动更新这些核心配置，需要重启应用来使这些更改生效。

具体到你的例子，如果你在 Nacos 配置中心更改了 server.port 的值（比如从 7070 更改为 7071），即使设置了 spring.cloud.nacos.config.ext-config[0].refresh=true，正在运行的项目的监听端口也不会实时变化，因为端口号属于那些只能在应用启动时读取一次的配置。如果需要应用这个更改，你需要重启你的应用。

总结来说，spring.cloud.nacos.config.ext-config[0].refresh=true 允许你在不重启应用的情况下，实时更新和应用 Nacos 配置中心中的某些配置，但这不适用于所有类型的配置，特别是那些应用启动过程中就需要确定下来的配置。

 

对于阿里云 OSS 的配置，如 access-key 和 secret-key，它们通常用于初始化阿里云 SDK 客户端和进行身份验证。这些密钥的变化不属于常规的、可以动态刷新的配置范畴。因为一旦应用启动，阿里云的客户端（例如 OSS 客户端）就已经用这些密钥进行了初始化，并建立了与 OSS 服务的连接。

更改这些密钥后，已经初始化的客户端实例不会自动更新它们所持有的密钥。这意味着，即使你通过 Nacos 动态更新了 access-key 或 secret-key 的值，这种更新也不会实时反映到现有的 OSS 客户端实例上。因此，为了让更新生效，你通常需要重启应用，这样新的密钥才会被用于初始化新的 OSS 客户端实例。

如果你在业务逻辑中直接使用这些密钥来每次创建新的 OSS 客户端，并且你的代码可以动态读取配置（即没有缓存旧的密钥），那么理论上可以不重启应用来应用新的密钥。但这在实践中是不常见的，大多数应用会在启动时初始化一次客户端并重复使用它，因此，大部分情况下，更改 OSS 的 access-key 或 secret-key 需要重启应用。

 

53 ElementUI Form表单校验器细节

 

var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

 

 

var validatePass 是定义的校验器规则，将定义的校验器规则 validatePass传到rules.pass.validator 属性位置，即可使用定义好的校验器规则

validator 校验器

方式1: 传入在外部定义好的校验器规则

 rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],

 

方式2: 直接传入校验器规则

是的，你可以直接在属性位置传入一个箭头函数作为校验器规则。在 Element UI 的 Form 组件中，validator 是用来自定义校验规则的，它可以接受一个函数，该函数接收三个参数：rule、value 和 callback。

  • rule 参数是描述校验规则的对象。

  • value 参数是当前表单项的值。

  • callback 是一个必须被调用的回调函数，用来指示校验是否通过。如果校验通过，直接调用 callback() 即可。如果校验失败，则调用 callback(new Error('错误信息')) 来显示错误信息。

因此，你可以直接在 rules 对象中对应的属性里定义一个箭头函数作为校验规则，如你的方式2所示。这样的做法是完全有效的，并且在实际开发中是常用的一个模式，特别是当你需要对某个表单项应用特定的校验逻辑时。

下面是你的方式2的校验规则，这是正确的用法：

rules: {
  pass: [
    { 
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          // 校验通过
          callback();
        }
      }, 
      trigger: 'blur'
    }
  ],
}

这段代码表示：当表单项 pass 失去焦点时（即 trigger: 'blur'），会触发这个箭头函数进行校验。如果用户没有输入密码（value === ''），则显示错误信息；否则，通过校验（调用 callback() 无参数）。

 

 

 

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

 

 

54 普通的 <script> 代码块中，将一个箭头函数直接用作对象的属性

在普通的 <script> 代码块中，将一个箭头函数直接用作对象的属性值是完全可行的，这不仅适用于 Vue 或 Element UI 的规则，也适用于 JavaScript 对象的通常行为。但要注意，这里的“属性位置”主要指的是对象内部，作为对象的一个属性值。

下面是一个在普通 <script> 代码块中的例子，假设我们不在 Vue 的上下文中，而只是处理一个普通的 JavaScript 对象：

<script>
// 假设我们有一个对象，它代表一个任务处理器
const taskHandler = {
  // 这个任务处理器有一个方法，该方法接受一个回调函数
  // 我们在这里直接使用箭头函数作为属性的值
  process: (task) => {
    // 假设的任务处理逻辑
    if (task === 'complex') {
      console.log('处理复杂任务');
    } else {
      console.log('处理简单任务');
    }
  },
};

// 使用这个对象的方法
taskHandler.process('complex');
taskHandler.process('simple');
</script>

在这个例子中，taskHandler 对象有一个 process 属性，它直接被赋予了一个箭头函数。这个箭头函数接受一个 task 参数，并根据任务的类型打印不同的消息。

这个模式同样适用于定义事件处理器、定时器回调、或者任何需要函数作为参数的场景。只要 JavaScript 代码可以运行，你就可以在对象属性位置使用箭头函数。箭头函数（和普通函数）作为对象属性（或方法）是 JavaScript 对象字面量语法的一部分。

 

55 在 JavaScript 中使用普通函数和箭头函数定义对象的方法或属性

在 JavaScript 中，你可以以多种方式定义对象的方法或属性。箭头函数和普通函数是其中两种常用的方式。这两种方式有一些关键的区别，特别是在 this 绑定的行为上。下面我将通过例子来展示这两种不同的定义方式：

普通函数定义方式

使用普通函数定义对象的方法时，函数中的 this 指向的是调用该函数的对象（除非函数被非方法式调用）。

<script>
const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

person.greet(); // 输出: Hello, Alice
</script>

在这个例子中，greet 是用普通函数定义的。当调用 person.greet() 时，this 在 greet 函数内部指向 person 对象。

箭头函数定义方式

箭头函数没有自己的 this，它会捕获其所在上下文的 this 值，作为自己的 this 值，因此箭头函数内部的 this 是词法绑定的。

<script>
const person = {
  name: 'Bob',
  greet: () => {
    console.log('Hello, ' + this.name);
  }
};

person.greet(); // 可能输出: Hello, （如果在全局作用域中，this.name 未定义的话）
</script>

在这个例子中，greet 是用箭头函数定义的。如果 greet 方法在全局作用域中被调用（如示例中那样直接调用 person.greet()），那么 this 并不会指向 person 对象（如果是在严格模式下，this 将是 undefined；如果是在非严格模式下，this 将指向全局对象 window）。这是因为箭头函数不绑定 this，它捕获了定义时所在上下文的 this 值。

对比

  1. this 绑定：

    • 普通函数：this 指向调用函数时的上下文对象。

    • 箭头函数：没有自己的 this，它会捕获定义时所在的上下文中的 this。

  2. 语法简洁：

    • 普通函数：可能更适合需要多步操作或包含多个语句的场景。

    • 箭头函数：更简洁，适用于单行表达式或直接返回值的场景。

  3. 使用场景：

    • 普通函数：更适合作为方法使用，尤其是当你需要引用对象本身时（通过 this 关键字）。

    • 箭头函数：适用于不需要绑定 this 的场景，如事件处理器、定时器、Promise 回调等。

在实际编程中，选择哪种方式取决于具体的场景和需求。

 

56 JavaScript 的判断条件中可以使用正则表达式.test(value) 进行判断

正则表达式.test(value) 返回一个boolean值

//增加校验器
validator: (rule, value, callback) => {
  if (value === '') {
    callback(new Error('检索首字母必须填写'));
  }else if (!/^[a-zA-Z]$/.test(value)){ // 必须是 a-z 或者 A-Z
  // 如果不满足 a-z 或者 A-Z 就会走到这里
    callback(new Error('检索首字母必须是a-z 或者 A-Z'));
  }else {
    callback();
  }
},

.test(value)是一个方法，用来检查value是否符合前面的正则表达式。如果value符合（即是一个单独的英文字母），.test(value)返回true；否则返回false。

关于您的问题：“是否可以使用if (!/^[a-zA-Z]$/)这样的用法？”答案是：这种用法几乎是正确的，但是您可能遗漏了一个重要的细节——正则表达式应用于整个字符串。在您提供的例子中，由于遗漏了.test(value)部分，所以代码不完整，无法执行。完整的用法应该是if (!/^[a-zA-Z]$.test(value)) { ... }，这样才能正确地执行测试。

简而言之，.test(value)是必须的，因为它是正则表达式对象的方法，用于测试字符串value是否符合正则表达式定义的模式。没有它，正则表达式本身并不能自动应用于任何字符串或执行任何操作。

57 登陆界面拿不到验证码和上传图片也在网关报错："Connection prematurely closed BEFORE response"

 

登陆界面拿不到验证码图片

2024-03-14 21:45:45.712  WARN 7416 --- [ctor-http-nio-8] r.netty.http.client.HttpClientConnect    : [id: 0x1503be2e, L:0.0.0.0/0.0.0.0:64195 ! R:/192.168.0.37:8080] The connection observed an error

reactor.netty.http.client.PrematureCloseException: Connection prematurely closed BEFORE response

2024-03-14 21:45:45.714 ERROR 7416 --- [ctor-http-nio-8] a.w.r.e.AbstractErrorWebExceptionHandler : [d30de5c0] 500 Server Error for HTTP GET "/api/captcha.jpg?uuid=4561d7bb-9402-412c-8ef2-6ba0ee84a3df%20HTTP/1.1"

reactor.netty.http.client.PrematureCloseException: Connection prematurely closed BEFORE response

确保 hspliving-service、hspliving-commodity 和 renren-fast 服务实例都正常运行，并已正确注册到 Nacos。重启renren-fast后端项目

 

 

上传图片也报错

2024-03-15 22:34:06.543  WARN 13136 --- [ctor-http-nio-2] r.netty.http.client.HttpClientConnect    : [id: 0x258d7831, L:0.0.0.0/0.0.0.0:51736 ! R:/192.168.0.36:7070] The connection observed an error

reactor.netty.http.client.PrematureCloseException: Connection prematurely closed BEFORE response

2024-03-15 22:34:06.544 ERROR 13136 --- [ctor-http-nio-2] a.w.r.e.AbstractErrorWebExceptionHandler : [53c8d94d] 500 Server Error for HTTP GET "/api/service/oss/policy?t=1710513246249"

reactor.netty.http.client.PrematureCloseException: Connection prematurely closed BEFORE response

重启Nacos和service后端项目

可能的原因为 服务器端的上传Policy和签名 放在了Nacos, 但是如果重启了Nacos可能，service后端项目没有及时拿回来

 

 

 

58 javax.validation.constraints和org.hibernate.validator.constraints。下的@NotBlank注解区别

建议使用javax.validation.constraints.@NotBlank来保持代码的现代性和兼容性。

在Java的Bean验证框架中，@NotBlank注解用于校验字符串，确保被注解的字段不仅非空（null），而且在去除首尾空白字符后至少包含一个字符。不过，这个注解存在于两个不同的包中，它们分别是javax.validation.constraints和org.hibernate.validator.constraints。下面是它们各自的功能和区别：

  1. javax.validation.constraints.@NotBlank:

    • 这是Bean Validation API（即Java EE的一部分）中的一个标准注解。

    • 它用于确保对应的字符串非空，且至少包含一个非空白字符。

    • 这个注解是Java标准的一部分，不依赖于具体的实现。也就是说，不管你使用哪个Bean验证提供者（比如Hibernate Validator或Apache BVal），这个注解都应该按预期工作。

  2. org.hibernate.validator.constraints.@NotBlank:

    • 这个注解曾经是Hibernate Validator提供的一个特定功能，这是Bean Validation的一个具体实现。

    • 它和javax.validation.constraints.@NotBlank功能相似，都是用来校验字符串非空且不全由空白字符组成。

    • 不过，从Hibernate Validator 5.x开始，这个注解已经被标记为过时（deprecated），因为Bean Validation 2.0（Hibernate Validator 6.x及以上）引入了自己的@NotBlank注解，随之org.hibernate.validator.constraints.@NotBlank就不再建议使用了。

区别:

  • 来源: javax.validation.constraints.@NotBlank来自Java EE的Bean Validation API，是一个标准；而org.hibernate.validator.constraints.@NotBlank是特定于Hibernate Validator的。

  • 推荐使用: 推荐使用javax.validation.constraints.@NotBlank，因为它是标准的一部分，而且具有更广泛的兼容性。

  • 版本: 如果你使用的是较老的Hibernate Validator版本（5.x及以下），你可能还会遇到org.hibernate.validator.constraints.@NotBlank。但在新版本中，应优先使用javax.validation.constraints.@NotBlank，因为它遵循了最新的Bean Validation 2.0标准。

因此，如果没有特殊理由需要兼容老版本的Hibernate Validator，建议使用javax.validation.constraints.@NotBlank来保持代码的现代性和兼容性。

 

59 List集合对象.ForEach((item) -> {})，拉姆达表达式的应用

 

Iterable接口中方法的源码如下:

  default void forEach(Consumer<? super T> action) {
        Objects.requireNonNull(action);
        for (T t : this) {
            action.accept(t);
        }
    }

这个forEach方法可以直接传入一个lambda表达式。

在Java中，Consumer<? super T>是一个函数式接口，它代表接受单个输入参数且不返回结果的操作。具体到这个接口，它的accept(T t)方法接受一个类型为T的参数。在这个上下文中，T是你的集合或其他可迭代对象中元素的类型。

因此，当你调用这个forEach方法时，可以传入一个符合Consumer接口的lambda表达式。这个lambda表达式接受一个类型为T的参数，并执行一些操作，但不返回任何值。这里是一个例子：

假设有一个List<String>，并想要打印列表中的每个元素，可以这样写：

List<String> list = Arrays.asList("Apple", "Banana", "Cherry");
list.forEach(s -> System.out.println(s));

在这个例子中，s -> System.out.println(s)就是一个lambda表达式，它符合Consumer<String>接口的要求：它接受一个字符串（列表中的一个元素）并执行一个操作（在这个案例中，是打印该字符串）。

因此，forEach方法不仅可以接受一个lambda表达式，而且这也是它的常见用法，这使得对集合中的每个元素进行迭代操作变得简单和直观。

 

@RequestMapping("/save")
    // @RequiresPermissions("commodity:brand:save")
    public R save(@Validated @RequestBody BrandEntity brand,
                  BindingResult result) {

        //先创建一个map,用于收集校验的错误
        HashMap<String, String> map = new HashMap<>();

        if (result.hasErrors()) {
            //如果有校验错误，就返回错误信息
            //遍历result, 将错误信息收集到map
            // result.getFieldErrors() 返回一个List集合
            result.getFieldErrors().forEach((item) -> {
                // 得到field
                String field = item.getField();
                // 得到校验的错误信息
                String message = item.getDefaultMessage();
                // 放入到map
                map.put(field, message);
            });
            // 返回收集到的错误信息
            return R.error(400, "品牌表单数据不合法").put("data", map);

        } else {
            //如果没有校验错误，就入库
            brandService.save(brand);
            return R.ok();
        }
    }

这里这个item 就是所谓的接受一个参数, 然后下面的一系列操作也没有返回值因此满足要求

是的，您的理解是正确的。

在这个例子中，result.getFieldErrors().forEach((item) -> {...})中的item代表getFieldErrors()返回的列表中的每个元素。这些元素通常是字段错误的实例，每个实例提供关于特定字段验证失败的详细信息。

这个lambda表达式((item) -> {...})是作为Consumer接口的一个实例被传递给forEach方法的。这里的item就是您提到的“接受一个参数”的部分，这个参数在每次迭代时代表列表中的当前元素。

在lambda表达式的大括号内 {...}，您可以定义要对每个元素执行的操作。在您的例子中，这些操作包括：

  1. 从item中获取字段名称（String field = item.getField();）。

  2. 从item中获取默认的错误消息（String message = item.getDefaultMessage();）。

  3. 将这个字段名称和错误消息放入到一个映射中（map.put(field, message);）。

这个过程没有返回值，确实满足Consumer接口的要求，该接口的accept方法期望接受一个参数并且不返回任何结果。因此，这个lambda表达式适合用作forEach方法的参数。

 

60 id字段在JSON数据中既可以接收字符串形式（如"id": "1"）也可以接收数字形式（如"id": 1）。无论哪种格式，都能正确地封装到Java对象的id属性中 - Spring消息转换器

问题描述

在使用Spring Boot进行Web开发时，对于一个实体类BrandEntity，其中的id字段在JSON数据中既可以接收字符串形式（如"id": "1"）也可以接收数字形式（如"id": 1）。无论哪种格式，都能正确地封装到Java对象的id属性中，即使该属性在Java中被定义为Long类型。

示例实体类代码：

@Data
@TableName("commodity_brand")
public class BrandEntity implements Serializable {
    @TableId
    @NotNull(message = "修改要求指定id", groups = {UpdateGroup.class})
    @Null(message = "添加不能指定id", groups = {SaveGroup.class})
    private Long id;
    // 其他字段略...
}

示例控制器方法：

@RequestMapping("/update")
public R update(@Validated(UpdateGroup.class) @RequestBody BrandEntity brand) {
    brandService.updateById(brand);
    return R.ok();
}

JSON数据示例：

{
    "id": "1",
    "name": "海信",
    "isshow": 27
}

或

{
    "id": 1,
    "name": "海信",
    "isshow": 27
}

解释

类型弹性

JSON解析器（如Jackson），使用在Spring Boot中，通常提供一定程度的类型弹性。这意味着在解析JSON数据并映射到Java对象时，如果JSON字段的类型与Java对象字段的类型不完全匹配，解析器会尝试进行合理的类型转换：

  • 如果JSON中的"id"是一个字符串，但内容可以被解释为长整型（Long），如"1"，解析器将尝试将这个字符串转换为长整型值。

  • 如果JSON中的"id"直接提供了一个数字，没有引号，如1，则直接适合映射到Java中的长整型。

自动类型转换

在处理HTTP请求体并将其转换为Java对象时，Spring利用HTTP消息转换器，这通常涉及调用像Jackson这样的库来处理JSON数据。这些转换器负责将接收的JSON转换成相应的Java类型，包括执行任何必要的类型转换。

注解和校验

在BrandEntity中使用的注解（例如@NotNull和@Null）主要用于数据校验，并不直接参与到类型转换的过程。校验会在类型转换之后应用，因此只有当id字段成功转换为Long类型，并且满足校验组条件时，才会视为校验通过。

通过以上方式，即可清晰地理解和记录为什么BrandEntity的id字段可以从JSON的两种不同格式正确解析和封装，以及相关的后端处理逻辑。

 

#

 

 

 

 

61 关于自定校验器EnumConstraintValidator和自定义校验注解 @EnumValidate 使用到的ValidationMessages.properties属性文件的说明

package com.hspedu.common.valid;

import javax.validation.ConstraintValidator;
import javax.validation.ConstraintValidatorContext;

/**
 * @author yangda
 * @create 2024-03-17-19:00
 * @description: 自定义校验器EnumConstraintValidator
 * ConstraintValidator<> 自定义校验器需要实现的接口
 * Constraint: 限制;约束;限定;严管
 *
 * 1. EnumConstraintValidator 是真正的校验器，即校验的逻辑是写在这里的
 * 2. EnumConstraintValidator需要实现接口 ConstraintValidator<A extends Annotation, T>
 * 3. <EnumValidate,Integer> 表示该校验器是针对 @EnumValidate注解 传入的 Integer类型的数据进行校验
 */
public class EnumConstraintValidator implements ConstraintValidator<EnumValidate,Integer> {


    @Override
    public void initialize(EnumValidate constraintAnnotation) {
        // constraintAnnotation 就是标注在对象属性上的@EnumValidate注解
        // 通过该注解可以获取到EnumValidate注解的各个属性传入的值
    }

    // 这里是判断最终校验结果的方法，如果返回true校验成功，如果返回false就是校验失败！

    /**
     *
     * @param value 就是将来在前端的表单中传入的数据，即要校验的字段 前端表单字段值 封装到 有EnumValidate注解标注 的对象属性的值
     * @param context
     * @return
     */
    @Override
    public boolean isValid(Integer value, ConstraintValidatorContext context) {
        return false;
    }
}

 

 

package com.hspedu.common.valid;

import javax.validation.Constraint;
import javax.validation.Payload;
import javax.validation.constraints.NotNull;

import java.lang.annotation.Documented;
import java.lang.annotation.Repeatable;
import java.lang.annotation.Retention;
import java.lang.annotation.Target;

import static java.lang.annotation.ElementType.*;
import static java.lang.annotation.ElementType.TYPE_USE;
import static java.lang.annotation.RetentionPolicy.RUNTIME;

/**
 * @author yangda
 * @create 2024-03-17-18:50
 * @description: 1. 创建自定义的注解 @EnumValidate 参考@NotNull源码来开发
 * 2. @Constraint(validatedBy = {EnumConstraintValidator.class}) ,  可以指定该自定义注解可以和EnumConstraintValidator.class校验器关联
 * 3. String message() default "{?}"; 可以指定校验时返回的信息
 * 4.  Class<?>[] groups() default { }; 指定以后的自定义注解 @EnumValidate 在哪些校验组生效
 */
@Target({METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER, TYPE_USE})
@Retention(RUNTIME)
@Documented
@Constraint(validatedBy = {EnumConstraintValidator.class})
public @interface EnumValidate {

    // String message() default "{javax.validation.constraints.NotNull.message}";
    // "{javax.validation.constraints.NotNull.message}" 就是默认的message是啥
    // ，这里指定的是message的key javax.validation.constraints包下的注解的 这个默认的消息是在  ValidationMessages_zh_CN.properties 文件配置如@NotBlank的 javax.validation.constraints.NotBlank.message        = \u4e0d\u80fd\u4e3a\u7a7a
    String message() default "{com.hspedu.common.valid.EnumValidate.message}";

    Class<?>[] groups() default {};

    Class<? extends Payload>[] payload() default {};

    // 增加values属性
    int[] values() default {};

}

 

# 该文件配置将来要返回的默认校验信息 这个资源文件的文件名不能乱写 ValidationMessages.properties
com.hspedu.common.valid.EnumValidate.message=\u663e\u793a\u72b6\u6001\u5fc5\u987b\u662f\u0030\u6216\u8005\u0031

 

ValidationMessages.properties是Java Bean Validation（JSR 303和JSR 349）默认使用的资源文件，用于定义校验消息的本地化字符串。

  • 文件名要求：确实有命名要求。默认情况下，Java Bean Validation会寻找名为ValidationMessages.properties的文件。如果要进行本地化，可以添加语言或国家代码，如ValidationMessages_zh_CN.properties用于简体中文。

  • 用途：在这个文件中，你可以为你的自定义校验注解定义默认错误消息。这些消息通过注解中的message属性引用，如@EnumValidate(message="{com.hspedu.common.valid.EnumValidate.message}")，则对应的消息应该在ValidationMessages.properties中定义。

  • 定义消息：在ValidationMessages.properties文件中，你可以定义键值对，键通常是注解中message属性的默认值，值是实际的错误消息，可以包括Unicode字符（如\u663e表示显示的中文字符）。

示例：

假如ValidationMessages.properties内容如下：

com.hspedu.common.valid.EnumValidate.message=显示状态必须是0或者1

这意味着，当@EnumValidate注解的校验失败时，如果没有为特定场景提供具体的消息，将默认使用上述消息。这种机制提供了一种方便的方式来集中管理和本地化校验消息。

综上所述，payload属性主要用于扩展信息，通常在日常使用中可以保持默认；而ValidationMessages.properties文件是一个重要的资源，用于定义和本地化校验消息，它的命名有固定要求，确保Bean Validation能够正确加载和应用这些自定义消息。

 

62 ValidationMessages.properties的键值对的值可以是汉字吗？为什么ValidationMessages.properties`文件中会写Unicode字符而不是中文？

在ValidationMessages.properties文件中，键值对的值确实可以直接使用汉字。但是，在很多情况下，开发者选择使用Unicode字符（如\u4e2d\u6587代表中文）而非直接书写汉字，主要基于以下几个原因：

  1. 编码兼容性：属性文件默认采用ISO 8859-1字符编码（也称为Latin-1）。这种编码支持的字符集有限，不包括汉字等非西欧字符。如果直接在文件中书写汉字，而文件又是按ISO 8859-1编码存储的，那么汉字可能会显示为乱码。使用Unicode转义序列（即\uXXXX形式的编码）可以确保字符在各种环境下都能正确显示，避免了因编码不一致导致的问题。

  2. 跨平台和环境一致性：不同的编辑器、操作系统或Java环境可能对文件编码的默认处理有所不同。使用Unicode确保了在任何环境下，无论是Windows、Linux还是其他操作系统，文件中的文本都能被正确解析和显示。

  3. 易于版本控制和比较：当.properties文件被存储在版本控制系统中时（如Git），使用Unicode字符可以减少因字符编码差异导致的差异比较问题。它使得文本内容在各种工具和环境下的显示更加一致。

尽管直接使用汉字在很多现代IDE和构建工具中能够正常工作，因为这些工具可能会自动处理编码问题，但使用Unicode转义字符依然是一种更安全且兼容性更好的做法。

如果您想在ValidationMessages.properties中直接使用汉字，确保您的编辑器或IDE将文件保存为UTF-8编码，并且您的构建工具或运行环境支持这种编码设置。但请记住，即使这样，提交到版本控制系统时仍可能遇到问题，除非您确保整个工作团队的环境都配置得当。因此，为了安全起见，许多开发者仍然倾向于使用Unicode转义字符。

63 为什么属性文件大多使用Unicode编码定义键值对的值？

使用Markdown格式，下面是关于为什么属性文件（如Java中的.properties文件）大多使用Unicode编码来定义键值对的值的总结：

使用Unicode编码定义键值对的值

在Java的.properties文件中，键值对的值经常使用Unicode编码（\uXXXX），主要基于以下几个考虑：

1. 编码兼容性

  • .properties文件默认使用ISO 8859-1（Latin-1）字符编码。

  • ISO 8859-1编码不支持汉字等非西欧字符集。

  • 使用Unicode转义序列（\uXXXX格式）可以避免在不支持汉字的字符编码下出现乱码。

2. 跨平台一致性

  • 不同的编辑器、操作系统或Java环境可能对文件编码的默认处理不同。

  • 使用Unicode转义序列确保字符在所有环境（如Windows、Linux等）中都能正确解析和显示。

3. 版本控制友好

  • 在版本控制系统（如Git）中，使用Unicode字符减少了因编码差异导致的差异比较问题。

  • Unicode字符使得文件更易于在不同环境下维护和比较。

4. 环境配置的简化

  • 直接使用汉字需要确保环境（编辑器、构建工具、运行时）均支持并正确配置为UTF-8或其他兼容的编码。

  • 使用Unicode转义字符，无需特别配置环境即可保证字符的正确显示。

结论

虽然在很多现代开发环境中，直接使用汉字在.properties文件中可以正常工作，使用Unicode转义序列依然被视为一种更通用、更安全的做法。这种方法在处理国际化资源文件时尤为重要，确保无论在什么环境下，文件都能被正确解析和使用。

通过遵循上述建议，可以保证.properties文件在不同环境中的兼容性和一致性，避免因编码问题导致的错误和混淆。

 

64 Set集合和List集合独特的特点

Set集合和List集合是Java集合框架中两种不同类型的集合，它们各自有独特的特点：

List集合的特点：

  1. 有序性：List集合中的元素是有序的，即它们插入的顺序和取出的顺序是一致的。

  2. 元素可重复：List允许集合中有重复的元素，即同一个对象可以添加到List中多次。

  3. 索引访问：List提供基于索引的访问方式，可以通过索引（位置）快速访问集合中的元素。

  4. 典型实现：ArrayList和LinkedList是List接口的两个常用实现，前者基于动态数组，后者基于链表。

Set集合的特点：

  1. 无序性：Set集合中的元素是无序的，插入和取出的顺序可能不一致（注意：某些Set实现如LinkedHashSet是有序的）。

  2. 元素唯一性：Set不允许有重复的元素，集合中的每个元素都必须是唯一的。

  3. 无索引访问：Set不支持基于索引的访问，元素的访问必须通过迭代器等方式进行。

  4. 典型实现：HashSet、LinkedHashSet和TreeSet是Set接口的常用实现。HashSet是最常用的Set实现，基于哈希表；LinkedHashSet维持了元素的插入顺序；而TreeSet是基于红黑树实现，元素按照排序规则排列。

总的来说，List和Set的主要区别在于List允许重复的元素并且元素是有序的，而Set不允许重复元素且通常元素是无序的（除非使用特定的实现，如LinkedHashSet）。这些特性决定了它们适用于不同的编程场景。

65 自定义注解中，如果您为一个注解属性提供了默认值，那么这个属性变成可选的。

在Java自定义注解中，如果您为一个注解属性提供了默认值，比如String regexp() default "";，那么在使用该注解时，指定这个属性变成可选的。如果没有提供默认值（比如只声明String regexp();），那么在使用这个注解时就必须显式提供该属性的值，否则编译器会报错。

66 使用Pattern和Matcher与String.matches()整体匹配时的dui'b

是的，这两种写法基本上达到了相同的效果，都是用来检查字符串是否匹配给定的正则表达式，但它们在内部工作方式和性能上有些微的差异。

使用Pattern和Matcher（第一种写法）：

Pattern pattern = Pattern.compile(regStr);
Matcher matcher = pattern.matcher(strValue);
return matcher.find();

这种方法涉及到编译正则表达式为Pattern对象，然后使用这个对象来创建一个Matcher，最后使用matcher.find()来查找字符串中是否存在匹配正则表达式的子序列。这里有两点需要注意：

  1. matcher.find()在这个上下文中可能不是最佳选择，因为它用于查找输入字符串中的多个子序列，这可能会与整体匹配的意图相冲突。对于完全匹配的场景，matcher.matches()会是更加合适的方法，因为它要求整个区域都匹配正则表达式。

  2. 当您需要重复使用同一正则表达式时，使用Pattern的好处在于，正则表达式只编译一次，然后可以多次用于创建Matcher对象，这可以提高性能。

使用String.matches()（第二种写法）：

return value.toString().matches(regStr);

这种方法更简洁，它直接在字符串对象上调用matches()方法，并传入正则表达式字符串。如果字符串符合正则表达式定义的模式，则返回true。在内部，String.matches()实际上也是创建了Pattern和Matcher对象，但这个过程是隐藏的。这种写法每次调用时都会编译正则表达式，所以如果在一个循环或频繁调用的情况下使用这种方法，可能会比直接使用Pattern和Matcher对象的方式效率低下。

关于正则表达式"^[0-1]$"：

对于这个正则表达式，由于使用了开始^和结束$定界符，它确实要求整个字符串必须是0或1，这是一种整体匹配。

综上所述，如果你的意图是检查字符串是否完全匹配正则表达式（在这个例子中是只包含单个字符0或1），那么你应该在使用第一种写法时使用matcher.matches()而不是matcher.find()。而如果你选择简便的第二种写法，记住它适用于不需要频繁匹配的场景。

 

67 Vue的activated方法

Vue的activated方法是与keep-alive组件一起使用时特有的生命周期钩子。当一个被keep-alive缓存的组件被激活时，activated钩子就会被触发。这通常发生在以下两种情况下：

  1. 当组件第一次被缓存显示时，activated钩子在组件的mounted钩子之后被调用。

  2. 当缓存的组件再次被重新插入DOM时，activated钩子会被触发，但此时不会再次执行mounted钩子。

因此，activated钩子在组件的生命周期中大致的位置是在created之后，但在两种情况下有所不同：

  • 对于初次渲染，activated是在mounted之后被调用。

  • 对于由keep-alive缓存的组件，当它们重新被激活时，activated是在重新插入DOM后被调用，但不再经过mounted过程。

这意味着activated钩子适用于需要在组件每次激活时运行的任务，如拉取数据或重置状态。这与created和mounted钩子不同，这两个钩子只在组件实例被创建和初次插入DOM时分别被调用一次。

 

68 在 Vue 中，将某个方法抽取出来作为公共组件

 

原来的方法：

<script>
export default {
  methods: {
 // 获取树形菜单分类列表，带层级
    getCategories() {
      //这里的`$http`实际上就是axios,只是在main.js中起了一个别名
      this.$http({
        // 解读这里的url是获取后端分级菜单列表的url地址，即获取带层级的商品分类表`commodity_category`所有数据
        // url: 'http://localhost:9090/commodity/category/list/tree',

        // 请求的url
        // 就是 http://localhost:5050/api/commodity/category/list/tree
        url: this.$http.adornUrl('/commodity/category/list/tree'),
        method: 'get'
      }).then(({data}) => { //这里的{data} 是对象解构，解构了上面url请求后端返回来的数据，
        // responseData对象的data属性
        //输出
        // console.log("getCategories()方法中 .then(({data}) => {..) 返回的data= ", data);
        //返回需要展示的数据 data.data.data
        //如果使用{data}, 得到的要展示的数据使用 data.data 即可，因为解构了一层

        //将后端返回来的数据，绑定到数据池的data属性 注意绑定数据后，页面就会相应地变化！
        this.data = data.data;
      })
    },
    }
    }
</script>

 

进行抽取：

在 Vue 中，将某个方法抽取出来作为公共组件使用通常涉及以下几个步骤：

  1. 创建一个公共的 JavaScript 文件：创建一个新的 JS 文件用于存放公共方法。例如，你可以创建一个名为 categoryService.js 的文件，用于存放与分类相关的服务方法。

  2. 编写公共方法：在 categoryService.js 文件中，定义一个函数，例如 getCategories，并导出这个函数。确保这个方法返回一个 Promise，因为你可能需要进行异步操作（如 Axios 请求）。

  3. 在组件中导入和使用公共方法：在你的 Vue 组件中，导入 categoryService.js 文件，并在需要的地方调用 getCategories 方法。

下面是一个如何实现这一过程的例子：

1. 创建 categoryService.js 文件：

// categoryService.js
import axios from 'axios';

export const getCategories = () => {
  return axios({
    url: 'http://localhost:9090/commodity/category/list/tree',
    method: 'get'
  });
}

2. 在 Vue 组件中使用 getCategories 方法：

在你的 Vue 组件中，导入这个方法并在生命周期钩子或者其他逻辑中调用它：

<script>
import { getCategories } from './services/categoryService'; // 假设categoryService.js位于services文件夹

export default {
  data() {
    return {
      data: [], //树形菜单的数据
      // 其他数据...
    };
  },
  methods: {
    // 其他方法...

    fetchCategories() {
      getCategories().then(({ data }) => {
        this.data = data.data;
      }).catch(error => {
        console.error('获取分类列表失败', error);
        // 处理错误
      });
    }
  },
  created() {
    this.fetchCategories();
  }
};
</script>

在这个例子中，getCategories 函数被抽取到 categoryService.js 文件中，并在组件中通过 fetchCategories 方法使用。这种方式使得 getCategories 方法可以在多个组件中重用，减少代码冗余并提高可维护性。

 

69 判断字符串是否有内容的方法

 

方法1: StringUtils.hasText(search)

import org.springframework.util.StringUtils;
 
 //先创建QueryWrapper，可以将我们的检索条件封装到QueryWrapper对象
        QueryWrapper<Furn> queryWrapper = Wrappers.query();
        //判断search是否有内容
        if (StringUtils.hasText(search)){
            //queryWrapper.like("name",search);形参第一个位置"name" 是和数据库表的字段匹配 第二个位置是检索条件
            queryWrapper.like("name",search);
        }


        //如果带条件就按照条件进行分页，如果不带条件就是正常的分页查询
        Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize), queryWrapper);

 

方法2: StringUtils.isNotBlank(key)

import org.apache.commons.lang.StringUtils;

//判断key是否携带的有查询条件-希望是一组独立的检索条件(使用lambda表达式的形式即可)
//StringUtils.isNotBlank(key) 判断传入的 key 为非空或者不是全部为空格/空白字符
        if (StringUtils.isNotBlank(key)) {             
            // wrapper.and((obj) -> {
            wrapper.and(obj -> {
                obj.eq("id", key).or().like("name", key);
            });            

        }


在 Java 中，StringUtils.isNotBlank(CharSequence cs) 方法来自 Apache Commons Lang 库。这个方法用于检测传入的字符串 cs 是否不为空（""）、不为 null 且至少包含一个非空白（空格、换行、tab等）字符。

具体到 StringUtils.isNotBlank(key) 的使用场景：

  • 当 key 为 null 时，返回 false。

  • 当 key 是空字符串（""）时，返回 false。

  • 当 key 只包含空白字符（例如空格、tab、换行符等）时，返回 false。

  • 当 key 包含至少一个非空白字符时，返回 true。

因此，这个方法在处理用户输入或数据检索时非常有用，因为它可以帮助你忽略完全空白的字符串，这些字符串在许多情况下是无意义的，例如，在搜索查询中用户只输入了空格。

在你的代码中，StringUtils.isNotBlank(key) 用于确保 key 包含实际的搜索内容。如果 key 不为空且不只是空白字符，那么代码会进入 if 语句块，并构造一个查询条件，这个查询条件在数据库查询中会作为 WHERE 子句的一部分，根据 id 或 name 字段进行过滤。

 

70 page 方法是通过 MyBatis Plus 实现自动分页的核心方法

在 MyBatis Plus 中进行分页操作的那部分代码是这一行：

public class AttrgroupServiceImpl extends ServiceImpl<AttrgroupDao, AttrgroupEntity> implements AttrgroupService {

 @Override
    public PageUtils queryPage(Map<String, Object> params, Long categoryId) {

    IPage<AttrgroupEntity> page = this.page(
        new Query<AttrgroupEntity>().getPage(params),
        wrapper
    );
    ...

在这段代码中：

  1. this.page(...) 方法是 MyBatis Plus 提供的，用于执行分页查询。this 在这里指的是当前的服务类 AttrgroupServiceImpl 的实例，它继承自 ServiceImpl<AttrgroupDao, AttrgroupEntity>，而 ServiceImpl 类提供了 page 方法，用于执行分页查询。因此，这里的 this 实际上就是指当前的服务实例，它继承了 ServiceImpl 从而具有执行分页查询的能力。

  2. new Query<AttrgroupEntity>().getPage(params) 是创建一个分页查询条件，其中 Query 是一个工具类，它根据传入的参数 params（这些参数一般包括分页的信息，如当前页和每页大小等），构造出一个 IPage<AttrgroupEntity> 类型的对象，这个对象表示分页请求的信息。

  3. wrapper 是一个 QueryWrapper<AttrgroupEntity> 类的实例，它定义了查询的条件。如果 wrapper 没有指定任何条件，那么 page 方法将会返回所有记录的分页结果。

因此，this.page(...) 这行代码是执行分页操作的核心，它结合了分页信息和查询条件，进行数据库查询，并返回查询结果。这里的 page 方法是通过 MyBatis Plus 实现自动分页的核心方法，通过它可以非常方便地实现复杂的分页逻辑。

71 Long a = 0L, a.equals(0) 结果是多少？为什么

 

表达式 a.equals(0) 的结果是 false。

原因在于 a 是一个 Long 类型的对象，而 0 是一个 int 类型的值。在 Java 中，当你调用 equals 方法比较两个对象时，它们需要是相同的类型或者具有兼容的类型关系。

在这种情况下，0 被自动装箱成一个 Integer 对象（而不是 Long），因为字面量 0 默认是 int 类型的。因此，你实际上是在尝试使用 Long 类型的对象调用 equals 方法来比较一个 Integer 对象。由于 Long 和 Integer 是不同的类型，它们的 equals 方法会首先检查另一个对象是否也是相同的类型。在这种情况下，类型不匹配，所以结果是 false。

如果你想要比较它们的数值是否相等，你应该确保它们都是相同的类型，或者直接比较它们的基本类型值，例如：

long b = 0L; // 注意这里使用基本类型 long
boolean result = (a == b); // 将会是 true，因为这里比较的是数值

或者，如果你确实需要比较两个对象，并且你知道一个是 Long 而另一个是 Integer，你可以将它们都转换为相同的类型（例如都转换为 Long），或者比较它们的基本类型值：

Long b = 0L; // 使用 Long 类型
boolean result = a.equals(b); // 将会是 true

或者：

boolean result = a.longValue() == 0; // 将会是 true，因为比较的是基本类型的值

这样可以确保比较是公平的，并且是基于数值而非类型。

72 集合转数组：toArray()

Java 集合框架提供了一种将集合转换为数组的方法，toArray(). 这个方法有两种形式：

  1. 无参方法: Object[] arr = coll.toArray();

    • 这种形式返回的是 Object[] 类型的数组。如果你的集合 coll 包含不同类型的对象，或者你不需要特定类型的数组，这种方式是合适的。

  2. 有参方法: T[] arr = coll.toArray(new T[0]);

    • 这种形式允许你指定返回的数组的具体类型。例如，如果你想要一个 Long[] 类型的数组，你可以这样做:

      Long[] longArray = coll.toArray(new Long[0]);

    • 尽管这里使用的是长度为0的数组，但Java会根据集合的大小自动创建一个新的数组，这是一种常用的Java惯用法。这意味着，即使是 new Long[0]，实际返回的数组会有与 coll 集合相同数量的元素。

集合的反转：Collections.reverse(List)

Collections.reverse(List) 是一个用于反转 Java 中 List 集合元素顺序的方法。这个方法会直接在传入的 List 上进行操作，导致 List 中的元素顺序被反转，因此原始的 List 会被修改。

例如：

List<String> list = new ArrayList<>();
list.add("tom");
list.add("smith");
list.add("king");
list.add("milan");
list.add("tom");
Collections.reverse(list);
System.out.println("list=" + list); // 输出的 list 将会是原始顺序的反转

在这个例子中，list 中的元素顺序将会被改变。

总结

  1. toArray() 方法:

    • 用于将集合转换为数组，有两种形式：无参和有参。

    • 无参形式返回 Object[]，有参形式可以指定返回数组的类型，如 Long[]。

    • 即使指定的数组大小为0，Java会根据需要自动调整数组大小。

  2. Collections.reverse(List) 方法:

    • 用于反转 List 中的元素顺序。

    • 直接修改原始 List，改变其元素顺序。

在使用 toArray() 方法转换集合为特定类型数组时，通常使用 new T[0] 作为参数来避免类型转换问题，即使这个数组长度为0，方法依然有效。Collections.reverse(List) 提供了一种直接在原始列表上反转元素顺序的快捷方式。

73 在 Vue.js 中，组件的声明、引用、和命名遵循两种常用约定大驼峰式命名和短横线分隔命名

在 Vue.js 中，组件的声明、引用、和命名遵循两种常用约定：

  1. Kebab-case (短横线分隔命名):

    • 主要用于 HTML 模板中。

    • 示例：<add-or-update></add-or-update>

    • 推荐此格式避免 HTML 和 XHTML 兼容性问题，因为它们不区分大小写。

  2. PascalCase (大驼峰式命名):

    • 主要用于 JavaScript/TypeScript 文件中的导入及 JSX/TSX 中。

    • 示例：<AddOrUpdate></AddOrUpdate>

    • 在 Vue 的单文件组件 (SFC) 的模板中，也支持此格式。Vue 会正确识别并渲染对应的组件。

导入组件示例:

import AddOrUpdate from './AddOrUpdate.vue'

组件导出声明:

export default {
  components: {
    'add-or-update': AddOrUpdate
  }
}

总结: Vue 支持在模板中使用这两种命名方式。根据个人或团队的偏好选择使用。但官方文档推荐在 HTML 模板中使用 kebab-case 来维持一致性。

 

74 Vue 的级联选择器 el-cascader

 

项目中的代码 

 <!-- 引入Cascader级联选择器
      老师解读
      1. 在添加选择所属分类 ID 时，我们使用了 Cascader 级联选择器, 具体用法参考
        elementui-Cascader 级联选择器-基础用法
      2. v-model="cascadedCategoryId" : 是最终绑定的值,因为 el-cascader 关联的
        v-model 是一个数组，记录的是三级分类全部 id,即[第 1 级分类 id,第 2 级分类 id
        ,第 3 级分类 id], 比如[1,21,301]因此在数据池的 categoryId 是一个数组
      3. :options="categories" 表示级联显示的时候各个层的选值是从 categories 数组来的
      4. :props="props" 显示的选项值(value)/显示的标签(label)/子选项(children) 分别和
        返回的 category 的对象的哪个字段关联。简单地说就是
        props指定options数据源(categories)的哪些数据绑定到v-model(cascadedCategoryId)的数据中来
        props中的value属性，是每一级选中的项的 id 属性（也就是 props 中定义的 value 字段）。'1', '21', '301'
      5.v-model 则是存储用户选择的整个路径的标识值数组['1', '2', '3']
      -->
      <el-cascader
        v-model="cascadedCategoryId"
        :options="categories"
        :props="props"
        ></el-cascader>




export default {
    data () {
      return {
categories: [], // 商品分类列表，带层级的数据 作为级联选择器cascader的数据源
        cascadedCategoryId: [], // 级联选择器cascader v-model 的值  [1,21,301] 该数据从categories中获取

        /**
         * 当我们配置 el-cascader 的 props，我们实际上是告诉组件如何从 categories 数组中的每个对象里提取相应的数据(如对象的id属性)来显示和组织级联选择器的结构。
         * props中的value属性，是每一级选中的项的 id 属性（也就是 props 中定义的 value 字段）。'1', '21', '301'
         */
        props: { // 显示级联菜单的属性指定
          value: "id",
          label: "name",
          children: "childrenCategories"
        },

 

 

当你在 Vue 的级联选择器 el-cascader 中指定 props 的 value、label 和 children，这些是用来定义级联选择器如何从提供的数据源 :options="categories" 中读取具体的值：

  • value: "id"：表示级联选择器的值字段对应 categories 数组中每个对象的 id 属性。

  • label: "name"：表示级联选择器的显示文本对应 categories 数组中每个对象的 name 属性。

  • children: "childrenCategories"：表示级联选择器的子级列表对应 categories 数组中每个对象的 childrenCategories 属性，这是一个递归的关系，用于渲染多级结构。

这里的数组 categories 是一个多级（层级）结构的数组，每个元素可能包含子元素列表，这些子元素通过 childrenCategories 字段进行关联。因此，当你配置了 el-cascader 的 props 如上所示，el-cascader 就能理解如何从这样结构化的数据源中提取显示的标签、值以及子级列表。

实际上，el-cascader 需要的数据格式类似于以下结构：

[
  {
    id: 1,
    name: "电子产品",
    childrenCategories: [
      {
        id: 11,
        name: "手机",
        childrenCategories: [{ id: 111, name: "智能手机" }, { id: 112, name: "功能手机" }]
      },
      {
        id: 12,
        name: "电脑",
        childrenCategories: [{ id: 121, name: "笔记本电脑" }, { id: 122, name: "台式电脑" }]
      }
    ]
  },
  // 更多分类...
]

在这个例子中，每个对象的 id 和 name 直接映射到级联选择器的值和显示文本，而 childrenCategories 映射到子级列表。因此，尽管 categories 是一个数组，但每个元素通过指定的字段（id, name, childrenCategories）与级联选择器的结构相匹配，使得 el-cascader 能够理解并正确渲染数据。

 

 

是的，你的理解是正确的。在 el-cascader 组件的 props 配置中：

  • value: "id" 是告诉 el-cascader 组件，对于 options 中的每个条目（即 categories 数组中的每个对象），其值（value）是通过该对象的 id 属性来确定的。

  • label: "name" 则告诉 el-cascader 组件，对于 options 中的每个条目，其显示的文本是通过该对象的 name 属性来确定的。

  • children: "childrenCategories" 告诉 el-cascader 组件，对于 options 中的每个条目，其子选项是通过该对象的 childrenCategories 属性来确定的。

因此，value: "id" 并不是直接从 categories.id 获取值，而是在 categories 数组中的每个对象里查找名为 id 的属性来获取其值。这种方式使得 el-cascader 可以从具有嵌套结构的数据源中正确读取并展示数据。

当我们说“该对象”，我们指的是 categories 对象数组中的每一个独立对象。在 el-cascader 组件的 props 配置里：

  • value: "id" 指的是，对于 categories 数组中的每个对象，el-cascader 组件会使用该对象的 id 属性作为选项的值。

  • label: "name" 指的是，对于 categories 数组中的每个对象，el-cascader 组件会使用该对象的 name 属性作为显示给用户的标签。

  • children: "childrenCategories" 指的是，对于 categories 数组中的每个对象，el-cascader 组件会查找该对象的 childrenCategories 属性，用作该选项的子级菜单。

因此，当我们配置 el-cascader 的 props，我们实际上是告诉组件如何从 categories 数组中的每个对象里提取相应的数据来显示和组织级联选择器的结构。

 

在 el-cascader 组件的 props 中的 value 属性并不直接绑定到 v-model 的值。实际上，v-model 在 el-cascader 中绑定的是用户选择的路径数组，也就是说，它反映了用户从级联选择器中选择的每一级的 value 属性的值。

举个例子，如果你的级联选择器数据（即 categories）如下所示：

[
  {
    id: '1',
    name: '电子产品',
    childrenCategories: [
      {
        id: '2',
        name: '手机',
        childrenCategories: [
          { id: '3', name: '智能手机' },
          { id: '4', name: '功能手机' }
        ]
      }
    ]
  },
  // 其他顶级分类...
]

并且用户在级联选择器中选择了“电子产品 > 手机 > 智能手机”，那么：

  • v-model 绑定的数组将会是 ['1', '2', '3']。

  • 这里的 '1', '2', '3' 就是从每一级选中的项的 id 属性（也就是 props 中定义的 value 字段）。

所以，props 中的 value 定义的是如何从每个选项对象中获取该选项的标识值（比如 id），而 v-model 则是存储用户选择的整个路径的标识值数组。

 

75 @JsonInclude(JsonInclude.Include.NON_EMPTY)注解的作用

@JsonInclude(JsonInclude.Include.NON_EMPTY) 是一个来自 Jackson 库的注解，用在 Java 对象的属性上。在这个上下文中，它被应用到 childrenCategories 属性上。

这个注解的作用是在将 Java 对象序列化为 JSON 时，对该属性的处理进行特定的设定。具体来说，JsonInclude.Include.NON_EMPTY 参数指定如果 childrenCategories 属性是空（空集合或空数组），则在生成的 JSON 中不包含这个属性。

这意味着，如果 childrenCategories 是一个空列表（没有子类别），那么在序列化包含这个属性的对象时，childrenCategories 字段将被省略，不会出现在结果 JSON 字符串中。这样做可以减少 JSON 的大小，使输出更加简洁。

 

76 Vue中在父组件直接调用子组件方法池中的方法

在 Vue.js 中，父组件可以直接调用子组件中定义的方法。这通常通过使用 ref attribute 来引用子组件，然后在父组件的 JavaScript 代码中通过 this.$refs 访问这些子组件，最后调用其方法。以下是一个详细的说明和示例：

1. 定义子组件

首先，定义一个子组件，并在其 <script> 部分中声明一些方法。例如，创建一个名为 ChildComponent.vue 的文件，内容如下：

<template>
  <div>子组件内容</div>
</template>

<script>
export default {
  methods: {
    // 定义一个名为 'showMessage' 的方法
    showMessage() {
      alert("这是子组件的方法被调用");
    }
  }
}
</script>

2. 使用子组件并定义引用

在父组件中使用子组件，并通过 ref 属性为其定义一个引用名称。这样可以在父组件中通过 this.$refs 访问该子组件。例如：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <!-- 使用子组件，并赋予 ref -->
    <ChildComponent ref="childRef" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 使用 this.$nextTick 确保 DOM 更新完成后调用子组件方法
      this.$nextTick(() => {
        this.$refs.childRef.showMessage();
      });
    }
  }
}
</script>

3. 调用子组件方法

在父组件中，你可以通过 this.$refs.childRef 访问子组件实例，并调用其方法，例如 showMessage。使用 this.$nextTick() 可以确保所有的 DOM 更新已经完成，这对于在 DOM 更新后立即执行依赖于 DOM 的操作特别重要。

在 Vue.js 中，this.$refs 用于访问组件实例中定义的引用(refs)。当你需要在父组件中直接调用子组件的方法时，可以通过 ref 属性来标识子组件，并使用 this.$refs 加上对应的引用名来访问这个子组件实例。以下是具体的示例和说明：

子组件定义

假设你有一个子组件 ChildComponent.vue，它定义了一个方法 showMessage：

<template>
  <div>子组件内容</div>
</template>

<script>
export default {
  methods: {
    showMessage() {
      alert("子组件的方法被调用");
    }
  }
}
</script>

父组件使用子组件

在父组件中，你将使用 ChildComponent 并给它一个 ref 属性：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childRef" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 直接调用子组件的方法
      this.$refs.childRef.showMessage();
    }
  }
}
</script>

在上面的父组件示例中，<ChildComponent ref="childRef" /> 表明了子组件 ChildComponent 的实例可以通过 this.$refs.childRef 访问。然后，在父组件的 callChildMethod 方法中，我们直接调用了子组件的 showMessage 方法。

使用 this.$nextTick()

在某些情况下，你可能需要确保所有的 DOM 更新都已完成后再调用子组件的方法。这通常在你刚刚更改了数据，而这些数据的更改会影响 DOM 结构时发生。在这种情况下，可以使用 this.$nextTick()：

methods: {
  callChildMethod() {
    this.someData = 'New Data'; // 假设这会影响子组件的DOM
    this.$nextTick(() => {
      // 现在DOM已经更新完成
      this.$refs.childRef.showMessage();
    });
  }
}

在这个修改后的 callChildMethod 方法中，我们首先更改了一些数据（这会影响 DOM）。然后我们使用 this.$nextTick() 来确保我们调用子组件的 showMessage 方法是在 Vue 更新 DOM 之后。这样，如果 showMessage 方法依赖于最新的 DOM 结构或数据，它可以得到正确执行。

通过上述方法，父组件可以在合适的时机安全地调用子组件的方法，而无需担心 DOM 更新的同步问题。

总结

  • 使用 ref 属性给子组件一个引用名，在父组件中通过 this.$refs.refName 访问子组件实例。

  • 在子组件中定义方法，在父组件中可以通过引用名调用这些方法。

  • 使用 this.$nextTick() 确保在 DOM 更新完成后执行方法调用，尤其是当方法依赖于最新的 DOM 结构时。

通过上述步骤，父组件可以方便地直接调用子组件的方法，实现组件间的交互和数据传递。这种模式在 Vue.js 中是常见的，它利用了 Vue.js 的反应性系统和组件化架构，使得组件间的通信更加直接和高效。

77 Vue <el-popover>的slot="reference"

 

<el-popover placement="right-end" v-model="popCatelogSelectVisible">
        <!-- <category-cascader :catelogPath.sync="catelogPath"></category-cascader>-->
        <!-- 这里我们加入分类的 Cascader 级联选择器, 前面我们使用过 -->
        <el-cascader
          v-model="cascadedCategoryId"
          :options="categories"
          :props="props"></el-cascader>

        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="addBrandCategoryRelation"> 确定</el-button>
        </div>
		<!--当点击`新增关联`按钮时显示el-popover组件中定义的el-cascader 和 div-el-button中的内容 -->
        <el-button slot="reference">新增关联</el-button>
      </el-popover>

image-20240321200929094

在 Vue.js 和 Element UI 的组合中，slot="reference" 是在 <el-popover> 组件中使用的一个特殊属性，用于定义触发该弹出框的元素。当你在 <el-popover> 标签内部使用 <el-button slot="reference">新增关联</el-button>，你实际上是在指定这个按钮作为弹出框的触发元素。

这里的 "reference" 插槽（slot）起到了“引用”的作用，即它引用或标记了一个元素（在你的例子中是一个按钮），当该元素被点击时，与之关联的 <el-popover> 将会显示出来。

为什么点击“新增关联”按钮就显示 <el-popover> 中的内容？

这是因为 <el-popover> 设计之初就是为了提供一个弹出框的功能，该弹出框可以包含任意的HTML内容或Vue组件。当 <el-popover> 的 v-model 或 visible 属性为真（即弹出框应当显示时），弹出框就会出现在页面上。

在你的例子中，当你点击“新增关联”按钮时，由于这个按钮通过 slot="reference" 被指定为 <el-popover> 的触发元素，Element UI 的内部逻辑会自动将 <el-popover> 的 visible 属性设置为 true，因此弹出框显示出来。

此机制使得开发者可以方便地创建各种交互式弹出框，而无需手动控制它们的显示和隐藏。这也是为什么你只需点击按钮，弹出框就能自动显示出来的原因。

78 前端携带的json数据的属性名必须和后端JavaBean中的属性名一样吗？是的。@JsonProperty 注解来解决前后端属性名不匹配的问题。

在前后端分离的应用中，确保前端携带的JSON数据属性名与后端JavaBean中的属性名一致是非常重要的。这样做可以确保后端正确解析前端发送的数据，并映射到相应的实体类属性上。如果属性名不一致，后端将无法正确识别前端发送的数据字段，导致数据无法正确存储或处理。

在Spring框架中，可以使用 @JsonProperty 注解来解决前后端属性名不匹配的问题。这个注解可以在JavaBean的属性上使用，来指定一个JSON属性的名称，这样即使JavaBean的属性名称和JSON中的不一样，Spring也能够通过这个注解正确映射前后端的数据。

例如，如果前端发送的JSON中有一个字段叫 brand_id，而后端的JavaBean中属性名称为 brandId，你可以在JavaBean中这样使用 @JsonProperty 注解：

import com.fasterxml.jackson.annotation.JsonProperty;

@Data
public class CategoryBrandRelationEntity implements Serializable {
    // 其他属性省略...

    @JsonProperty("brand_id") // 映射JSON中的brand_id到此属性
    private Long brandId;
    
    // 其他属性省略...
}

使用这种方法，即使前后端的属性名称不匹配，也可以确保数据能够正确映射和处理。记得在你的实体类上加入相应的注解，以匹配前端发送的数据结构。

正常情况下,即没有使用映射注解时，必须遵守前后端属性名一致对吗？

是的，如果没有使用映射注解如@JsonProperty，那么通常情况下，前后端交互时传输的JSON数据中的属性名需要和后端JavaBean中的属性名保持一致。这是因为大多数现代框架（如Spring框架中的Jackson库）在进行数据绑定时，会自动将JSON字段与JavaBean的属性进行匹配。如果属性名不一致，框架可能无法正确地绑定数据，导致数据传输失败或错误。

在没有特别指定字段映射的情况下，确保前后端数据协议一致性是很重要的一部分，这涉及到接口文档的准确性和前后端开发人员之间的沟通。保持属性名一致有助于减少误解，使代码更加清晰易读，并且简化数据处理流程。

79 前端向后端发送请求 有两种携带参数的方式1直接在请求的URL中添加查询参数2使用axios（或其他HTTP库）的params属性

 

    getCategoryBrandRelation(){
      this.$http({
        // url: this.$http.adornUrl(`/commodity/categorybrandrelation/brand/list?brandId=${this.brandId}`),

        // 下面这段代码会将 brandId 添加到请求的查询字符串中，这与直接在URL中指定查询参数是等效的。在实际发送请求时，这些参数会附加到URL之后，形式也是 /brand/list?brandId=1。
        // 下面这个请求的请求头为:
        // GET /api/commodity/categorybrandrelation/brand/list?t=1711129443854&brandId=1 HTTP/1.1
        url: this.$http.adornUrl(`/commodity/categorybrandrelation/brand/list`),
        method: 'get',
        //携带的参数
        params: this.$http.adornParams({
          brandId: this.brandId
        })
      }).then(({data}) => {
        // 测试得到的数据
        console.log("data=> ",data)
      })

    },

 

 

在你提供的代码中，前端发送请求的部分有两种携带参数的方式，但实际上只需要一种即可。

后端部分，由于使用了 @RequestParam("brandId") Long brandId 来接收参数，这意味着后端期望从请求的查询参数中获取 brandId 的值。这是Spring MVC处理HTTP请求中查询参数的标准方式。

前端发送请求时，你确实可以直接在URL中添加查询参数，如 /commodity/categorybrandrelation/brand/list?brandId=${this.brandId}。这种方式是符合HTTP标准的，并且与你后端的处理方法相匹配，后端可以通过 @RequestParam 正确接收到这个参数。

同时，你的代码中也展示了另一种携带参数的方法，即使用 params 属性：

params: this.$http.adornParams({
    brandId: this.brandId
})

这段代码会将 brandId 添加到请求的查询字符串中，这与直接在URL中指定查询参数是等效的。在实际发送请求时，这些参数会附加到URL之后，形式也是 /brand/list?brandId=1。

因此，两种方式都可以让后端正确接收到 brandId 参数。但在一个请求中同时使用这两种方式是不必要的，可能会导致代码混乱或理解困难。通常，你只需选择其中一种方式即可。如果你通过URL模板设置了参数，就不需要再在 params 里设置；反之亦然。

总结来说，你的后端代码设置是可以正常接收前端通过查询参数发送的 brandId 的，无论是直接在URL中附加，还是通过请求的 params 属性设置。但为了保持代码的清晰和一致性，建议只选择一种方式进行参数传递。

/**
 * 使用 getCategoryBrandRelation 方法从后端API获取特定品牌和分类的关联记录。
 * 这个方法会发送一个GET请求到后端，请求的URL包含一个查询参数 brandId。
 * 
 * 后端的categoryBrandListByBrandId方法使用@RequestParam注解来接收brandId参数，
 * 这意味着它期望从请求的查询字符串中获取brandId的值。因此，前端需要在请求中提供这个参数。
 * 
 * 在JavaScript中，有两种方式向后端传递brandId参数：
 * 1. 直接在请求的URL中添加查询参数，如 /commodity/categorybrandrelation/brand/list?brandId=${this.brandId}
 *    这种方法直观且符合HTTP请求的标准格式。
 * 
 * 2. 使用axios（或其他HTTP库）的params属性，如：
 *    params: this.$http.adornParams({ brandId: this.brandId })
 *    这会将参数添加到查询字符串中，与直接写在URL中的效果相同。
 * 
 * 注意：虽然两种方法都可以将参数正确传递到后端，但在同一个请求中同时使用这两种方式是不必要的。
 * 建议选择其中一种方式来保持代码的一致性和清晰性。
 * 
 * 示例代码发送GET请求，携带brandId参数，获取与该品牌关联的分类记录：
 * 
 * this.$http({
 *   url: this.$http.adornUrl(`/commodity/categorybrandrelation/brand/list?brandId=${this.brandId}`),
 *   method: 'get',
 *   // 选择以下一种方式携带参数：
 *   // 方式1: 在URL中直接附加参数
 *   // 或
 *   // 方式2: 使用params属性
 *   params: this.$http.adornParams({ brandId: this.brandId })
 * }).then(({data}) => {
 *   console.log("data=> ", data); // 在控制台输出获取到的数据
 * });
 * 
 * 请根据实际情况选择合适的参数传递方式。
 */

 

80 后端使用 @RequestBody Long[] ids 接收数据，前端也需要使用数组传递数据！

 

 

    // 增加方法，响应删除 品牌和分类关联的处理
    deleteCateRelationHandle(id) {

      // 获取删除的分类 id ,这里之所以将id放到数组中，是因为后端是通过数组进行接收数据的
      // 当你使用 @RequestBody 注解时，Spring会期待接收的是一个完整的请求体，这通常意味着你需要在前端发送一个JSON格式的请求体。在这个例子中，前端应该发送一个如 [1, 2, 3] 的JSON数组，每个元素都是一个要删除的资源的ID。
      // 如果你尝试直接发送单个ID（不是数组），如直接发送数字 1，后端会尝试将这个单个值映射到一个 Long[] 类型，这会导致类型不匹配的错误，因为后端期待的是一个数组而不是单个数字。
      // 因此，在前端调用这个API时，即使你只需要删除一个条目，也应该将这个ID放入一个数组中，如 [1]，然后发送这个数组作为请求体。这样做符合后端期待的数据格式，可以确保后端正确处理请求。
      var ids = id
      // var ids = [id]

      this.$http({
        url: this.$http.adornUrl(`/commodity/categorybrandrelation/delete`),
        method: 'get',
        //携带的参数
        params: this.$http.adornParams({
          id: ids
        })
      }).then(({data}) => {
        // 测试得到的数据
        // console.log("data=> ",data)

        // 刷新 品牌-分类 表格数据
        this.getCategoryBrandRelation()

      })
    },

 

/**
     * 删除 注意这里前端需要放到数组中再传过来！！
     * 当你使用 @RequestBody 注解时，Spring会期待接收的是一个完整的请求体，这通常意味着你需要在前端发送一个JSON格式的请求体。在这个例子中，前端应该发送一个如 [1, 2, 3] 的JSON数组，每个元素都是一个要删除的资源的ID。
     *
     * 如果你尝试直接发送单个ID（不是数组），如直接发送数字 1，后端会尝试将这个单个值映射到一个 Long[] 类型，这会导致类型不匹配的错误，因为后端期待的是一个数组而不是单个数字。
     *
     * 因此，在前端调用这个API时，即使你只需要删除一个条目，也应该将这个ID放入一个数组中，如 [1]，然后发送这个数组作为请求体。这样做符合后端期待的数据格式，可以确保后端正确处理请求。
     */
    @RequestMapping("/delete")
    // @RequiresPermissions("commodity:categorybrandrelation:delete")
    public R delete(@RequestBody Long[] ids) {
        categoryBrandRelationService.removeByIds(Arrays.asList(ids));

        return R.ok();
    }

 

 

在你的后端代码中，delete 方法使用了 @RequestBody 注解来接收请求体中的数据。这里，方法期望接收一个 Long[] 类型的数组。这意味着前端需要发送一个包含一个或多个长整型（Long）ID的数组作为请求体。

当你使用 @RequestBody 注解时，Spring会期待接收的是一个完整的请求体，这通常意味着你需要在前端发送一个JSON格式的请求体。在这个例子中，前端应该发送一个如 [1, 2, 3] 的JSON数组，每个元素都是一个要删除的资源的ID。

如果你尝试直接发送单个ID（不是数组），如直接发送数字 1，后端会尝试将这个单个值映射到一个 Long[] 类型，这会导致类型不匹配的错误，因为后端期待的是一个数组而不是单个数字。

因此，在前端调用这个API时，即使你只需要删除一个条目，也应该将这个ID放入一个数组中，如 [1]，然后发送这个数组作为请求体。这样做符合后端期待的数据格式，可以确保后端正确处理请求。

例如，如果你使用axios发送请求，你可以这样构造请求体：

axios.post('/api/delete', [1, 2, 3]) // 假设你想删除ID为1, 2, 3的条目
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

即使你只有一个ID要删除，也需要将它放入数组中：

axios.post('/api/delete', [1]) // 假设你只想删除ID为1的条目
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

这样的前端请求与后端的期望相匹配，能够确保后端正确地处理删除请求。

 

81 URL中添加查询参数的两种形式

当然，下面我将对直接在URL中添加查询参数和使用请求库（如axios）的params属性进行对比，以便更清晰地理解两者之间的相似性：

1. 直接在URL中添加查询参数：

这种方法是手动将查询参数直接附加到URL的末尾。这通常用于HTTP GET请求，其中查询参数明确地显示在URL中。

  • 示例:

    // 使用JavaScript的fetch方法
    fetch('/api/items?categoryId=1&status=active')

    或者在浏览器地址栏直接访问:

    http://example.com/api/items?categoryId=1&status=active

在这个示例中，查询参数categoryId和status直接附加在URL后面。使用这种方法，你需要手动确保参数正确编码以避免URL解析错误。

2. 使用请求库（如axios）的params属性：

这种方法利用了JavaScript HTTP客户端库（如axios）的功能，这些库提供了构建查询字符串的内置方法。使用库的params属性时，你可以以对象的形式提供查询参数，库会自动处理参数的编码和附加到URL。

  • 示例:

    // 使用axios发送GET请求
    axios.get('/api/items', {
        params: {
            categoryId: 1,
            status: 'active'
        }
    })

在这个示例中，categoryId和status被放在一个对象中，并传递给axios的params属性。axios自动将这些参数转换成与直接在URL中手动添加相同的查询字符串，并附加到请求的URL上。你不需要手动编码参数，axios会为你处理这些。

总结：

两种方式的目的都是为了在发起HTTP请求时传递查询参数。它们的主要区别在于：

  • 直接在URL中添加查询参数：需要手动构造整个URL，包括参数的编码。

  • 使用请求库的params属性：参数以键值对形式提供，请求库负责编码和构造完整的URL。

两种方法最终效果相同，都会发送包含查询参数的请求到服务器。选择哪一种方法主要取决于个人偏好以及是否想要利用HTTP库自动处理参数编码和构造的便利性。

82 在请求体中传递参数的形式

在请求体中发送数据：

  • 形式：数据不在URL中，而是放在请求的body中，通常为JSON格式。

  • 示例：使用POST方法，axios.post('/api/items/delete', { ids: [1, 2, 3] })

  • 使用场景：适用于POST、PUT、DELETE等HTTP方法，用于发送数据到服务器，如提交表单数据、上传文件或发送大量数据。

  • 特点：可以发送大量或敏感数据，数据不在URL中，更加安全，不受URL长度限制。

通过请求体发送数据，通常用于POST和PUT请求，适合发送大量数据或包含敏感信息的数据。

 

 

请求体（Request Body）通常用于发送较大量的数据或包含敏感信息的数据到服务器，尤其是在使用POST、PUT等HTTP方法时。以下是一些常见的使用请求体发送请求参数的示例：

1 使用原生JavaScript的fetch方法发送POST请求：

fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'John Doe',
        email: 'johndoe@example.com',
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

这里，body属性用于发送JSON格式的数据。数据需要先被转换为JSON字符串，然后在请求体中发送。

2 使用Axios发送POST请求：

axios.post('/api/users', {
    name: 'Jane Doe',
    email: 'janedoe@example.com',
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

在Axios中，我们直接传递一个对象给axios.post的第二个参数，Axios会自动将其转换为JSON格式，并设置适当的Content-Type头。

3 使用Axios发送PUT请求：

axios.put('/api/users/1', {
    name: 'Jane Smith',
    email: 'janesmith@example.com',
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

PUT请求通常用于更新资源。在这个例例子中，我们尝试更新ID为1的用户的信息。

4 使用jQuery发送POST请求：

$.ajax({
    url: '/api/users',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
        name: 'Mark Twain',
        email: 'marktwain@example.com',
    }),
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error('Error:', error);
    }
});

在这个示例中，使用jQuery的$.ajax方法发送POST请求，并明确设置contentType为application/json，表明发送的数据类型为JSON。同时，数据也需要被转换成JSON字符串格式。

这些示例展示了在不同前端环境中如何使用请求体发送数据。无论使用哪个库或方法，核心概念都是将需要发送的数据放置在请求体（request body）中，并在需要时设置正确的内容类型（Content-Type），如application/json。

 

83 vue 中 的 watch: { cascadedCategoryId(path) { // 监控到数据池中 cascadedCategoryId 的变化 console.log("路径=", path); } watch是监控的数据池里的变量cascadedCategoryId 吗？如何监控到的？通过方法名？

在 Vue 中，watch 用于观察 Vue 实例上的数据变化，然后运行一些特定的代码响应这些变化。在你提供的代码片段中，watch 监听的是 cascadedCategoryId 这个属性。

当你在 watch 里定义了一个与 Vue 实例（或组件实例）的数据属性同名的函数（在这个例子中是 cascadedCategoryId），Vue 会自动监视这个指定的数据属性。一旦这个属性的值发生变化，Vue 就会调用对应的函数。

这里是如何工作的：

  1. cascadedCategoryId 应该是定义在 Vue 实例的 data 返回的对象中，或者是一个计算属性。

  2. 在 watch 对象内，你定义了一个和 data 中的 cascadedCategoryId 同名的方法。这意味着，每当 cascadedCategoryId 的值有变化时，Vue 会自动调用这个方法。

  3. 在这个方法内部，你可以获取到新的值（在这里通过参数 path 接收）。这个参数表示变化后的新值。你可以在这个方法内做一些响应数据变化的操作，比如，打印新的值，调用 API，更新其他数据等。

  4. console.log("路径=", path); 这行代码会在 cascadedCategoryId 每次更新时执行，并且打印出它的新值。

注意：如果你要监视的是一个对象或数组，Vue 无法检测到对象属性的添加或删除。因此，如果 cascadedCategoryId 是一个对象或数组，且你想要检测到里面属性的变动，那么你可能需要在 watch 选项中进行深度监听（通过设置 deep: true），或者使用 Vue.set 方法来更新对象或数组。

简单来说，是的，通过 watch 对象里的方法名来匹配需要监视的数据属性，一旦匹配的属性值发生变化，对应的方法就会被执行。

84 如果你要监视的是一个对象或数组，Vue 无法检测到对象属性的添加或删除。 但是如果只是数据更新也是可以监控到的对吗？console.log("路径=", path); 这行代码会在 cascadedCategoryId 每次更新时执行，并且打印出它的新值。依然生效

是的，你的理解是正确的。Vue 可以检测到对象或数组中已存在属性的变化，比如修改一个数组的某一项或更改对象的某一个属性的值。但是，Vue 默认情况下无法检测到对象新添加的属性或从对象中删除的属性，以及直接通过索引添加或删除数组项（如 arr[0] = 'newItem' 或 delete arr[0]）。

如果你有一个如下的对象：

data() {
  return {
    cascadedCategoryId: {
      id: 1,
      name: 'Category 1'
    }
  }
}

并且你使用 watch 来监视 cascadedCategoryId：

watch: {
  'cascadedCategoryId': {
    handler(newVal, oldVal) {
      console.log('新路径=', newVal);
    },
    deep: true
  }
}

在这种情况下，如果你更改了 cascadedCategoryId.id 或 cascadedCategoryId.name 的值，Vue 会检测到这些变化，因为它们是对象上已存在的属性。所以，每当 cascadedCategoryId 的 id 或 name 属性更新时，上面的监视器都会执行，并且打印出新的 cascadedCategoryId 对象。

但是，如果你给 cascadedCategoryId 添加了一个全新的属性，比如通过执行 this.cascadedCategoryId.newProp = 'New Property'，默认情况下这个变化是不会被 watch 检测到的。如果你需要监视整个对象包括其新增属性，你应该在 watch 中设置 deep: true 来进行深度监听。不过，请注意，深度监听会稍微消耗更多的性能，因为它需要递归遍历所有属性。

在实践中，对于数组，如果你使用 Vue 的方法如 push(), pop(), shift(), unshift() 或 splice()，Vue 可以检测到这些变更。对于对象，如果需要添加新属性并使之响应式，应使用 Vue.set(this.cascadedCategoryId, 'newProp', 'New Property') 来代替直接赋值。

 

85 <el-select> 的前端校验 触发方式是trigger: 'change'

是的，你的观察是对的。在 Vue 中，trigger: 'blur' 触发方式意味着校验将在输入框失去焦点时触发。对于 <el-select> 组件，用户选择一个选项通常不会导致元素失去焦点，因此 blur 事件并不会触发校验。这就是为什么你在选择了一个选项后，错误提示没有消失的原因。

为了修复这个问题，你可以将校验触发条件从 blur 改为 change，这样每次选项改变时就会触发校验。这对于下拉选择框（如 <el-select>）是更加合适的触发方式。修改后的代码如下：

dataRule: {
  // ... 其他校验规则
  attrType: [
    { required: true, message: '属性类型[0-销售属性，1-基本属性]不能为空', trigger: 'change' }
  ],
  // ... 其他校验规则
}

通过这样修改，每当用户改变 <el-select> 组件的值时，都会立即触发校验，从而可以及时清除或显示错误消息。确保对所有适用的表单元素（比如其他的 <el-select>）应用这种改变，这样可以保持表单校验的一致性和及时性。

是的，将校验规则的 trigger 设置为 'blur,change' 是可以的。这样做会让校验在两种情况下触发：当用户离开（即“失去焦点”）该输入字段时，以及当用户更改选项时。这可以为你提供更灵活的校验方式，确保无论用户是如何与表单交互，校验都能被触发。

修改后的校验规则会像这样：

dataRule: {
  // ... 其他校验规则
  attrType: [
    { required: true, message: '属性类型[0-销售属性，1-基本属性]不能为空', trigger: 'blur,change' }
  ],
  // ... 其他校验规则
}

这样设置后，无论用户是在选项上选择后立即移开（触发 change），还是在没有更改选择的情况下移开（触发 blur），校验都将被执行。这确保了表单在用户与之交互时能够正确地反馈校验结果。

 

86 this.$refs['dataForm'].resetFields() 会重置表单在数据池中的数据

如果一个表单项有初始值，并且通过 v-model 与 dataForm 中的某个属性绑定，那么调用 resetFields() 方法时，这个表单项将会被重置到它的初始值。

注意:使用 this.$refs['formRef'].resetFields() 方法可以重置表单，但仅限于已通过 prop 属性绑定的字段。 如果没有通过 prop 属性绑定dataForm中的属性，则该dataForm中的对应属性不会重置为初始值！

问题背景

在使用 Element UI 的 Vue 应用中，你遇到了一个表单重置的问题。表单包含多个字段，其中包括“所属分类”（categoryId）和“所属分组”（attrGroupId）。在实现表单的新增功能时，希望通过点击“新增”按钮后，能够重置表单中的所有字段到初始状态。

发现的问题

  1. 当点击“新增”按钮以打开一个新的表单对话框时，预期是所有表单字段都重置为其初始值。

  2. 实际上，“所属分类”字段能够正确重置，但“所属分组”字段却没有按预期重置。

问题原因

  1. 在 Element UI 中，<el-form-item> 的 prop 属性是用来定义表单项的验证规则和将表单项绑定到数据模型的键。如果一个表单项没有指定 prop 属性，那么在调用 resetFields() 方法时，它不会被重置到初始值。

  2. 在你的代码中，最初“所属分组”(attrGroupId) 的 <el-form-item> 没有设置 prop 属性，因此，即使调用了 resetFields() 方法，这个字段也没有被重置。

解决方案

为“所属分组”字段的 <el-form-item> 添加 prop="attrGroupId" 属性：

<el-form-item label="所属分组" prop="attrGroupId">
  <el-select ref="groupSelect" v-model="dataForm.attrGroupId" placeholder="请选择">
    <el-option
      v-for="item in attrGroups"
      :key="item.id"
      :label="item.name"
      :value="item.id"></el-option>
  </el-select>
</el-form-item>

通过这样的改变，attrGroupId 字段被纳入表单的管理范围内。现在，每次调用 this.$refs['dataForm'].resetFields() 时，attrGroupId 也会被重置为其在 dataForm 中的初始值。

总结

  1. 在使用 Element UI 构建表单时，确保为每个需要验证和重置的表单项设置正确的 prop 属性。

  2. prop 属性值应与绑定的数据模型中的键相匹配。

  3. 使用 this.$refs['formRef'].resetFields() 方法可以重置表单，但仅限于已通过 prop 属性绑定的字段。

  4. 正确设置 prop 属性不仅有助于表单重置，还有助于表单验证和数据绑定的正确执行。

87 Element UI 的 <el-select> 组件进行表单校验使用trigger: 'change'

 

<el-form-item label="属性类型[0-销售属性，1-基本属性]" prop="attrType">
        <!--      <el-input v-model="dataForm.attrType" placeholder="属性类型[0-销售属性，1-基本属性]"></el-input>-->

        <!--将属性 el-input输入框类型 改成 el-select 控件-->
        <!--        <el-form-item label="属性类型" prop="attrType">-->
        <!-- <el-input v-model="dataForm.attrType" placeholder="属性类型[0-销售属性，
        1-基本属性，2-既是销售属性又是基本属性]"></el-input>-->
        <el-select v-model="dataForm.attrType" placeholder="请选择">
          <el-option
            label="基本属性"
            :value="1">
          </el-option>
          <el-option
            label="销售属性"
            :value="0">
          </el-option>
        </el-select>
        <!--        </el-form-item>-->

      </el-form-item>
      
      
dataRule: {
       
        attrType: [
        
          // {required: true, message: '属性类型[0-销售属性，1-基本属性]不能为空', trigger: 'blur,change'} 这个不行
          
          
          {required: true, message: '属性类型[0-销售属性，1-基本属性]不能为空', trigger: 'change'} 这个行
        ],

 

问题概述：

你在使用 Element UI 的 <el-select> 组件进行表单校验时遇到了一个问题。即使你的代码看起来没有错误，<el-select> 组件的动态校验却不如预期工作。这表现为当用户改变选择时，表单校验没有正确触发。

问题原因：

  1. 触发事件不匹配：在 Element UI 中，不同的表单控件可能需要不同的事件来正确触发校验。对于 <el-select> 组件，由于它不像输入框那样具有 blur（失去焦点）事件，仅依靠 blur 事件来触发校验可能不足以覆盖所有用户交互情况。

  2. 校验规则设置：原始设置中校验规则的 trigger 属性被设置为 'blur,change'，意图是在元素失去焦点或内容改变时进行校验。但对于下拉选择组件来说，blur 事件并不总是在用户做出选择后立即触发，这可能导致校验反应不及时或不触发。

解决方案：

将校验规则的 trigger 属性从 'blur,change' 修改为仅 'change'。这样可以确保每次用户更改 <el-select> 的选项时都会触发校验，从而确保表单状态正确更新。

实施步骤：

  1. 更新校验规则：

    dataRule: {
      attrType: [
        { required: true, message: '属性类型[0-销售属性，1-基本属性]不能为空', trigger: 'change' }
      ],
      // 其他校验规则...
    }

  2. 确保 <el-select> 组件绑定了正确的 v-model 并在选项更改时更新。

总结：

在使用 Element UI 进行表单校验时，了解不同控件的事件和行为是非常重要的。特别是，校验触发器 trigger 应根据实际的控件类型和预期的用户交互来选择。对于下拉选择框 <el-select>，使用 'change' 作为校验触发器通常比使用 'blur' 更为有效，因为它能够确保用户每次选择都会触发校验，从而保持表单状态的准确和及时更新。

88 sql语句`DELETE FROM your_table_name WHERE (condition1_A AND condition1_B) OR (condition2_A AND condition2_B) OR (condition3_A AND condition3_B); `

SQL 语句 DELETE FROM your_table_name WHERE (condition1_A AND condition1_B) OR (condition2_A AND condition2_B) OR (condition3_A AND condition3_B); 的执行效果确实相当于以下三个 DELETE 语句的联合效果，但是它们是在一个单一的操作中完成的：

  1. DELETE FROM your_table_name WHERE condition1_A AND condition1_B;

  2. DELETE FROM your_table_name WHERE condition2_A AND condition2_B;

  3. DELETE FROM your_table_name WHERE condition3_A AND condition3_B;

但这里有重要的区别：

  • 当使用 OR 将条件组合在一起时，数据库会在单次查询中查看每条记录，判断它是否满足任一条件组合。如果满足任一组合（即任一组中的所有条件），那么该记录将被删除。这是一次操作，效率更高，特别是在涉及到大量数据时。

  • 相反，如果你将它们分解成三个独立的 DELETE 语句并逐个执行，每个 DELETE 操作都需要单独访问数据库，进行索引查找、锁定等操作。如果这些操作在大量数据上分别执行，可能会更慢，并且增加数据库的负担。

在 Java 中，逻辑运算符 || 的确是这样工作的：如果第一个条件为 true，那么整个表达式立即确定为 true，不再评估后续条件。SQL 中的 OR 也类似，但在处理 DELETE 语句时，数据库需要评估所有记录，查看它们是否满足 WHERE 子句中指定的任一条件组合。

所以，虽然逻辑上 "这个或那个或另一个"（OR 连接）的确意味着多个条件之间有选择性的满足关系，但在批量删除操作的上下文中，使用 OR 连接多个条件组合可以在单次操作中完成，这通常比分开执行多个删除更有效率。

总结来说，将这些条件用 OR 组合在一个 DELETE 语句中，是在告诉数据库：“检查每一条记录，如果它符合这些条件组中的任何一个，那么删除它。”这在效率和事务完整性方面通常是更优的选择。希望这可以帮助你更好地理解这些概念！

89 在 SQL 中执行批量删除操作时，通常推荐使用 IN 子句而不是 OR 连接。

在 SQL 中执行批量删除操作时，通常推荐使用 IN 子句而不是 OR 连接。使用 IN 子句可以更简洁、更高效地指定多个要删除的记录的标识符（如 ID）。这种方式在处理大量数据时通常也更高效。

下面是一个使用 IN 子句进行批量删除的例子：

DELETE FROM your_table_name WHERE id IN (1, 2, 3, 4);

在这个例子中，your_table_name 是你想要从中删除记录的表的名称，而 (1, 2, 3, 4) 是你想要删除的记录的 ID 列表。使用 IN 可以一次性删除所有列出的 ID 对应的记录。

相比之下，使用 OR 连接来完成同样的任务会更冗长和复杂，尤其是当需要删除的记录很多时。例如：

DELETE FROM your_table_name WHERE id = 1 OR id = 2 OR id = 3 OR id = 4;

这种方式在逻辑上是等效的，但随着要删除的记录数量的增加，SQL 语句会变得越来越长，且可能影响性能。

因此，一般建议使用 IN 子句进行批量删除操作，这不仅使 SQL 语句更简洁，而且在大多数数据库管理系统中，使用 IN 子句的效率也更高。

 

90 sql语句查询是，IN语句 中如果没有指定任何值，查询会报错

 

# sql语句查询是，IN语句 中如果没有指定任何值，查询会报错，语法错误You have an error in your SQL syntax;
SELECT id,isshow,NAME,description,logo,sort,first_letter FROM commodity_brand WHERE (id IN ()); 
# sql语句查询是，IN语句 中如果指定值不存在，查询不会报错，只是查询结果为空
SELECT id,isshow,NAME,description,logo,sort,first_letter FROM commodity_brand WHERE (id IN (1000,2000));

91 VO类/对象 和 stream API 的使用 以及

       BeanUtils.copyProperties(attrgroupEntity, attrGroupWithAttrsVo);的使用

 

 

 

package com.hspedu.hspliving.commodity.vo;

import com.baomidou.mybatisplus.annotation.TableId;
import com.hspedu.hspliving.commodity.entity.AttrEntity;
import lombok.Data;

import java.util.List;

/**
 * @author yangda
 * @create 2024-03-28-14:18
 * @description:
 * 1. 如果返回的数据是单独的实体类/对象 不能满足需求
 * 2. 通常的解决方案 可以增加VO类/对象
 * 3. 这个VO类/对象，可以根据前端的需求，进行组合，也可以增加属性(字段)，或者删除属性(字段)
 */
@Data
public class AttrGroupWithAttrsVo {
    private static final long serialVersionUID = 1L;

    /**
     * id
     */
    // @TableId
    private Long id;
    /**
     * 组名
     */
    private String name;
    /**
     * 排序
     */
    private Integer sort;
    /**
     * 说明
     */
    private String description;
    /**
     * 组图标
     */
    private String icon;
    /**
     * 所属分类 id
     */
    private Long categoryId;

    /**
     * 跟当前属性组关联的基本属性的数据-集合
     */
    private List<AttrEntity> attrs;

}

 

 

    //装配AttrService
    @Resource
    private AttrService attrService;

    /**
     * 根据分类categoryId返回该分类关联的属性组和这些属性组关联的基本属性
     */
    @Override
    public List<AttrGroupWithAttrsVo> getAttrGroupWithAttrsByCategoryId(Long categoryId) {

        //1. 根据categoryId 得到该分类关联的所有属性组
        List<AttrgroupEntity> attrgroupEntities =
                this.list(new QueryWrapper<AttrgroupEntity>().eq("category_id", categoryId));

        //2. 根据前面查询到的 attrgroupEntities，对其进行遍历，将各个属性组关联的
        //   基本属性查询到，并封装到 AttrGroupWithAttrsVo 的集合中，返回-> 依然使用流式计算，stream API
        List<AttrGroupWithAttrsVo> attrGroupWithAttrsVos = attrgroupEntities.stream().map((attrgroupEntity) -> {

            //(1) 先创建一个AttrGroupWithAttrsVo对象
            AttrGroupWithAttrsVo attrGroupWithAttrsVo = new AttrGroupWithAttrsVo();
            //(2) 将attrgroupEntity 对象属性拷贝到 attrGroupWithAttrsVo
            //注意是 import org.springframework.beans.BeanUtils;
            BeanUtils.copyProperties(attrgroupEntity, attrGroupWithAttrsVo);

            //(3) 通过属性组id,获取到该属性组关联的所有基本属性
            Long attrgroupId = attrgroupEntity.getId();
            /**
             * attrService.getRelationAttr(attrgroupId)的说明:
             * 根据属性组id,返回该属性关联的商品属性(基本属性)
             * 一个属性组id,可以关联多个商品属性(基本属性)，因此返回的是一个集合
             */
            List<AttrEntity> attrEntities = attrService.getRelationAttr(attrgroupId);

            //(4) 将前面得到的attrEntities设置到 attrGroupWithAttrsVo的attrs属性
            attrGroupWithAttrsVo.setAttrs(attrEntities);
            // stream.map映射操作完成，返回attrGroupWithAttrsVo对象，
            // 之后使用.collect(Collectors.toList()); 进行收集
            return attrGroupWithAttrsVo;

        }).collect(Collectors.toList());

        return attrGroupWithAttrsVos;
        
        
    }

stream的map可以返回任意类型的对象并使用.collect(Collectors.toList());收集到集合中对吗？

是的，您理解得完全正确。在 Java Stream API 中，map 操作是一个中间操作，它可以接受一个函数作为参数。这个函数被应用到流中的每一个元素上，并将其映射（转换）成一个新的值。因此，map 操作的作用就是对流中的每个元素进行转换。

在您的代码示例中，您使用了 map 操作来将 AttrgroupEntity 对象转换成 AttrGroupWithAttrsVo 对象。这个转换是通过先创建一个 AttrGroupWithAttrsVo 对象，然后使用 BeanUtils.copyProperties 方法将 AttrgroupEntity 对象的属性复制到新创建的 AttrGroupWithAttrsVo 对象中，最后返回这个新的 AttrGroupWithAttrsVo 对象来实现的。

List<AttrGroupWithAttrsVo> attrGroupWithAttrsVos = attrgroupEntities.stream().map((attrgroupEntity) -> {
    AttrGroupWithAttrsVo attrGroupWithAttrsVo = new AttrGroupWithAttrsVo();
    BeanUtils.copyProperties(attrgroupEntity, attrGroupWithAttrsVo);
    ...
    return attrGroupWithAttrsVo;
}).collect(Collectors.toList());

在这个过程中，每个 attrgroupEntity 都被转换成了一个 AttrGroupWithAttrsVo 对象。之后，使用 .collect(Collectors.toList()) 操作将流中的所有 AttrGroupWithAttrsVo 对象收集到一个新的列表中。这意味着，确实，使用 map 操作，你可以将流中的元素转换成任意类型，并最终将它们收集到一个集合中。

这种转换非常有用，特别是在需要根据某些业务逻辑将一种类型的集合转换成另一种类型的集合时。使用 Stream API 和 map 操作，这种转换既简洁又表达力强。

92 BeanUtils.copyProperties()对拷属性信息

BeanUtils.copyProperties(Object source, Object target) 方法是 Spring 框架提供的一个实用工具方法，用于将一个对象的属性值复制到另一个对象中的对应属性。这个方法属于 org.springframework.beans.BeanUtils 类。

在这个方法的调用中，source 参数是属性值的来源对象，而 target 参数是需要被赋值的目标对象。方法的工作原理是通过 Java 反射机制，对两个对象进行遍历，找到它们之间相同名称和可兼容类型的属性，然后将 source 对象的属性值复制到 target 对象的同名属性中。

在您的示例代码 BeanUtils.copyProperties(spuSaveVO,spuInfoEntity); 中，spuSaveVO 是源对象，而 spuInfoEntity 是目标对象。这个调用的意图是将 SpuSaveVO 类型对象中的属性值复制到 SpuInfoEntity 类型对象的对应属性中。

这个方法在处理数据转换的场景中非常有用，尤其是在处理层（如控制器层）接收到的数据传输对象（DTO）需要转换为数据库实体对象时。通过使用 BeanUtils.copyProperties，可以避免编写大量的模板代码来手动设置每个属性值，从而提高代码的简洁性和维护性。

注意事项

  • 类型兼容性：复制属性值时，源对象和目标对象中相同名称的属性需要具有兼容的类型。如果属性类型不兼容，该属性将不会被复制。

  • 深拷贝和浅拷贝：BeanUtils.copyProperties 方法执行的是浅拷贝操作。这意味着如果属性类型是复杂对象，那么复制的是对象的引用而不是对象本身的深拷贝。

  • null 值的处理：默认情况下，如果源对象的属性值为 null，BeanUtils.copyProperties 也会将目标对象的对应属性设置为 null。这个行为在某些情况下可能不是所期望的，因此在使用时需要注意。

因此，当使用 BeanUtils.copyProperties 方法时，建议清楚地了解源对象和目标对象的属性定义，确保它们之间的属性是按预期进行匹配和复制的。

93 BeanUtils.copyProperties 方法是一个非常方便的工具，用于对象之间属性的拷贝，但其有效使用需要满足一定的条件和考虑到一些特定的场景。以下是使用这个方法的主要条件和考虑因素：

1. 属性名称和类型匹配

  • 名称匹配：源对象和目标对象之间对应的属性名必须完全相同。方法通过反射查找名称相同的属性，并进行值的复制。

  • 类型兼容：不仅属性名需要匹配，属性的类型也需要相互兼容。基本数据类型和其对应的包装类型之间是兼容的。例如，如果源对象的属性是 int 类型，而目标对象同名属性是 Integer 类型，那么这两个属性是兼容的，值可以被复制。

2. 访问权限

  • Getter和Setter方法：BeanUtils.copyProperties 方法依赖于 JavaBean 的属性访问规范，即源对象提供属性的 getter 方法，目标对象提供属性的 setter 方法。如果缺少这些方法，相应的属性将不会被复制。

3. 浅拷贝

  • 浅拷贝操作：该方法执行的是浅拷贝，意味着如果属性类型是复杂对象，复制的是对象引用而不是对象本身的副本。这一点在处理包含嵌套对象属性的情况时需要特别注意。

4. null 值的处理

  • null 值覆盖：默认情况下，如果源对象的属性值为 null，BeanUtils.copyProperties 方法也会将目标对象的对应属性设置为 null。这可能不总是预期的行为，特别是当你希望保留目标对象中已有的属性值时。

使用场景

  • 数据转换：当你需要将一个层（如控制器层接收的 DTO）的数据转换到另一个层（如服务层处理的实体类）时，BeanUtils.copyProperties 提供了一种快速转换属性值的方式。

  • 更新对象：在更新操作中，当你需要将部分更新的字段值从一个对象复制到另一个已存在的对象时（例如，从 DTO 到数据库实体），这个方法可以减少代码量，提高效率。

注意事项

使用 BeanUtils.copyProperties 方法时，需要谨慎处理可能的数据覆盖问题，尤其是对于默认值和 null 值的处理。此外，对于复杂的对象图或需要深拷贝的场景，可能需要寻找其他解决方案或手动编写复制逻辑。

94 在 MyBatis Plus 中，@TableId 注解的作用

在 MyBatis Plus 中，@TableId 注解是用来标识实体类中的属性对应数据库表的主键字段。@TableId 注解主要有两个作用：

  1. 标识主键字段：告诉 MyBatis Plus，这个实体类的哪个属性是数据库表的主键列。

  2. 指定主键生成策略：通过注解的 type 属性来指定如何生成主键的值。

  3. @TableId 注解确实会把自增长的值自动回填到对应的实体类属性中，使得在插入操作完成后，你可以直接从实体对象获取到这个值。

@TableId 注解的使用

  • 没有指定 type 属性：当你只写 @TableId 而没有指定 type 属性时，MyBatis Plus 会使用全局的主键生成策略。这个策略默认是 IdType.NONE（即不自动增长），但可以在配置文件中被覆盖。

  • 指定 type = IdType.INPUT：这表明你打算“手动”输入主键的值，而不是依赖数据库的自增长特性或者 MyBatis Plus 的其他主键生成策略来自动生成这个值。在某些情况下，比如你希望使用另一个表的 ID 作为当前表的主键，或者你有自己的主键生成逻辑，这种方式非常有用。

通俗解释

想象一下，你有一张名片（数据库表），上面有一个特别的编号（主键），这个编号是用来唯一标识你的名片的。

  • 当你仅使用 @TableId 而不指定 type 时，就像是你让系统决定如何给你的名片编号。系统可能会选择一个连续的号码（如果配置为自增长），也可能按照其他的规则来生成这个编号。

  • 当你使用 @TableId(type = IdType.INPUT) 时，就像是你自己决定了你的名片编号。你不依赖系统给你分配号码，而是自己告诉系统：“嘿，我希望使用这个特定的号码作为我的名片编号。” 这个方式非常适合于那些你已经知道编号是什么，或者编号需要和其他地方保持一致时。

在 SpuInfoDescEntity 这个例子中，使用 @TableId(type = IdType.INPUT) 表示你在添加商品介绍时，会手动指定 spuId。这个 spuId 通常来源于另一张表（如商品基本信息表），确保商品介绍和商品基本信息在逻辑上是关联的。

 

当你使用 @TableId 注解并设置主键为自增长（IdType.AUTO 或全局配置中的 id-type: auto）时，MyBatis Plus 在插入记录后会自动将数据库生成的自增主键值回填（返回）给对应的实体类属性。这意味着，操作完成后，你可以直接从实体对象中获取到分配的主键值，而不必单独查询数据库。

这个行为是通过 MyBatis Plus 的插入操作完成的，具体来说，当执行如下操作时：

SpuInfoEntity spuInfoEntity = new SpuInfoEntity();
// 设置其他非主键属性
...
spuInfoService.save(spuInfoEntity);

如果 SpuInfoEntity 的 id 属性被注解为 @TableId(type = IdType.AUTO) 或者依赖全局配置为自增（假设没有显式指定 type，且全局配置为自增），插入记录后，spuInfoEntity 的 id 属性会被自动设置为数据库生成的自增主键值。

这个功能是非常实用的，特别是在创建新记录后需要立即使用新生成的主键值进行其他操作的场景中。

实现原理：

这一自动回填（返回）机制的背后，MyBatis Plus 依赖于底层数据库和 JDBC 驱动的支持，通过 JDBC 的 getGeneratedKeys 方法获取到刚刚插入记录的自增主键值。然后，MyBatis Plus 将这个值设置到实体类的对应属性中。

注意：

  • 确保数据库表的主键列是自增的。不是所有的数据库都支持自增主键，比如 Oracle 就需要使用序列来模拟这种行为。

  • 在某些复杂的插入操作（如批量插入）中，可能需要特别注意如何正确处理自增主键的返回值，因为不是所有情况下自增主键的返回都能按预期工作。

总之，@TableId 注解确实会把自增长的值自动回填到对应的实体类属性中，使得在插入操作完成后，你可以直接从实体对象获取到这个值。

95 String.join(",",decript) 该方法 会遍历 decript 并使用第一个形参作为分隔符进行拼接

//String.join(",",decript) 该方法 会遍历 decript 并使用第一个形参作为分隔符进行拼接
spuInfoDescEntity.setDecript(String.join(",",decript));

96 前端知识点 - 组件发布订阅消息 【发布-订阅模式（Pub/Sub）】

发布-订阅模式（Pub/Sub）是一种消息传递范式，允许系统的不同部分在不直接引用对方的情况下进行通信。这种模式非常适合用于构建松耦合的应用程序，因为它允许消息的发布者和订阅者独立地改变，而不会影响到对方。

示例

假设我们有一个在线商城系统，其中包含一个订单管理组件和一个库存管理组件。当一个新的订单创建时，我们需要减少库存量。在这个场景中，订单管理组件是消息的发布者，而库存管理组件是消息的订阅者。

订单管理组件：在用户下单后，它会发布一个事件（例如newOrder），包含订单的详细信息。

PubSub.publish('newOrder', orderDetails);

库存管理组件：它订阅newOrder事件，一旦事件被触发，它会根据订单详情减少库存。

PubSub.subscribe('newOrder', (msg, orderDetails) => {
    reduceInventory(orderDetails);
});

作用

  1. 解耦合：发布者和订阅者不需要直接知道对方的存在。它们只需通过事件（消息）进行通信，这样就减少了系统各部分之间的依赖性。

  2. 易于扩展：新的订阅者可以很容易地添加到系统中，用于响应已有的事件，而不需要修改发布者的代码。

  3. 异步通信：发布者可以非阻塞地发布事件，订阅者可以在事件发生时异步地响应，提高了系统的响应能力和性能。

  4. 动态网络构建：可以根据需要动态地添加或删除订阅者，使得系统能够在运行时根据需要调整其行为。

总结

发布-订阅模式通过引入一个或多个中介者（事件通道或消息代理），实现了消息发布者和订阅者之间的松耦合通信。这种模式特别适合于大型和复杂的应用程序，其中组件的独立性和可扩展性是重要考虑因素。通过使用发布-订阅模式，应用程序可以更易于维护和扩展，同时保持各部分之间的清晰界限。

 

97 使用QueryWrapper 和 编写XML映射文件中的SQL语句。这两种方式进行sql查询的应用场景

在开发基于Spring Boot和MyBatis（或MyBatis Plus）的应用时，通常有两种主要方式来定义和执行数据库查询：使用QueryWrapper以及编写XML映射文件中的SQL语句。每种方法都有其特定的应用场景和优势，选择哪一种取决于多种因素，如查询的复杂度、团队的偏好、项目的需求等。

使用QueryWrapper

应用场景：

  • 简单到中等复杂度的CRUD操作：对于直接的数据访问逻辑，如简单的增删改查操作，使用QueryWrapper可以快速完成任务。

  • 动态SQL：当查询条件在运行时动态变化，且需要基于不同的用户输入组合不同的查询条件时，QueryWrapper提供了链式调用的方式，可以灵活地构建查询条件。

  • 代码优先：对于倾向于在Java代码中定义所有业务逻辑的团队，使用QueryWrapper可以避免切换到XML文件，从而保持代码的连贯性。

优点：

  • 类型安全：使用QueryWrapper构建查询时，可以利用IDE的自动完成特性，减少字段名错误的可能性。

  • 易于理解：对于Java开发者来说，使用纯Java代码来定义查询逻辑通常更直观易懂。

  • 减少样板代码：MyBatis Plus的QueryWrapper减少了大量样板代码的需要，使得操作数据库变得更简洁。

在Mapper.xml中编写SQL

应用场景：

  • 复杂查询：对于复杂的查询，尤其是那些涉及多表连接、子查询、复杂的条件判断等，直接在XML中编写SQL语句可能更清晰和灵活。

  • 优化执行计划：对于需要精细调整的SQL查询，直接编写SQL语句可以更好地控制执行计划，尤其是在性能调优方面。

  • 团队习惯：如果团队成员更习惯于通过编写SQL语句来实现业务逻辑，或项目规范要求如此，直接在XML文件中编写SQL是更好的选择。

优点：

  • 灵活性：直接编写SQL语句提供了最高的灵活性，几乎可以实现任何复杂的查询逻辑。

  • 易于优化：对数据库查询进行优化时，直接修改SQL语句通常更直接有效。

  • 分离SQL和Java代码：将SQL语句放在XML文件中可以使Java代码更加干净，专注于业务逻辑的实现。

总结

使用QueryWrapper还是XML映射文件中的SQL，取决于具体的应用场景、查询的复杂度以及团队的偏好。对于简单到中等复杂度的查询，倾向于代码中定义逻辑的项目，QueryWrapper是一个很好的选择。对于复杂查询，需要精细优化，或团队习惯于分离SQL和业务逻辑的情况，使用XML映射文件定义SQL可能更合适。在实际开发中，两种方式往往会结合使用，以适应不同的需求和场景。

 

98 this.baseMapper.selectList(null); 直接传一个null会把数据表中对应的所有的数据返回

 

/**
     * 这里涉及到一个解决方案
     * 返回二级分类(包括三级分类)的数据-按照规定的格式 Map<String, List<Catalog2Vo>>
     * 这里会使用到流式计算 将List集合 转换为 我们需要的Map格式
     * 有一定难度-有层级关系
     * 老师分析: 我们需要一个辅助方法getParent_cid()，就是通过parentId获取对应的下一级的分类数据
     *
     */
    @Override
    public Map<String, List<Catalog2Vo>> getCatalogJson() {

        //先得到所有的分类数据，然后在程序中进行业务处理(到数据表只查询一次，得到所有的数据然后过滤，对数据库的压力小一些)
        // ，得到最终要的结果-> Map<String, List<Catalog2Vo>>

        // 得到所有的分类数据[到数据表查询一次],
        // 这里直接传一个null会把数据表中对应的所有的数据返回,
        // 但是不包含已经被逻辑删除的数据,进行过逻辑删除的数据不会返回 is_show=0的不返回
        List<CategoryEntity> categoryEntities =
                this.baseMapper.selectList(null);

        return null;
    }

 

 

99 JavaBean在生成默认的全参构造器中的形参顺序和JavaBean属性的声明顺序一致

 

100 在Thymeleaf中，${commodity.getSkuTitle()}和${commodity.skuTitle}这两种数据访问方式本质上访问的是同一个属性或方法，但它们之间存在一些细微的区别和背后的原理：

${commodity.getSkuTitle()}

  • 这种方式直接调用commodity对象的getSkuTitle()方法来获取值。

  • 它显式地指定了要调用的方法名，这意味着只会尝试调用这个具体的方法。

  • 如果commodity对象中不存在名为getSkuTitle()的方法，则会产生错误。

${commodity.skuTitle}

  • 这种方式使用了Thymeleaf的属性访问语法来获取skuTitle属性的值。

  • 在这种写法下，Thymeleaf会按照JavaBean的规范，首先尝试调用getSkuTitle()方法来获取属性值。如果该方法不存在，Thymeleaf还会尝试其他方式（如直接访问字段，或调用isSkuTitle()方法，如果它是一个布尔类型的属性）。

  • 这种方式更加灵活，因为它不直接依赖于具体的方法名，而是依赖于属性名。这使得模板代码在某种程度上更加简洁和易于阅读。

区别总结

  • 显式方法调用 vs. 属性访问：${commodity.getSkuTitle()}显式地调用了一个方法，而${commodity.skuTitle}则是一种更通用、基于属性名的访问方式。

  • 错误处理：如果getSkuTitle()方法不存在，${commodity.getSkuTitle()}将直接失败，而${commodity.skuTitle}可能会通过其他方式（如直接访问公共字段）成功获取值。

  • 代码简洁性：使用${commodity.skuTitle}通常代码更简洁，因为它不需要指定具体的getter方法，只需要知道属性名。

在实际开发中，推荐使用${commodity.skuTitle}这种方式，因为它更符合Thymeleaf的使用习惯，同时提供了更好的灵活性和简洁性。只有在需要显式调用特定方法，且这个方法不遵循JavaBean属性访问规范时，才考虑使用${commodity.getSkuTitle()}的形式。

 

101 在Thymeleaf模板引擎中，th:text和th:utext都用于将数据渲染到HTML页面上，但它们处理HTML标签的方式存在差异。

th:text

th:text属性用于安全地渲染文本内容到页面上。如果值中包含HTML标签，这些标签会被转义，意味着标签会作为普通文本显示，而不会被浏览器作为HTML元素解析。这种方式可以防止跨站脚本攻击（XSS），是渲染文本内容的推荐方式。

例如：

<span th:text="'Hello &lt;strong&gt;World&lt;/strong&gt;'">Default Text</span>

渲染后的结果将不会把<strong>标签当作HTML解析，而是显示为文本内容：

<span>Hello &lt;strong&gt;World&lt;/strong&gt;</span>

th:utext

与th:text不同，th:utext（unescaped text）属性用于渲染非转义的文本内容，如果值中包含HTML标签，这些标签会被浏览器作为HTML元素解析。这允许你动态插入含有HTML标签的字符串，并且这些HTML标签会按照正常的HTML元素被渲染。

例如：

<span th:utext="'Hello &lt;strong&gt;World&lt;/strong&gt;'">Default Text</span>

渲染后的结果将会把<strong>标签当作HTML解析：

<span>Hello <strong>World</strong></span>

主要区别

  • 安全性：th:text通过转义HTML标签，提供了更好的安全性，可以防止XSS攻击。th:utext则直接渲染HTML标签，如果内容来源不可信，使用th:utext可能会带来安全风险。

  • 用途：当需要在页面上显示原始HTML内容（如从数据库中获取的富文本内容）时，可以使用th:utext。而在大多数情况下，推荐使用th:text来显示纯文本内容。

因此，在使用th:utext时需要谨慎，确保你渲染的内容是安全的，避免XSS攻击的风险。在可能的情况下，优先使用th:text。

如果你的目的仅仅是显示文本内容，且该文本内容不包含任何HTML标签，那么th:text和th:utext之间的区别确实不大，因为在这种情况下，它们都会将文本内容原样显示。然而，从安全性和最佳实践的角度出发，还是有一些细微的差别和考虑点：

安全性

  • th:text 是更安全的选择，因为它会自动转义HTML标签，防止潜在的跨站脚本（XSS）攻击。即使文本内容不包含HTML标签，使用th:text也是一种安全的做法，因为它可以确保即使文本内容意外包含了HTML标签或特殊字符，这些内容也不会被浏览器解释执行。

  • th:utext 直接渲染文本，不会对HTML标签进行转义。如果你绝对确定文本内容是安全的，并且在未来也不会包含任何HTML标签，那么使用th:utext也没问题。但是，一旦文本内容包含了HTML标签或特殊字符，它们将被浏览器解释为HTML代码，这可能导致页面布局改变或出现安全漏洞。

最佳实践

即使是仅用于显示文本内容，推荐使用th:text，因为它提供了额外的安全性保障。只有在需要显示实际的HTML内容（即文本中包含HTML标签，且这些标签需要被浏览器解析为HTML元素）时，才考虑使用th:utext。并且，在使用th:utext时，要确保渲染的内容来源是安全的，以避免XSS攻击等安全风险。

总的来说，虽然在仅显示纯文本内容的场景下th:text和th:utext的表现相近，但th:text由于其自动的转义机制，是更推荐的选项，以增强应用的安全性。

 

102 JavaScript中 location.href 赋一个url地址值 就会向该url发送请求

 

 

//处理带条件搜索, 技术难点在于要把原来的条件带上.
function searchProducts(name, value) {
//得到最新的请求 url, 带有多个条件
//  给`location.href` 赋一个url地址值 就会向该url发送请求
// location.href = replaceParamVal(location.href,name,value,false)

var url = replaceParamVal(location.href,name,value,false)

    console.log("url->  ", url) //url->   http://localhost:9090/list.html#?keyword=海信


}

 

103 JavaScript代码简单复习

 

   //处理带条件搜索, 技术难点在于要把原来的条件带上.
    function searchProducts(name, value) {
    //得到最新的请求 url, 带有多个条件
    //  给`location.href` 赋一个url地址值 就会向该url发送请求
    location.href = replaceParamVal(location.href,name,value,false)

    // var url = replaceParamVal(location.href,name,value,false)
    //     console.log("url->  ", url) //url->   http://localhost:9090/list.html#?keyword=海信


    }
    function searchByKeyword() {
        searchProducts("keyword", $("#keyword_input").val());
    }
    //替换条件, 或者是添加条件，比较麻烦的代码 - 就是对检索条件进行处理，得到正确的url
    //搜索输入框 输入的值从 "海信" 变为 "海信~" 就会替换为"海信~"
    function replaceParamVal(url, paramName, replaceVal,forceAdd) {
        var oUrl = url.toString();
        var nUrl;

        //在JavaScript中，indexOf()方法用于在字符串中搜索指定值的首次出现，
        // 并返回它的索引（位置）。如果未找到该值，则该方法返回-1。
        if (oUrl.indexOf(paramName) != -1) { //找到了
            if( forceAdd ) {
                if (oUrl.indexOf("?") != -1) {
                    nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                } else {
                    nUrl = oUrl + "?" + paramName + "=" + replaceVal;
                }
            } else {
                var re = eval('/(' + paramName + '=)([^&]*)/gi');
                nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
            }
        } else {
            if (oUrl.indexOf("?") != -1) {
                nUrl = oUrl + "&" + paramName + "=" + replaceVal;
            } else {
                nUrl = oUrl + "?" + paramName + "=" + replaceVal;
            }
        }
        return nUrl;
    };


    //分页请求 - 使用了jquery的基本选择器 class选择器,绑定了click事件
    // 监听所有class为"page_a"的元素的点击事件。
    $(".page_a").click(function () {

        /**
         * <a class="page_a" href="#" th:attr="pn=${result.pageNum + 1}" th:if="${result.pageNum<result.totalPages}">
         * 下一页 >
         * </a>
         */

        /**
         * 在jQuery中，$(this)是一个非常常用的表达式，用于获取当前事件处理函数
         * 中的DOM元素的jQuery对象。当你在事件处理函数中使用$(this)时，它指向
         * 触发当前事件的DOM元素，使你能够对该元素执行jQuery方法。
         *
         * 在$(this).attr("pn");这行代码中，attr("pn")用于获取当前元素
         * （即$(this)指向的元素）上名为"pn"的属性的值。
         *
         */

        // 从点击的元素（比如一个<a>标签）中获取名为"pn"的属性的值。
        // 这个值通常是预期要跳转到的页码，例如从th:attr设置的`${result.pageNum + 1}`

        //在$(this).attr("pn");这行代码中，attr("pn")用于获取当前元素（即$(this)指向的元素）上名为"pn"的属性的值。
        // $(this).attr("pn"); 选择的是触发当前点击事件的dom对象的属性 attr 名 为pn的属性的值
        // ,即类似于${result.pageNum + 1}中的值
        var pn = $(this).attr("pn");

        // 获取当前页面的URL。
        //location.href属性包含了完整的URL字符串，它代表了当前页面的地址。
        // 这个属性不仅可读，也可写。当你读取location.href时，它返回当前页面的完整URL。
        // 当你设置location.href时，浏览器会导航到你指定的新URL，
        // 这个过程类似于用户在地址栏输入一个地址然后按回车键，或者点击了一个链接。
        var href = location.href;

        // console.log("pn->",pn,"  href->",href)
        //pn-> 2   href-> http://localhost:9090/list.html?catalog3Id=301&keyword=%E6%B5%B7%E4%BF%A1


        // 检查URL中是否已经包含"page"参数。
        //在JavaScript中，indexOf()方法用于在字符串中搜索指定值的首次出现，
        // 并返回它的索引（位置）。如果未找到该值，则该方法返回-1。
        if (href.indexOf("page") != -1) {
            // 如果已经包含"page"参数，则替换该参数的值为pn（即期望的页码）。
            // 这里replaceParamVal是一个自定义函数，用于在URL中替换指定参数的值。
            //替换, 这里的"page" 是因为我们后台分页插件是按照 page 这个参数来当做当前页的参数
            //所以写成 page ,同学们应当根据你的后台是安装什么参数名来接收当前页进行相应改变
            location.href = replaceParamVal(href, "page", pn);
        } else {
            // 如果URL中不包含"page"参数，则需要添加该参数。
            // 首先检查URL中是否已经有其他查询参数（即是否包含"?"）。
            //增加 pageNuw
            if (href.indexOf("?") != -1) {
                //http://localhost:9090/list.html?catalog3Id=301&page=1&keyword=%E9%BB%91%E8%89%B2
                // 如果已经有其他查询参数，则通过"&"添加"page"参数及其值pn。
                location.href = location.href + "&page=" + pn;
            } else {
                // 如果没有其他查询参数，则通过"?"添加"page"参数及其值pn。
                location.href = location.href + "?page=" + pn;
            }
        }
        // 阻止<a>标签的默认行为（即导航到href属性指定的链接），
        // 因为我们已经通过修改location.href实现了页面跳转。
        return false;
    })

 

104 使用Docker在Linux中 安装Nginx

 

安装过程如下:

Xshell 7 (Build 0151)
Copyright (c) 2020 NetSarang Computer, Inc. All rights reserved.

Type `help' to learn how to use Xshell prompt.
[C:\~]$ 

Connecting to 192.168.56.100:22...
Connection established.
To escape to local shell, press 'Ctrl+Alt+]'.

WARNING! The remote SSH server rejected X11 forwarding request.
[root@localhost ~]# docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED       STATUS      PORTS                    
ab0cd95f6c9f   mysql:5.7   "docker-entrypoint.s…"   7 weeks ago   Up 6 days   0.0.0.0:3306->3306/tcp, :
[root@localhost ~]# docker exec -it mysql
"docker exec" requires at least 2 arguments.
See 'docker exec --help'.

Usage:  docker exec [OPTIONS] CONTAINER COMMAND [ARG...]

Execute a command in a running container
[root@localhost ~]# docker exec -it mysql /bin/bash
bash-4.2# whoami
root
bash-4.2# mysql -u -proot
ERROR 1045 (28000): Access denied for user '-proot'@'localhost' (using password: NO)
bash-4.2# mysql -u root -proot
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2917
Server version: 5.7.44 MySQL Community Server (GPL)

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+---------------------+
| Database            |
+---------------------+
| information_schema  |
| hspliving_commodity |
| hspliving_manage    |
| mysql               |
| performance_schema  |
| sys                 |
| testdb              |
+---------------------+
7 rows in set (0.00 sec)

mysql> exit
Bye
bash-4.2# quit
bash: quit: command not found
bash-4.2# exit
exit
[root@localhost ~]# ls
anaconda-ks.cfg  original-ks.cfg
[root@localhost ~]# pwd
/root
[root@localhost ~]# ping www.baidu.com
PING www.a.shifen.com (220.181.38.150) 56(84) bytes of data.
64 bytes from 220.181.38.150 (220.181.38.150): icmp_seq=1 ttl=63 time=1.41 ms
64 bytes from 220.181.38.150 (220.181.38.150): icmp_seq=2 ttl=63 time=1.38 ms
64 bytes from 220.181.38.150 (220.181.38.150): icmp_seq=3 ttl=63 time=1.31 ms
64 bytes from 220.181.38.150 (220.181.38.150): icmp_seq=4 ttl=63 time=1.31 ms
^C
--- www.a.shifen.com ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 4075ms
rtt min/avg/max/mdev = 1.313/1.358/1.419/0.044 ms
[root@localhost ~]# cd /mydata
[root@localhost mydata]# ls
mysql
[root@localhost mydata]# mkdir nginx
[root@localhost mydata]# ls
mysql  nginx
[root@localhost mydata]# docker run -p 80:80 --name nginx -d nginx:1.10
Unable to find image 'nginx:1.10' locally
docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: TLS handshake timeout.
See 'docker run --help'.
[root@localhost mydata]# docker run -p 80:80 --name nginx -d nginx:1.10
Unable to find image 'nginx:1.10' locally
1.10: Pulling from library/nginx
6d827a3ef358: Pull complete 
1e3e18a64ea9: Pull complete 
556c62bb43ac: Pull complete 
Digest: sha256:6202beb06ea61f44179e02ca965e8e13b961d12640101fca213efbfd145d7575
Status: Downloaded newer image for nginx:1.10
c42ac24a8160689e95fb304ca1b2c0e5110dd720c7335104db3b0105897c475d
[root@localhost mydata]# docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED          STATUS          PORTS                                                  NAMES
c42ac24a8160   nginx:1.10   "nginx -g 'daemon of…"   22 seconds ago   Up 20 seconds   0.0.0.0:80->80/tcp, :::80->80/tcp, 443/tcp             nginx
ab0cd95f6c9f   mysql:5.7    "docker-entrypoint.s…"   7 weeks ago      Up 6 days       0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mysql
[root@localhost mydata]# ls
mysql  nginx
[root@localhost mydata]# docker container cp nginx:/etc/nginx .
Successfully copied 26.6kB to /mydata/.
[root@localhost mydata]# ls
mysql  nginx
[root@localhost mydata]# cd nginx
[root@localhost nginx]# ls
conf.d          koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf
[root@localhost nginx]# docker stop nginx
nginx
[root@localhost nginx]# docker rm nginx
nginx
[root@localhost nginx]# ls
conf.d          koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf
[root@localhost nginx]# pwd
/mydata/nginx
[root@localhost nginx]# ls
conf.d          koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf
[root@localhost nginx]# cd ..
[root@localhost mydata]# ls
mysql  nginx
[root@localhost mydata]# mv nginx/ conf
[root@localhost mydata]# ls
conf  mysql
[root@localhost mydata]# mkdir nginx
[root@localhost mydata]# ls
conf  mysql  nginx
[root@localhost mydata]# mv conf/ ./nginx/
[root@localhost mydata]# ls
mysql  nginx
[root@localhost mydata]# cd nginx/
[root@localhost nginx]# ls
conf
[root@localhost nginx]# cd conf/
[root@localhost conf]# ls
conf.d          koi-utf  mime.types  nginx.conf   uwsgi_params
fastcgi_params  koi-win  modules     scgi_params  win-utf
[root@localhost conf]# docker run -p 80:80 --name nginx \
> -v /mydata/nginx/html:/usr/share/nginx/html \
> -v /mydata/nginx/logs:/var/log/nginx \
> -v /mydata/nginx/conf:/etc/nginx \
> -d nginx:1.10
1f69a6c40bdc190c5e57bb99b6c9599534a6a9f2940826b8a30bd2845460d17e
[root@localhost conf]# docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED          STATUS          PORTS                                                  NAMES
1f69a6c40bdc   nginx:1.10   "nginx -g 'daemon of…"   22 seconds ago   Up 21 seconds   0.0.0.0:80->80/tcp, :::80->80/tcp, 443/tcp             nginx
ab0cd95f6c9f   mysql:5.7    "docker-entrypoint.s…"   7 weeks ago      Up 6 days       0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mysql
[root@localhost conf]# cd ..
[root@localhost nginx]# ls
conf  html  logs
[root@localhost nginx]# cd html
[root@localhost html]# ls
[root@localhost html]# vi index.html
[root@localhost html]# cat index.html 
<h1>Hspliving</h1>
[root@localhost html]#

 

访问Linux 的 ip 192.168.56.100 看是否可以访问到 Nginx 下的 html/index.html文件的页面

 

下面是使用docker安装Nginx时的一段命令

docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx \
-v /mydata/nginx/conf:/etc/nginx \
-d nginx:1.10

 

105 当Nginx作为反向代理时，如果没有明确指定要转发的Host头信息，Nginx会将proxy_pass指令中指定的主机名和端口作为请求的Host头发送。

 

当Nginx作为反向代理时，如果没有明确指定要转发的Host头信息，Nginx会将proxy_pass指令中指定的主机名和端口作为请求的Host头发送。这意味着，如果在Nginx配置中使用了如下配置：

location / {
    proxy_pass http://hspliving;
}

并且hspliving在Nginx的上游定义中指向192.168.56.1:5050，那么Nginx向上游服务（在本例中为Spring Cloud Gateway）发起的请求将使用192.168.56.1:5050作为Host头的值，而不是原始请求中使用的www.hspliving.com。这样的行为可能导致一些问题，尤其是当后端服务（如Spring Cloud Gateway）依赖Host头进行路由决策时。

为了保持原始请求的Host头信息，需要在Nginx配置中显式设置proxy_set_header Host $host;。这样，无论原始请求的Host头是什么，都会被保留并转发到上游服务：

location / {
    proxy_pass http://hspliving;
    proxy_set_header Host $host; # 保持原始Host头
}

这种配置确保了，如果用户在浏览器中输入www.hspliving.com并发送请求，即使请求通过Nginx反向代理到Spring Cloud Gateway，Gateway也会收到一个带有www.hspliving.com作为Host头的请求。这对于基于域名进行路由的配置至关重要，因为它允许Gateway根据请求的域名将流量路由到正确的服务。

总结来说，Nginx将请求转发给Spring Cloud Gateway时，默认情况下使用的请求形式的Host头是proxy_pass中指定的主机名和端口。通过正确配置proxy_set_header，可以保证原始请求的Host信息被保留并正确处理。

 

 

如果Nginx转发请求到Spring Cloud Gateway时默认不携带原始的Host信息，这可能导致Spring Cloud Gateway无法正确处理请求，特别是当路由规则依赖于Host头信息时。在Nginx的反向代理配置中，可以通过设置proxy_set_header指令来确保Host头信息（以及其他可能需要的头信息）被正确转发。

例如，您的Nginx配置应该确保包含以下行以转发Host头和其他重要的头信息：

location / {
    proxy_pass http://hspliving;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

这里的配置项做了以下几件事情：

  • proxy_set_header Host $host; 设置代理请求的Host头为原始请求的Host头。这对于保证后端服务（如Spring Cloud Gateway）能根据Host头进行正确的路由分发是必要的。

  • proxy_set_header X-Real-IP $remote_addr; 传递客户端的真实IP地址到后端服务，这对于日志记录或任何基于IP地址的处理很有用。

  • proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 这是一个标准的头，用于识别客户端原始请求的IP地址。当请求经过多个代理时，这个头信息会包含所有经过的代理服务器的IP地址。

  • proxy_set_header X-Forwarded-Proto $scheme; 传递原始请求所使用的协议（比如http或https），这在需要重定向或生成绝对URL时特别有用。

通过确保这些头信息被正确设置和转发，您可以帮助确保Spring Cloud Gateway能够根据其配置正确地处理和路由到来的请求。

如果在做出这些调整后仍然遇到问题，建议查看Nginx和Spring Cloud Gateway的日志文件，以便获取关于请求处理过程中可能出现的问题的更多信息。

 

 

106 Spring Cloud Gateway请求处理和路由转发

问题1: Spring Cloud Gateway中的路径重写和路由选择

  • 问题描述: 如何在Spring Cloud Gateway中使用路径重写规则，并且如何确保请求根据配置正确地路由到目标服务？

  • 回答:

    • 在Spring Cloud Gateway中，可以通过配置断言（Predicates）和过滤器（Filters）来匹配并处理传入的请求。特别是，RewritePath过滤器允许对匹配的请求路径进行重写。

    • 举例说明，如果原始请求路径为/api/service/oss/policy，并且希望去除/api/service部分，只将/oss/policy转发到目标服务，可以使用如下过滤器配置：RewritePath=/api/service/(?<segment>.*), /${segment}。

    • 在选择路由目标时，Gateway会根据配置的URI（如lb://hspliving-service）和处理后的路径构造新的请求。这里，lb://前缀表示使用负载均衡器选择服务实例，而服务名称（hspliving-service）则通过服务发现解析为实际地址。

问题2: 原始请求的域名部分在路由过程中的作用

  • 问题描述: 在Spring Cloud Gateway接收到一个请求后（例如，http://www.example.com/api/service/oss/policy），原始请求的域名部分（http://www.example.com）如何影响路由决策？

  • 回答:

  • 在Spring Cloud Gateway处理传入的请求时，原始请求的域名部分（如http://www.example.com）不会直接用于构造新的请求。相反，这部分信息在决定如何路由请求时基本上是“忽略”的。网关根据其配置的路由规则和过滤器逻辑来决定如何处理和转发请求。

    具体来说：

    • 原始请求地址（如http://www.example.com/api/service/oss/policy）中的路径部分（/api/service/oss/policy）会被匹配和可能通过过滤器（例如路径重写）进行修改。

    • 配置的URI（例如lb://hspliving-service）定义了请求应该被转发到的目标服务。如果使用了服务发现（lb://表示负载均衡），这会根据服务的实际实例来解析目标地址。

    • 生成的新请求将结合配置的URI（解析后的服务地址）和处理后的路径来构造。比如，如果lb://hspliving-service解析为http://192.168.1.100:8080，且原始路径经过重写为/oss/policy，则最终请求将发送到http://192.168.1.100:8080/oss/policy。

    因此，网关实际上是根据路由配置中定义的规则和过滤器逻辑，从原始请求中提取和修改信息，然后基于这些信息构造并发送一个全新的请求到下游服务。原始请求的域名部分在这个过程中不直接用于构造新的请求URL，而是通过配置的服务ID和服务发现机制来确定实际的目标服务地址。

  •  

    • 原始请求的域名或IP地址加端口部分（例如，http://www.example.com）在决定路由到哪个服务时，通常不直接被使用。这部分信息对于Gateway来说，主要是通过HTTP头中的Host字段接收的，而不是用于路由决策的基础。

    • 路由决策主要基于请求的路径（以及可能的其他HTTP请求信息，如头信息、查询参数等）和Gateway配置的路由规则。例如，路径断言用于匹配请求路径，而配置的URI（如lb://hspliving-service）指定了请求应该转发到的目标服务。

    • 当请求匹配到特定的路由规则后，Gateway会基于该规则配置的信息，如服务ID和路径重写规则，构造并发送新的请求到目标服务。这个新请求的URL是由服务发现解析的目标服务地址和经过重写的请求路径组成的。

问题3: Nginx作为反向代理时Host头的处理

  • 问题描述: 当使用Nginx作为反向代理转发请求到Spring Cloud Gateway时，Nginx默认是否会携带原始请求的Host信息？如果不会，应如何配置Nginx？

 

server {
    listen 80;
    server_name www.example.com;

    location / {
        proxy_pass http://localhost:8080; # 假设Spring Cloud Gateway监听在8080端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

  • 回答:

    • 默认情况下，当Nginx反向代理请求时，它会使用proxy_pass指定的地址作为请求的Host头。这意味着，如果没有额外的配置，原始请求的Host信息可能不会被保留。

    • 为了保持原始请求的Host信息，可以在Nginx配置中使用proxy_set_header指令来显式设置要转发的Host头。例如，proxy_set_header Host $host;会将原始请求的Host头传递给下游服务。

    • 此外，还可以配置proxy_set_header以传递其他有用的头信息，如X-Real-IP和X-Forwarded-For，这对于维护客户端的原始IP信息和支持负载均衡器后的服务是很重要的。

通过以上整理，我们对Spring Cloud Gateway在处理和路由请求方面的行为，以及如何通过Nginx作为前端代理时保持请求头信息有了更深入的理解。

 

107 网关配置的优先级

在Spring Cloud Gateway中，路由的匹配和选择遵循一定的优先级规则。理解这些规则对于设计有效且可预测的路由策略非常重要。这里详细说明网关配置的优先级：

路由优先级规则

  1. 路径匹配优先级:

    • 当配置了多个路由时，具有更具体路径匹配规则的路由具有更高的优先级。例如，路由配置/api/service/**比/api/**具有更高的优先级，因为它更具体。

    • 如果有多个路由规则都能匹配到一个请求，那么最具体的匹配将胜出。

  2. 配置文件中的顺序:

    • 在Spring Cloud Gateway的配置文件中，先出现的路由定义具有更高的优先级。因此，如果两个路由规则同样具体，先定义的路由将被优先考虑。

示例说明

假设您有以下的路由配置：

spring:
  cloud:
    gateway:
      routes:
        - id: specific-service-route
          uri: lb://specific-service
          predicates:
            - Path=/api/service/specific/**
          filters:
            - RewritePath=/api/service/specific/(?<segment>.*), /$\{segment}

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

        - id: api-route
          uri: lb://api-service
          predicates:
            - Path=/api/**

优先级解析:

  1. 最具体匹配原则:

    • 对于路径/api/service/specific/item的请求，即使所有三个路由都能匹配到这个请求，specific-service-route路由会被选择，因为它的路径匹配规则最具体。

  2. 配置顺序:

    • 如果一个请求的路径是/api/service/other，它既匹配general-service-route也匹配api-route。在这种情况下，general-service-route会被选择，因为它的路径匹配规则更具体。

    • 对于路径/api/other的请求，它只能匹配到api-route，因此api-route会被选择。

重要注意事项

  • 谨慎排列路由顺序：在配置文件中仔细安排路由定义的顺序，可以避免不必要的混淆，并确保路由逻辑的清晰。

  • 利用路径具体性：通过使用更具体的路径匹配规则来为特定的请求路径或类型定义路由，可以有效地管理和路由流量。

通过以上的规则和示例说明，应该对Spring Cloud Gateway中的路由优先级有了更加清晰的理解。这有助于在设计和配置网关路由时，做出更加有效和可预测的决策。

 

108 如果将基于Host的断言配置在路由定义的最前面，www.hspliving.com/api/commodity/brand/list请求会失败

如果您将基于Host的断言配置在路由定义的最前面，并且这个断言匹配了进来的请求，那么是的，请求将根据这个路由规则进行处理。具体到您的例子，当在浏览器中请求www.hspliving.com/api/commodity/brand/list时，如果存在一个路由配置，它基于Host头（www.hspliving.com）进行匹配，并且该路由的URI指向了某个服务（比如lb://hspliving-commodity），那么请求将会被转发到这个服务。

下面是这种配置的一个示例：

spring:
  cloud:
    gateway:
      routes:
        - id: hspliving-host-route
          uri: lb://hspliving-commodity
          predicates:
            - Host=**.hspliving.com

在这个例子中，如果有请求的Host头匹配**.hspliving.com，那么这个请求将会被路由到hspliving-commodity服务。一旦请求到达指定的服务，就会根据该服务的控制器（controller）和请求映射（@RequestMapping）来进一步处理请求。

然而，要注意的是：

  • 路径匹配：确保目标服务hspliving-commodity中有一个控制器，它通过@RequestMapping("/api/commodity/brand/list")或相似的注解能够匹配到转发的路径。如果没有匹配的处理器，您可能会收到404错误。

  • 过滤器和路径重写：在实际配置中，您可能还需要考虑路径重写的过滤器，特别是当您想要修改转发给下游服务的请求路径时。例如，如果您想去掉请求路径中的/api部分，那么您可以使用路径重写过滤器来实现这一点。

filters:
  - RewritePath=/api/(?<path>.*), /$\{path}

这将确保请求路径中的/api被剥离，然后只将剩余的部分（比如/commodity/brand/list）转发到hspliving-commodity服务。

通过正确配置断言和过滤器，您可以精确控制如何根据请求的不同特征（如Host头和路径）将流量路由到不同的后端服务。

109 Nginx配置为反向代理，并且使用了proxy_pass http://192.168.56.1:5050;时，发往Nginx的请求，如访问www.hspliving.com/api/commodity/brand/list，在经过Nginx转发后，其请求目标变为http://192.168.56.1:5050/api/commodity/brand/list。

当Nginx配置为反向代理，并且使用了proxy_pass http://192.168.56.1:5050;时，发往Nginx的请求，如访问www.hspliving.com/api/commodity/brand/list，在经过Nginx转发后，其请求目标变为http://192.168.56.1:5050/api/commodity/brand/list。同时，因为配置了proxy_set_header Host $host;，所以原始请求的Host头（这里是www.hspliving.com）也会被保留并传递给Spring Cloud Gateway。

这里的关键步骤包括：

  1. 请求重定向：

    • 用户的请求首先发送到Nginx服务器（访问www.hspliving.com/api/commodity/brand/list）。

    • Nginx根据其配置，将请求转发到Spring Cloud Gateway（位于192.168.56.1:5050），路径保持不变（/api/commodity/brand/list）。

  2. Host头的保留：

    • 由于proxy_set_header Host $host;的配置，请求中包含的Host头（www.hspliving.com）也会被发送到Spring Cloud Gateway。

  3. Spring Cloud Gateway的处理：

    • Spring Cloud Gateway接收到这个请求后，会根据其配置的路由规则来处理。如果有基于Host头的路由规则，Gateway将会检查传入请求的Host头是否匹配。

    • 如果请求的Host头与某个路由规则中定义的Host断言匹配，Gateway则根据该路由的配置（如指向特定服务的URI）来进一步处理和转发请求。

  4. 服务发现和请求转发：

    • 如果路由配置了服务发现（例如，使用lb://hspliving-commodity作为URI），Gateway会解析这个逻辑服务名到实际的服务实例地址，并将请求转发到该服务实例，路径部分保持为/api/commodity/brand/list。

因此，整个流程是：用户请求 -> Nginx -> Spring Cloud Gateway -> 目标服务（hspliving-commodity服务实例），其中Nginx作为反向代理，而Spring Cloud Gateway根据路由规则进行更细致的请求处理和转发。

 

110 当您在浏览器地址栏输入www.hspliving.com/api/commodity/brand/list，请求的转发过程涉及多个步骤，具体如下：

1. 浏览器到Nginx

  • 请求发送：浏览器向www.hspliving.com发起HTTP请求，请求路径为/api/commodity/brand/list。

  • DNS解析：浏览器通过DNS解析www.hspliving.com的IP地址，这通常指向配置的Nginx服务器。

  • 连接Nginx：浏览器使用解析得到的IP地址与Nginx服务器建立连接，并发送请求。

2. Nginx处理请求

  • 接收请求：Nginx接收到来自浏览器的请求。

  • 配置检查：Nginx根据其配置（如下面示例），决定如何处理请求。

    server {
        listen       80;
        server_name  www.hspliving.com;

        location / {
            proxy_set_header Host $host; # 保持原始Host头
            proxy_pass http://192.168.56.1:5050; # 转发到Spring Cloud Gateway
        }
    }

  • 请求转发：Nginx将请求转发到配置的Spring Cloud Gateway地址（http://192.168.56.1:5050），同时保留原始请求的Host头信息。

3. Spring Cloud Gateway处理请求

  • 接收请求：Spring Cloud Gateway在192.168.56.1:5050接收到Nginx转发的请求。

  • 路由匹配：Gateway根据配置的路由规则匹配请求。假设有以下路由配置：

    spring:
      cloud:
        gateway:
          routes:
            - id: commodity-route
              uri: lb://hspliving-commodity
              predicates:
                - Host=**.hspliving.com
                - Path=/api/commodity/**

  • 服务发现与转发：假设匹配成功，Gateway使用服务发现将lb://hspliving-commodity解析为实际服务的地址，并将请求转发至该服务，请求路径保持为/api/commodity/brand/list。

4. 目标服务处理请求

  • 接收请求：hspliving-commodity服务接收到由Gateway转发的请求。

  • 处理请求：服务根据其控制器配置（比如@RequestMapping("/api/commodity/brand/list")）处理请求。

  • 返回响应：处理完成后，服务生成响应并将其返回给Spring Cloud Gateway，Gateway再将响应返回给Nginx，最后Nginx将响应返回给浏览器。

5. 浏览器接收响应

  • 显示内容：浏览器接收到响应后，解析并显示响应内容给用户。

这个过程展示了从浏览器发起请求到最终获取响应的完整流程，涉及到的关键环节包括DNS解析、Nginx反向代理、Spring Cloud Gateway的路由匹配和转发，以及目标服务的请求处理。

 

111 如果将基于Host的断言配置放在Spring Cloud Gateway中的路由定义的最后面，整个请求转发的过程在高层次上保持不变，但具体到路由选择和匹配逻辑会有所差异。这里的关键变化在于，Spring Cloud Gateway在决定如何路由请求时，会首先考虑其他断言（如路径断言），并且基于Host的路由匹配可能不会被优先考虑。

假设的路由配置

假设您有以下路由配置，其中基于Host的断言位于最后：

spring:
  cloud:
    gateway:
      routes:
        - id: api-route
          uri: lb://api-service
          predicates:
            - Path=/api/**
        - id: commodity-route
          uri: lb://hspliving-commodity
          predicates:
            - Path=/api/commodity/**
        - id: host-based-route
          uri: lb://host-specific-service
          predicates:
            - Host=**.hspliving.com

转发过程详解

  1. 浏览器请求：

    • 用户在浏览器地址栏输入www.hspliving.com/api/commodity/brand/list并发起请求。

  2. Nginx处理：

    • 请求首先被发送到配置为接收www.hspliving.com请求的Nginx服务器。

    • Nginx根据其反向代理配置将请求转发到Spring Cloud Gateway（如http://192.168.56.1:5050），同时保留原始的Host头。

  3. Spring Cloud Gateway匹配路由：

    • Gateway接收到请求后，根据定义的路由规则依次尝试匹配。

    • 关键变化：由于Host断言在配置顺序上位于最后，Gateway会先根据路径尝试匹配路由。这意味着如果存在其他路径匹配该请求的路由配置，那么这些路由可能会被优先匹配和选择，即使它们没有指定Host断言。

    • 在此示例中，请求路径/api/commodity/brand/list首先与commodity-route路由的Path断言匹配。因为这个路由更具体且在配置中出现在基于Host的路由之前，所以它将被选中用于处理请求，而不管Host断言。

  4. 服务发现与请求转发：

    • 一旦选择了匹配的路由（如commodity-route），Gateway会使用服务发现机制将lb://hspliving-commodity解析为具体的服务实例，并将请求转发到该实例。

  5. 目标服务处理请求：

    • hspliving-commodity服务接收并处理请求，然后将响应发送回Gateway，Gateway再将响应通过Nginx返回给浏览器。

结论

将基于Host的断言放在路由配置的最后面，意味着在匹配路由时，Spring Cloud Gateway将优先考虑其他断言（如路径断言）。这可能导致基于路径的路由规则比基于Host的路由规则有更高的优先级，从而影响请求的路由决策。因此，配置路由规则的顺序和断言类型对于确保请求按预期路由至正确的服务至关重要。

 

112 Docker挂载文件

在这条Docker运行命令中，文件挂载/mydata/nginx/html:/usr/share/nginx/html是Docker的一个特性，用于将宿主机的文件系统目录或文件映射到容器内部的文件系统目录或文件。这样做的目的是使得宿主机和容器之间可以共享数据或配置，便于数据持久化和配置的灵活管理。

具体到/mydata/nginx/html:/usr/share/nginx/html这个挂载参数的解释：

  • 宿主机目录：/mydata/nginx/html

    • 这是宿主机上的一个目录路径，你需要在宿主机上预先创建这个目录（如果尚未存在的话）。这个目录用于存放你希望通过Nginx容器提供服务的静态网页文件。

  • 容器内目录：/usr/share/nginx/html

    • 这是Nginx容器内的一个目录路径，Nginx默认会从这个目录中寻找并提供静态网页服务。在Nginx的默认配置中，当HTTP请求寻求根路径（即http://yourdomain.com/）或者是该目录下的特定文件时，Nginx会尝试从这个目录提供内容。

  • 挂载操作：通过Docker的-v或--volume参数实现挂载，格式为<宿主机目录>:<容器内目录>。该操作将宿主机上的/mydata/nginx/html目录映射到容器内的/usr/share/nginx/html目录。这意味着对宿主机该目录中文件的任何更改都会即时反映在容器中相应的目录下，反之亦然。

这种挂载方式使得管理Nginx服务的静态内容变得更加灵活和便捷。例如，你可以直接在宿主机的/mydata/nginx/html目录下添加、删除或修改静态网页文件，而无需进入容器内部进行操作，Nginx在提供服务时会直接使用这些更改后的内容。此外，这也方便了数据的备份和迁移，因为宿主机上的目录可以很容易地被复制到其他地方或另一台机器上。

 

是的，您完全正确。当您使用Docker命令中的-v或--volume参数将宿主机的/mydata/nginx/html目录挂载到容器内的/usr/share/nginx/html目录时，这两个目录之间会形成实时的、双向的同步关系。

这意味着：

  • 如果您在宿主机的/mydata/nginx/html目录中新建、修改或删除文件，这些更改会即时反映在容器内的/usr/share/nginx/html目录中。

  • 同样，如果某些操作（虽然在这个使用场景中较少见）导致容器内的/usr/share/nginx/html目录内容变更，这些变更也会同步到宿主机的/mydata/nginx/html目录。

因此，通过这种方式挂载目录，可以非常方便地管理和更新Nginx服务的静态内容，无需直接与容器内部的文件系统交互。这也是Docker容器技术用于实现数据持久化和方便数据管理的一个典型应用场景。

 

这里是在对应的目录真正新建了一个文件，而不仅仅是创建了一个映射、快捷方式或软连接。当您使用Docker的-v或--volume参数进行目录挂载时，它建立的是宿主机目录和容器内目录之间的直接映射关系。这意味着：

  • 在宿主机目录中的操作：当您在宿主机的/mydata/nginx/html目录下创建、修改或删除文件时，这些改动是直接对文件系统上的真实文件进行操作的。这些操作的结果会实时反映在容器内部挂载点/usr/share/nginx/html的文件系统中，因为它们指向的是相同的文件系统位置。

  • 在容器内目录中的操作：同样，如果您在容器内部对/usr/share/nginx/html目录进行文件操作（例如，通过进入容器执行命令修改文件），这些操作实际上也是在修改宿主机上/mydata/nginx/html目录中的文件。容器内的操作直接影响到宿主机上挂载的目录，因为它们共享相同的物理存储位置。

这种机制不同于软连接（符号链接）或快捷方式，软连接或快捷方式只是文件系统中的一个指向，它们并不包含文件的实际内容，而是指向包含实际内容的另一个文件的路径。

总的来说，Docker容器中的挂载目录和宿主机上的目录是直接映射的，它们对文件的任何改动都是实质性的，操作的是同一份数据，而非副本或链接。这使得数据持久化和容器外部的直接数据操作成为可能，极大地增强了Docker容器在实际应用中的灵活性和效用。

因为它们共享相同的物理存储位置。你的意思是其实这里的挂载，其实是对相同的物理存储位置进行操作的?只是所处的文件目录的不同？

是的，您的理解是正确的。当您使用Docker挂载宿主机目录到容器内部某个路径时，宿主机上的目录和容器内的目录实际上是指向相同的物理存储位置。这种挂载机制确保了宿主机和容器之间可以实时共享和访问相同的文件集。

这里的“共享相同的物理存储位置”意味着：

  • 文件的物理存储：文件实际保存在宿主机的存储系统上，无论是通过宿主机目录直接访问还是通过容器内挂载点访问，操作的都是同一份物理数据。

  • 路径的映射：虽然宿主机目录和容器内挂载点的路径可能不同，但它们通过Docker的挂载机制被映射为访问相同存储位置的两个不同路径视图。这就像两个不同的入口或门牌号指向同一个房间一样。

因此，这种挂载不仅仅是在文件系统层面的路径映射，更重要的是它实现了宿主机和容器之间数据的实时共享和互操作。这样，无论是在宿主机上直接修改文件，还是在容器内部通过其挂载点修改文件，都是在操作相同的文件数据，这对于数据持久化、配置管理、日志收集等场景非常有用。

 

113 Docker中的Nginx配置文件出错如何查看哪里出错的

要测试Docker容器中Nginx的配置文件是否有问题，您可以执行以下步骤。首先，确保您知道要测试配置的Nginx容器的名称或ID。然后，使用docker exec命令在该容器内运行Nginx的配置测试命令。

下面是具体的测试命令：

docker exec <nginx-container-name> nginx -t

将<nginx-container-name>替换为您的Nginx容器的名称或ID。这个命令会在指定的Nginx容器内执行nginx -t，这是Nginx自带的用于测试配置文件语法的命令。

这个命令的输出会告诉您配置文件是否正确。如果配置文件没有问题，您会看到类似以下的输出：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

如果配置文件有误，输出会指出问题所在，例如错误的行号或是配置错误的具体信息，这样您就可以根据提示去修正相应的配置文件了。

记住，在修改Nginx配置并希望应用这些更改时，通常需要重新加载或重启Nginx。在Docker容器中，您可以通过以下命令来安全重载Nginx配置：

docker exec <nginx-container-name> nginx -s reload

这样，Nginx会重新加载其配置文件，而不需要停止和重启整个容器。

 

第一次调错(debug)

[root@localhost conf.d]# docker exec nginx nginx -t
Error response from daemon: container 1f69a6c40bdc190c5e57bb99b6c9599534a6a9f2940826b8a30bd2845460d17e is not running
[root@localhost conf.d]#

 

这个错误信息表明您尝试执行命令的Docker容器（在这个例子中是名为nginx的容器）当前并不在运行状态。在Docker中，只有处于运行状态的容器才能执行docker exec命令。因此，您需要首先确保容器正在运行，才能进行配置测试。

解决步骤

  1. 检查容器状态: 使用docker ps -a命令来查看所有容器的状态，包括正在运行的容器和已停止的容器。

    docker ps -a

  2. 启动容器: 如果发现nginx容器的状态是已停止，您需要先启动这个容器。使用以下命令启动容器：

    docker start nginx

    确保将nginx替换为您的容器名称，如果它不是默认的nginx。

  3. 重新执行测试命令: 容器启动后，再次执行配置测试命令：

    docker exec nginx nginx -t

额外说明

  • 为什么容器会停止？: 容器可能由于多种原因停止运行，包括但不限于：手动停止、遇到错误而自动停止、或容器任务完成退出。

  • 持续运行的容器: 对于像Nginx这样的服务容器，通常期望它们持续运行。如果发现容器频繁停止，可能需要检查容器日志来诊断问题。使用以下命令查看容器的日志：

    docker logs nginx

通过这些步骤，您应该能够启动容器并成功执行Nginx配置的测试。如果配置测试通过，您会看到提示配置文件语法正确的信息。如果测试失败，则需要根据错误信息调整Nginx的配置文件。

 

这个错误信息表明您尝试执行命令的Docker容器（在这个例子中是名为nginx的容器）当前并不在运行状态。在Docker中，只有处于运行状态的容器才能执行docker exec命令。因此，您需要首先确保容器正在运行，才能进行配置测试。

解决步骤

  1. 检查容器状态: 使用docker ps -a命令来查看所有容器的状态，包括正在运行的容器和已停止的容器。

    docker ps -a

  2. 启动容器: 如果发现nginx容器的状态是已停止，您需要先启动这个容器。使用以下命令启动容器：

    docker start nginx

    确保将nginx替换为您的容器名称，如果它不是默认的nginx。

  3. 重新执行测试命令: 容器启动后，再次执行配置测试命令：

    docker exec nginx nginx -t

额外说明

  • 为什么容器会停止？: 容器可能由于多种原因停止运行，包括但不限于：手动停止、遇到错误而自动停止、或容器任务完成退出。

  • 持续运行的容器: 对于像Nginx这样的服务容器，通常期望它们持续运行。如果发现容器频繁停止，可能需要检查容器日志来诊断问题。使用以下命令查看容器的日志：

    docker logs nginx

通过这些步骤，您应该能够启动容器并成功执行Nginx配置的测试。如果配置测试通过，您会看到提示配置文件语法正确的信息。如果测试失败，则需要根据错误信息调整Nginx的配置文件。

 

第二次调错(debug)

[root@localhost conf.d]# docker ps -a
CONTAINER ID   IMAGE        COMMAND                  CREATED        STATUS                     PORTS                                                  NAMES
1f69a6c40bdc   nginx:1.10   "nginx -g 'daemon of…"   16 hours ago   Exited (1) 5 minutes ago                                                          nginx
640aefa27b71   mysql:5.7    "docker-entrypoint.s…"   7 weeks ago    Exited (0) 7 weeks ago                                                            mysql2
ab0cd95f6c9f   mysql:5.7    "docker-entrypoint.s…"   7 weeks ago    Up 7 days

 

根据您提供的docker ps -a命令输出，我们可以看到nginx容器的当前状态是“Exited (1) 5 minutes ago”，这意味着该容器已经停止运行，并且退出时返回了状态码1。这通常表明容器遇到了错误或问题，导致它无法正常运行。

要解决这个问题并尝试重新启动nginx容器，您可以按照以下步骤操作：

1. 查看容器日志

首先，查看nginx容器的日志，以获取有关为何容器停止的更多信息。这可以帮助您诊断问题：

docker logs nginx

2. 解决可能的配置问题

  • 如果日志指出配置文件有错误，根据日志中的提示检查并修正nginx的配置文件。配置文件可能位于您通过-v参数挂载的目录中，比如/mydata/nginx/conf目录。

  • 确保修改后的配置文件没有语法错误，您可以在本地直接使用nginx -t命令测试配置文件的语法正确性（需要在有Nginx安装的环境中）。

3. 重新启动容器

在解决了配置或其他导致容器退出的问题后，尝试重新启动nginx容器：

docker start nginx

4. 再次检查容器状态

重新启动容器后，再次使用docker ps -a命令检查nginx容器的状态，确认它是否正在运行：

docker ps -a

5. 重新测试Nginx配置

一旦nginx容器正在运行，再次尝试测试Nginx配置：

docker exec nginx nginx -t

6. 容器仍然无法正常运行？

  • 如果容器依旧无法正常运行，可能需要更深入地检查和解决问题。考虑到您使用的是较老的Nginx镜像（nginx:1.10），也有可能是该镜像版本与当前Docker环境不完全兼容。

  • 考虑更新到更新的Nginx镜像版本，使用如下命令拉取并运行最新版的Nginx容器：

    docker pull nginx:latest
    docker run -p 80:80 --name nginx-new -v /mydata/nginx/html:/usr/share/nginx/html -v /mydata/nginx/logs:/var/log/nginx -v /mydata/nginx/conf:/etc/nginx -d nginx:latest

  • 注意，在运行新容器之前，您可能需要删除或重新命名原有的nginx容器，以避免名称冲突。

通过这些步骤，您应该能够诊断并解决导致nginx容器停止的问题。

 

114 注意配置动静分离时，这里的路径问题

 

server {
    listen       80;
    server_name  www.hspliving22.com;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    #配置静态资源默认访问路径，动静分离
    location /static/ {

        #下面这里少了一个斜杠，导致找不到！因为这里前面如果没有斜杠，使用的是相对路径
        #root usr/share/nginx/html;
        root /usr/share/nginx/html;
    }

 

 

是的，该注释是正确的。在Nginx配置中，root指令用于指定静态资源的根目录。当root指令路径以斜杠(/)开头时，它被解释为绝对路径，指向文件系统上的具体位置。如果没有以斜杠开头，则被视为相对路径，其解析依赖于Nginx的当前工作目录，这可能导致无法正确找到指定的目录。

在您的例子中：

  • 错误的配置root usr/share/nginx/html;缺少了开头的斜杠，因此usr/share/nginx/html会被解释为相对路径。这意味着Nginx会从其当前工作目录去寻找名为usr/share/nginx/html的子目录，而不是文件系统的根目录下的/usr/share/nginx/html，这很可能导致静态资源无法被正确找到和提供服务。

  • 正确的配置root /usr/share/nginx/html;以斜杠(/)开头，明确指定了从文件系统根目录开始的绝对路径。这确保了无论Nginx的当前工作目录在哪里，/usr/share/nginx/html都指向正确的位置，从而使静态资源可以被正确地找到和服务。

因此，确保使用正确的路径类型（绝对路径或相对路径）对于配置Nginx服务来说非常重要，尤其是当指定资源文件的位置时。在大多数情况下，推荐使用绝对路径来避免路径解析的不确定性，从而确保配置的正确性和服务的稳定性。

 

115 JDK 8 的 Stream API 进行多表处理时的操作可能比直接操作数据库进行多表联查的方式效率高的相关说明

在讨论为什么使用 JDK 8 的 Stream API 进行多表处理时的操作可能比直接操作数据库进行多表联查的方式效率高之前，我们需要明确两点：操作的上下文（数据库的大小、数据的局部性、内存与计算能力等）以及“效率高”的具体含义（是执行速度更快、资源消耗更低还是代码的可维护性和可读性更好）。

Stream API 优势分析

  1. 延迟执行与合并操作:

    • 合并操作：Stream API 允许进行操作合并，例如过滤和映射可以合并成单次遍历。这种能力在处理多表数据时特别有用，可以减少中间状态的存储需求和遍历次数。

    • 延迟执行：Stream 操作是延迟执行的，只有在需要最终结果时才执行，这允许优化整个数据处理流程，比如合并多个操作到一个循环中。

  2. 减少数据传输：

    • 在处理大规模数据时，将数据加载到应用服务器进行 Stream 处理可能比在数据库中执行多表连接后传输结果到应用服务器更有效率。尤其是当连接操作导致数据显著膨胀时，使用 Stream 处理可以在数据传输过程中进行过滤和减少，只传输需要的数据。

  3. 利用应用服务器的计算能力：

    • 现代应用服务器通常具有未被充分利用的计算能力。通过在应用层使用 Stream API，可以平衡数据库和应用服务器的负载，从而优化整体的系统性能。

  4. 提高代码的可读性和可维护性：

    • Stream API 的链式调用可以提高代码的可读性和可维护性。在处理复杂的数据操作时，使用 Stream API 可以使逻辑更清晰，易于理解和修改。

数据库多表联查优势

  1. 优化的查询计划：

    • 现代数据库管理系统（DBMS）拥有高效的查询优化器，可以生成高效的查询计划，特别是在涉及多表连接和复杂查询时。

  2. 索引利用：

    • 数据库的索引可以显著加速查询处理速度，尤其是在连接操作中，合理利用索引可以避免全表扫描，降低查询成本。

  3. 减少网络传输：

    • 在数据库内部解决多表连接问题可以避免大量数据通过网络传输到应用层，减少网络负载和数据传输时间。

实际应用场景分析

  • 小数据量情况：当数据量小且数据库的连接操作不会成为瓶颈时，直接在数据库中进行多表联查通常更高效，因为这可以利用数据库的查询优化和索引。

  • 大数据量情况：对于大数据量，特别是当数据传输成本高或数据库查询优化不理想时，使用 Stream API 在应用层处理可能更有优势。应用层可以更灵活地处理复杂逻辑，特别是涉及到跨多个数据存储的操作时。

总结

选择使用 Stream API 还是数据库多表联查应基于具体情况：

  • 如果查询涉及大量数据但连接操作简单或数据传输成本较低，推荐在数据库内部处理。

  • 如果数据处理逻辑复杂，或需要在处理过程中进行大量的数据筛选，且应用服务器的计算资源充足，使用 Stream API 可能更合适。

在设计系统时，应根据实际的数据量、

查询复杂度、系统资源等因素综合考虑，可能还需要进行具体的性能测试来决定使用哪种技术方案。

posted @ 2024-05-09 18:49  卡牌300  阅读(1)  评论(0)  编辑  收藏  举报