日常开发心得（前端vue和后端springboot，java）

1.vue前端分组功能开发

html 复制代码

// 定义一个名为 groupBy 的函数，它接受两个参数：array（需要分组的数组）和 key（用于分组的键名）
groupBy(array, key) {

  // 使用 reduce 方法遍历数组，reduce 方法会遍历数组中的每一个元素，并累积一个结果
  return array.reduce((result, currentItem) => {
    
    // 检查当前项的 key 是否存在于结果对象中
    // 如果不存在，则初始化为一个空数组
    // 如果存在，则使用现有的数组
    // 这样做是为了根据 key 值将数组中的元素分组
    (result[currentItem[key]] = result[currentItem[key]] || []).push(currentItem);
    
    // 返回累积的结果对象
    return result;
  }, {}) // reduce 方法的第二个参数是一个空对象，这是初始的累积值
}

reduce对数组array数组进行遍历，groupby需要两个参数一个数组和一个键值来完成分组

html 复制代码

//相当于从组合数组来获取数据
combinedGroupData() {
      const combinedData = {};

      // 遍历原始数据
      this.rawData.forEach(item => {
        // 获取当前项的key和values
        const { key, values } = item;//键值对的形式

        // 遍历values对象，并将key组合，这个values存的是对象
        Object.keys(values).forEach(subKey => {
          const combinedKey = `${key}-${subKey}`;//相当于另一个键值一起校验新的key
          // 计算数组长度并存储
          combinedData[combinedKey] = values[subKey].length;
        });
      });
      return combinedData;
    },

两个条件分组

html 复制代码

//上面传进来的数组进行分组，根据名字去分组，
const vGroupedItems = this.groupBy(this.$refs.ShowRef.goods, 'vName');
      const rGroupedArray = Object.keys(vGroupedItems).map(key => {
        return {
          key: key,
          values: this.groupBy(vGroupedItems[key], 'cName')
        };
      });//数组根据cName这个有进行一次分组
      this.rawData = rGroupedArray;//原始数据有了
      const rGroup = this.combinedGroupData();//调用这个方法,进行键值拼接的分组
      const iGroupedItems = this.groupBy(this.$refs.ShowRef.goods, 'vName');//对另一个数组依旧这么处理
      const iGroupedArray = Object.keys(iGroupedItems).map(key => {
        return {
          key: key,
          values: this.groupBy(iGroupedItems[key], 'CName')
        };
      });
      this.rawData = iGroupedArray;
      const iGroup = this.combinedGroupData();
      for (const key in rGroup) {
        if (rGroup[key] !== iGroup[key]) {
          this.$message.error("xxx与xxx数量不一致！");
          flag = true;
        }
      }//得到的两个键值对数组数据是否一致，因为保证了同类型的键值，是去查对应的数量，如果不一致提示

2.前端vue字符串和Json数组相互转换：

字符串和Json数组转换：

const vInfo = JSON.parse(this.vList);

Json数组和字符串转换：

let jsonString = JSON.stringify(jsonData);

3.前端遮罩层：

html 复制代码

<template>
  <el-button
    v-loading.fullscreen.lock="fullscreenLoading"
    type="primary"
    @click="openFullScreen1"
  >
    As a directive
  </el-button>
  </template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElLoading } from 'element-plus'

const fullscreenLoading = ref(false)
const openFullScreen1 = () => {
  fullscreenLoading.value = true
  setTimeout(() => {
    fullscreenLoading.value = false
  }, 2000)
}

主要是这个方法fullscreenLoading来实现的遮罩，加入了超时遮罩结束方法，可自定义选择

4.DNS和RPC网络通信机制

DNS 是一种用于将域名和 IP 地址相互映射的分布式数据库系统，它允许用户通过易于记忆的域名访问互联网上的资源，而不需要记住复杂的 IP 地址。

查询过程：当用户输入一个域名（如 www.example.com）时，浏览器会向本地 DNS 服务器发送查询请求.如果本地 DNS 服务器没有缓存该域名对应的 IP 地址，则会向其他 DNS 服务器（如根服务器、顶级域服务器等）进行递归查询，直到找到对应的 IP 地址。

网站访问：用户通过域名访问网站时，DNS 会解析域名到对应的 IP 地址，使用户能够访问网站服务器。

负载均衡：通过 DNS 的轮询机制，可以将流量分配到多个服务器上，实现负载均衡。

故障转移：当某个服务器出现问题时，DNS 可以将流量切换到其他健康的服务器上，提高系统的可用性。

RPC框架：

RPC 是一种允许一个程序（客户端）调用另一个程序（服务器）上的函数或方法的机制，就像调用本地函数一样。

客户端调用：客户端通过 RPC 客户端库将本地函数调用转换为网络请求，包括函数名、参数等信息。网络传输：请求通过网络发送到服务器端，通常使用 TCP 或 HTTP 等协议。服务器处理：服务器端的 RPC 框架接收到请求后，解析请求信息，调用相应的服务函数进行处理。结果返回：处理结果通过网络返回给客户端，客户端再将结果转换为本地函数调用的结果。

在微服务架构中，各个微服务之间可以通过 RPC 进行通信，实现服务的解耦和分布式部署。分布式系统：分布式系统中的各个节点可以通过 RPC 进行协同工作，完成复杂的计算任务。

DNS 和 RPC 在现代网络应用中扮演着重要的角色，DNS 主要用于服务发现和域名解析，而 RPC 则用于实现远程过程调用和分布式系统的通信。现在更多使用的是openfeign和nacos注册中心搭配的远程调用功能，重写了resttmplate这个方法，或者是封装了，通过注解类就可以注入启动，封装请求头，请求体，定义方法，参数，路由即可，定义一个客户端指定某个服务即可。

5.前端查询子串在字符串的位置：

redirect.value.indexOf('xxx') !== -1

查询"sso"在字符串中是否出现过，如果出现过，不等于-1意味着不是在

redirect.value.indexOf('xxx') !== -1 的作用是：

检查字符串 redirect.value 中是否包含子字符串 'xxx'。

如果包含，返回 true；如果不包含，返回 false

查找一个子串在字符串第一次出现的位置

总结：

1.分组，需要熟练使用前端的groupby方法，对键值对key,value有一定的理解，会使用对象的方法来取值，对于key要做好选型，和你想存的value记录，对于分组无非Object.keys来定义key，然后因为需求不同，需要定义双分组，对于分组的进行分组，之后在进行逻辑处理

2.字符串和Json数组之间的转换：熟练使用JSON.parse和JSON.stringify即可实现

3.前端遮罩层加入：根据一个属性来完成的，v-loading.fullscreen.lock这个属性我们根据一个标志位来控制即可，

4.DNS和RPC区别：DNS 主要用于服务发现和域名解析，而 RPC 则用于实现远程过程调用和分布式系统的通信。现在更多使用的是openfeign和nacos注册中心搭配的远程调用功能，重写了resttmplate这个方法，或者是封装了，通过注解类就可以注入启动，封装请求头，请求体，定义方法，参数，路由即可，定义一个客户端指定某个服务即可。

5.子串在字符串中是否存在：redirect.value.indexOf（'子串'）！== -1则true代表存在，false代表不存在