vue 0722

1、什么是ajax，什么是axios？

1.1 Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。它通过在后台与服务器交换数据并使用 JavaScript 处理这些数据来实现页面的异步更新。 AJAX 可以传输任何形式的数据，包括 JSON、HTML 和文本等。AJAX 的核心是使用 XMLHttpRequest 对象（或者现代浏览器中的 Fetch API）来向服务器发出异步HTTP请求，并处理响应。

1.2  Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。它提供了更加方便和强大的功能来执行 AJAX 请求。相比于原生的 XMLHttpRequest，Axios 更易用，支持拦截请求和响应、转换请求和响应数据、取消请求等高级特性。 Axios 被广泛用于现代Web开发中，因为它简化了与API的交互，使得发送 GET、POST 等类型的HTTP请求变得非常简单，并且具有很好的错误处理机制。

总结：
AJAX 是一种技术概念，用于实现网页的异步通信和局部更新，而 Axios 是一个具体的JavaScript库，它实现了AJAX的概念，并提供了更高级的功能和更友好的API来处理HTTP请求。

Promise：

Promise是异步编程的一种解决方案，它代表着一个可能在未来完成或失败的操作的最终结果。

Promise 有三种状态：

Pending（等待中）：初始状态，既不是 fulfilled 也不是 rejected。

Fulfilled（已成功）：表示操作成功完成，此时 Promise 的值就是传递给 resolve 函数的值。

Rejected（已失败）：表示操作失败，此时 Promise 的值是传递给 reject 函数的原因

Promise 提供了两个关键方法：

then()：用于指定在 Promise 成功（fulfilled）时的回调函数，可以链式调用来处理结果或继续异步操作。

catch()：用于指定在 Promise 失败（rejected）时的回调函数，处理错误情况。

2、前台项目如何整合axios？

2.1  安装axios

选中自己的项目，右键点击”在外部资源管理器打开“的选项

在项目路径中，输入”cmd“回车进入终端

在终端输入pnpm install axios,下载axios

pnpm install axios

下载成功会在项目的package.json中有显示

2.2 引入Axios

在项目的src文件夹中新建一个tools文件夹，并在tools文件夹下新建axios.js

在axios.js中引入Axios

// 导入axios库支持
import axios from 'axios'

//声明一个全局的实例，方便后面使用
const instance = axios.create({
	timeout: 1000
})

//导出供外部调用 唯一导入,没有其他方法
export default instance

2.3 发起请求

在需要的组件中发起请求

<script setup>
	//通过Vue提供的函数进行转换，ref、reactive
	import axios from '../tools/axios.js'
	import {ref,reactive} from 'vue'
	
	//利用axios请求后端，返回json，渲染到页面组件
	//Promise语法的结构和日常js写法不同
	const ClassifyList =  ()=>{
		axios.get('http://localhost:5199/classify')
		// 调用 axios 库的 get 方法来发起一个 GET 请求，用于返回分类信息
		.then( res => {
			// then 方法用于处理请求成功的情况
			tableData.value = res.data
		})
		.catch( err=> {
			console.log(err)
		})
	}
	
	ClassifyList();
	
	var tableData = ref([])
	
</script>

使用拦截器：

Axios 还提供了请求拦截器（request interceptors）和响应拦截器（response interceptors），在请求发出前或响应到达后有机会进行统一的处理，如自动附带认证信息、统一处理错误等。

结合状态管理工具:

使用结合状态管理工具来管理 Axios 请求的状态，确保组件间的数据同步和状态一致性

3、生成主键策略有哪些？什么是uuid？什么是雪花算法 snowflake？

3.1 主键策略

3.1.1 自动递增

描述：数据库自动生成一个递增的数值作为主键
适用场景：适用于整型数据，如整型、大整型等

优点：

        简单易用，插入新记录时主键自动增加

        易于排序和分页

缺点：

        无法在分布式系统中实现全局唯一性，因为每台机器的自增ID可能冲突

        分库分表时，保证每张表实现自增同时，不同表之间还得保证连续，实现比较复杂

3.1.2 UUID（Universally Unique Identifier ）

描述：使用算法生成一个全球唯一的标识符，通常是一个由字母和数字组成的字符串，长度为32位或36位。

适用场景：需要在不同的分布式系统之间保证主键的唯一性。

优点：

        全局唯一，不依赖于特定硬件和时钟

        适用于分布式系统。

缺点：

        主键长度较长，不便于存储和索引，可能影响性能

        无序，不满足某些业务场景下的排序需求

3.1.3  分布式ID生成器

描述：采用特定算法（如雪花算法Snowflake、Leaf算法等）生成的主键，能够在分布式系统中实现全局唯一，且主键长度较短。

适用场景：分布式系统，需要全局唯一且有序的ID。

优点：

        全局唯一，且有序

        支持高并发ID生成需求

缺点：

        实现略复杂，需要引入额外的算法和逻辑

        在某些情况下，可能需要调整时间戳的起始时间、机器ID的分配方式等配置

3.1.4 数据库序列

描述：一种由数据库提供的生成主键的方法，通过序列对象生成唯一的递增或递减数值。

适用场景：需要控制主键生成顺序和范围的情况

优点：

        能够保证主键的唯一性

        适用于需要有序主键的场景

缺点：

        无法在分布式系统中实现全局唯一性

3.1.5 组合主键

描述：将多个字段组合成一个主键

适用场景：单独的一个列无法满足主键唯一性的要求

优点：

        能够保证主键的唯一性

        适用于复杂的数据结构

缺点：

        可能存在冗余数据和空值

        增加了查询和索引的复杂度

3.1.6 哈希函数

描述：使用哈希函数将某个属性或组合属性转换为固定长度的哈希值作为主键

适用场景：需要保护敏感数据或实现数据分片的情况

优点：

        可以保护原始数据的隐私

        适用于数据分片场景

缺点：

        哈希冲突的可能性，尽管概率极低

        生成的哈希值可能不具备可读性

3.2 uuid（Universally Unique Identifier ）

UUID 是一个标准的用于产生唯一标识符的算法，它可以保证在空间和时间上的唯一性。UUID的生成不需要任何中央权威机构，也不需要网络连接，可以在完全离线的情况下产生。由于其长度和包含的信息较多，UUID不适合用作对性能敏感的表的主键，特别是在频繁查询和索引操作的场景下

3.3 雪花算法

雪花算法（Snowflake Algorithm）是由Twitter开发并开源的一种用于生成唯一ID的方法，特别适用于分布式系统。它可以在不依赖数据库的情况下生成唯一的ID，非常适合作为分布式系统中数据的唯一标识符

3.3.1 算法组成

最高位是符号位，始终为0，表示正数；

接下来的41位是时间戳（毫秒级）；

接下来的10位是工作机器标识，包括5位数据中心ID和5位机器ID，可以部署在1024个节点，每个节点中可以部署32个工作进程；

最后12位是序列号，用来解决同一毫秒内多个请求的冲突问题

3.3.2 算法特点

高性能高可用：生成时不依赖于数据库，完全在内存中生成，因此具有高性能和高可用性。

高吞吐：每秒钟能生成数百万的自增ID，满足高并发场景下的需求。

ID自增：生成的ID基本保持自增，存入数据库中时，索引效率高。

4、vue的ref和reactive的区别？

ref：

1. 用途:

ref 主要用于包裹基本类型值（如 Number、String、Boolean）或者用来创建一个可被 Vue 追踪的引用对象。当需要对某个基本类型值进行响应式处理时，`ref` 是非常有用的。它返回一个对象，其 .value 属性持有实际的值

2. 响应式:

当修改 .value 时，Vue 会注意到这个变化并触发相应的视图更新。这对于表单输入绑定或者简单的数据响应式处理非常适用

3. 使用场景:

适合于简单数据属性的响应式处理，或者是你需要直接操作DOM元素时

reactive：

1.用途:

reactive`则用于使一个对象的所有属性变为响应式的。当有一个包含多个属性的对象，并且希望这些属性都能自动追踪变化时，就应当使用 reactive。它返回一个新的代理对象，可以直接通过这个代理对象修改其属性，而所有变动都会被Vue自动追踪

2. 响应式:

修改代理对象的任何属性都会触发Vue的响应式系统，进而更新依赖于这些属性的视图

3. 使用场景:

更适用于复杂的、包含多个层级的数据结构。如果有一个包含多个嵌套对象的状态对象，使用 reactive`可以让你轻松地保持整个状态树的响应式

总结：

基本类型 vs 对象:

如果要使基本类型数据响应式，使用 ref；如果要使一个对象或对象的属性响应式，使用 reactive
访问方式:

ref`通过 .value`访问实际数据，而 reactive 直接通过属性访问
适用场景:

简单数据用 ref，复杂数据结构或对象用 reactive