1、什么是ajax,什么是axios?
1.1 AJAX
AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行动态更新。 AJAX 的主要组成部分包括:
- XMLHttpRequest:这是 AJAX 的核心,用于创建异步请求和处理响应。
- DOM(Document Object Model):用于操作页面结构和内容。
- CSS(Cascading Style Sheets):用于控制页面样式。
- JavaScript:用于处理逻辑和数据。
1.2 Axios
Axios 是一个基于 promise 的 HTTP 客户端,可以用于浏览器和 node.js 中。它是用来发送 AJAX 请求的现代替代方案之一,相比于原生的 XMLHttpRequest 或者 fetch API,Axios 提供了更丰富的功能和更好的错误处理机制。Axios 的一些特性包括:
- 基于 Promise 的 API:使得异步代码更容易管理,可以使用 .then() 和 .catch() 方法来处理异步操作的成功和失败情况。
- 拦截请求和响应:允许在请求或响应被发送/接收之前对其进行修改。
- 转换请求和响应数据:自动解析 JSON 数据,或者手动指定转换函数。
- 取消请求:提供 CancelToken 来取消正在执行中的请求。
- 自动转换请求和响应 JSON:不需要手动解析 JSON 响应或序列化请求体。
- 客户端支持防止 CSRF 攻击:自动设置 XSRF token 到 X-XSRF-TOKEN 请求头中(仅在提供 XSRF token cookie 的情况下)。
- 跨平台:可以在浏览器和 Node.js 环境中使用相同的代码。
2、前台项目如何整合axios?
1.创建数据库表并实现后台连接数据
2.安装axios
npm install axios
# 或者
pnpm install axios
3.导入并配置:新建一个axios.js文件
//导入库的支持
import axios from "axios";
//声明一个全局的实例。方便后面使用
const instance = axios.create({
timeout:1000,
});
//导出供外部进行调用
export default instance;
4.前台创建实例发送请求:在js文件中添加
//通过vue提供的两个函数进行转换,ref、reactive
import { ref , reactive } from 'vue'
import axios from '../tools/axios.js'
const tableData = ref([])//vue对象
//利用axios请求后端,返回json,vue解析json,渲染到页面组件
//promise语法结构和日常的js不同
const ClassifyList = ()=>{
axios.get('http://localhost:5017/classify')
.then(res=>{
tableData.value=res.data
})
.catch(err=>{
console.log(err)
})
}
ClassifyList()
5.后台增加跨域请求(Program.cs):
//注册跨域访问权限
builder.Services.AddCors(options => {
options.AddPolicy(name: "AllowAll", policy =>
{
policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
});
});
app.UseCors("AllowAll");
3、生成主键策略有哪些?什么是uuid?什么是雪花算法 snowflake?
生成主键(Primary Key)策略是指在数据库设计中确定如何创建唯一标识符的方法,用于唯一标识表中的每一行记录。主键可以是自然键(如身份证号、商品编号等),也可以是系统分配的键。
常见的主键生成策略有:
(1)自增ID (Auto-Increment):
数据库自动递增的整数,通常是主键字段的数据类型为整型,如 INT 或 BIGINT。 在关系型数据库中很常见,如 MySQL 中使用 AUTO_INCREMENT 属性。
(2)GUID/UUID:
全球唯一标识符(Globally Unique Identifier),在微软环境中称为 GUID,在互联网环境中称为 UUID。 UUID 是一个 128 位的数字,通常用连字符分隔的十六进制数表示,例如 550e8400-e29b-41d4-a716-446655440000。 每个 UUID 几乎保证在全球范围内都是唯一的,即使在网络上的不同计算机之间也是如此。
(3)雪花算法:
由 Twitter 开发,是一种分布式 ID 生成算法。 Snowflake 生成的 ID 是一个 64 位的整数,包括了时间戳、数据中心 ID、机器 ID 和序列号等信息,确保了全局唯一性和高吞吐量。 这种算法可以部署在多台服务器上,生成的 ID 不需要依赖于数据库或中心化服务,适用于微服务架构。
优点:
-
全局唯一性:雪花算法通过组合时间戳、数据中心ID、工作节点ID和序列号,可以生成全局唯一的ID,非常适合分布式系统。
-
高吞吐量:由于算法设计时考虑了高性能,每个工作节点可以独立生成ID,无需与其他节点或中心服务器通信,因此可以实现非常高的生成速率。
-
低延迟:生成ID的过程非常快速,几乎不会造成任何延迟,因为不涉及网络通信或数据库访问。
-
排序性:生成的ID具有时间戳部分,这使得新生成的ID通常大于旧的ID,对于某些应用场景,如索引优化或按时间顺序排序数据,这是非常有利的。
缺点:
- 依赖服务器时间,服务器时钟回拨时可能会生成重复 id。算法中可通过记录最后一个生成 id 时的时间戳来解决,每次生成 id 之前比较当前服务器时钟是否被回拨,避免生成重复 id。
4、vue的ref和reactive的区别?
1.数据类型:ref用于创建一个指向一个响应式值的引用,reactive用于创建一个响应式的对象或数组。
2.使用方式:ref返回一个带有.value属性的对象,而reactive直接返回原始对象或数组。
3.使用场景:ref主要用于处理基本数据类型(如字符串、数字、布尔值)以及单个对象或数组的响应式状态。reactive适用于复杂的对象结构和数组,其中包含多个嵌套的属性。