项目技术栈

SVG

SVG 是一种开放标准，适用于创建图标、图表、插图、用户界面元素等。它们可以直接在 HTML 文档中作为 XML 代码嵌入，也可以作为 .svg 文件被引用。SVG 的这些特性使其成为现代网页设计中不可或缺的一部分。以下是 SVG 的一些主要特性：

• 缩放不失真：SVG 图像是矢量的，这意味着它们可以在任何分辨率下放大或缩小而不会丢失清晰度。
• 交互性：SVG 支持交互性，可以与 JavaScript 相结合，创建可交互的图形和动画。
• 样式化：SVG 可以使用 CSS 进行样式化，也可以直接在 SVG 元素内使用 style 属性。
• 脚本化：SVG 可以使用 JavaScript 进行脚本化，允许动态修改图形属性和响应用户事件。
• 集成性：SVG 可以直接嵌入到 HTML 中，也可以作为图像文件被引用。
• 动画：SVG 支持 SMIL（Synchronized Multimedia Integration Language），这是一种用于描述动画的 XML 基础语言。
• 可访问性：SVG 元素可以像普通的 HTML 元素一样设置 title 和 desc 属性，提高可访问性。
• 文件大小：对于复杂的图形，SVG 文件通常比位图图像文件（如 JPEG 或 PNG）要小。
• 编辑和创作：SVG 文件是文本格式，可以使用任何文本编辑器创建和编辑。
• 浏览器支持：现代浏览器普遍支持 SVG，包括 Chrome、Firefox、Safari、Edge 等。

ThreeJS

Three.js 是一个基于 WebGL 的 JavaScript 库，它提供了一个高级的 API，使得开发者能够更容易地构建和呈现复杂的 3D 场景。Three.js 抽象化了 WebGL 的复杂性，让开发者可以专注于创建视觉效果而不是底层图形渲染的细节。以下是 Three.js 的一些核心特性和组件：

• 场景（Scene）：场景是 Three.js 中所有对象的容器，包括 3D 模型、灯光、摄像机等。
• 摄像机（Camera）：Three.js 提供了多种摄像机类型，如透视摄像机（PerspectiveCamera）和正交摄像机（OrthographicCamera）
• 网格（Geometry）：网格定义了 3D 模型的形状，由顶点（vertices）、面（faces）、线（lines）等组成。
• 材质（Material）：材质定义了网格的表面属性，如颜色、纹理、透明度、反光等。
• 纹理（Texture）：纹理是图像的 2D 表示，可以应用于材质，为 3D 模型添加细节和真实感。
• 光照（Light）：包括点光源（PointLight）、聚光灯（SpotLight）、平行光（DirectionalLight）和环境光（AmbientLight）。
• 动画（Animation）：Three.js 提供了动画系统，可以对对象的位置、旋转、缩放等属性进行关键帧动画。
• 物理（Physics）：Three.js 通过一些扩展库（如 Ammo.js）支持物理模拟，如碰撞检测和刚体动力学。
• 渲染器（Renderer）：Three.js 使用渲染器来绘制场景。除了 WebGL 渲染器，Three.js 还支持 CanvasRenderer 和 SVGRenderer。
• 控制库（Controls）：Three.js 提供了多种控制库，如 OrbitControls 和 DeviceOrientationControls，用于实现用户交互。
• 扩展和插件：Three.js 拥有一个活跃的社区，开发了许多扩展库和插件，用于添加额外的功能，如粒子系统、后期处理效果等。
• 性能优化：Three.js 提供了一些工具和技术来优化性能，如 LOD（Level of Detail）、几何体合并、纹理压缩等。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它是一个流行的库，用于执行 HTTP 请求，如 GET、POST、DELETE 等，以与后端 API 进行通信。Axios 提供了易于使用的 API，可以简化数据的发送和接收过程。

以下是 Axios 的一些主要特性：

• 从浏览器中创建 XMLHttpRequests：在前端开发中，Axios 允许你发送异步请求到服务器并处理响应。
• 从 node.js 发出 http 请求：在服务器端，Axios 可以使用 node.js 的 http 和 https 模块。
• 支持 Promise API：Axios 支持 ES6 Promises，这意味着你可以使用 .then() 和 .catch() 方法来处理成功的响应和捕获错误。
• 转换请求和响应数据：Axios 允许你转换发送到服务器之前的数据，以及从服务器接收到的数据。
• 客户端支持防御 XSRF：Axios 可以配置来保护你的应用程序免受跨站请求伪造（XSRF）攻击。
• 自动转换 JSON 数据：Axios 会自动将 JSON 字符串转换为 JavaScript 对象，反之亦然。
• 客户端支持防御 CSRF：Axios 支持在请求中添加 CSRF 令牌，以防止跨站请求伪造。
• 并发请求：Axios 支持 axios.all() 和 axios.spread() 方法，可以同时发送多个请求并在所有请求都完成后执行操作。
• 拦截请求和响应：你可以使用 Axios 拦截器来拦截并处理请求或响应，这在设置通用的请求头或响应处理时非常有用。
• 取消请求：Axios 支持取消请求，这对于处理用户界面操作（如取消按钮）非常有用。
• 支持防御重定向：Axios 允许你配置请求以防止不必要的重定向。
• 支持防御超时：你可以为请求设置超时时间，如果服务器在指定时间内没有响应，请求将被自动取消。

HTTP 请求

HTTP（超文本传输协议）是一种用于分布式、协作式、超媒体信息系统的协议，它是万维网数据通信的基础。HTTP 请求是客户端（如浏览器）向服务器请求数据或要求服务器执行特定任务的调用。以下是几种常见的 HTTP 请求方法及其用途：

• GET：
  • 用途：请求从服务器检索特定资源。
  • 特点：一般用于请求服务器发送数据。
  • 数据：通常将数据附加在 URL 之后，作为查询字符串参数传递。
  • 缓存：GET 请求可以被缓存。
  • 历史：浏览器会保留浏览历史记录。
  • 可读性：URL 中包含的参数可以在浏览器中看到，因此不安全。
• POST：
  • 用途：向服务器提交数据进行处理，如提交表单或上传文件。
  • 特点：用于传输数据给服务器，不用于检索数据。
  • 数据：数据通常包含在请求体（body）中。
  • 缓存：POST 请求不会被缓存。
  • 历史：浏览器不会保留 POST 请求的历史记录。
  • 可读性：数据不会显示在 URL 中，因此比 GET 更安全。
• PUT：
  • 用途：将指定资源的所有当前表示替换为请求负载。
  • 特点：用于上传文件或更新资源。
  • 数据：数据通常包含在请求体（body）中。
  • 缓存：PUT 请求可以被缓存。
  • 幂等性：多次执行相同的 PUT 请求应该具有相同的效果。
• DELETE：
  • 用途：请求服务器删除指定的资源。
  • 特点：用于删除服务器上的资源。
  • 数据：通常不包含请求体，但可以包含。
  • 缓存：DELETE 请求可以被缓存。
  • 幂等性：多次执行相同的 DELETE 请求应该具有相同的效果。
• HEAD：
  • 用途：请求获取与 GET 请求相同的响应，但没有响应体。
  • 特点：用于获取响应头信息。
  • 数据：不包含响应体，只包含响应头。
• PATCH：
  • 用途：对资源进行部分修改。
  • 特点：用于更新部分资源，而不是整个资源。
  • 数据：数据通常包含在请求体中。
  • 幂等性：PATCH 请求不是幂等的，因为多次应用相同的 PATCH 可能会导致不同的结果。
• OPTIONS：
  • 用途：描述目标资源的通信选项。
  • 特点：用于描述服务器支持的请求方法。
  • 数据：通常用于跨域资源共享（CORS）预检请求。
• CONNECT：
  • 用途：将连接改为管道方式的代理服务器。
  • 特点：通常用于 SSL 加密服务器的连接。

ZTree

ZTree 是一个基于 jQuery 的树形结构插件，它提供了丰富的功能和灵活的配置选项，用于在网页上展示层次数据。ZTree 支持多种类型的数据源，包括 JSON 和 XML，并且可以轻松地与服务器端数据进行交互。以下是 ZTree 的一些主要特性：

• 多种树节点：支持普通节点、选择节点、多选节点等。
• 灵活的节点操作：可以轻松实现节点的展开、折叠、创建、删除、编辑等操作。
• 节点选择和勾选：支持单选和多选，以及节点勾选功能。
• 异步加载：支持从服务器异步加载数据，可以设置加载的 URL 和回调函数。
• 数据过滤：可以根据条件过滤树节点，只显示符合条件的节点。
• 自定义图标：可以为节点设置自定义图标，支持图片和 CSS 样式图标。
• 节点编辑：支持节点的编辑功能，包括拖拽、重命名等。
• 事件处理：提供了丰富的事件回调，如 onClick、onCheck、onAsyncSuccess 等。
• 主题支持：支持多种主题，可以自定义树的外观样式。
• 数据绑定：支持将树形结构与 JSON 或 XML 数据绑定，方便数据的更新和管理。
• 节点排序：可以对节点进行排序，支持父子节点之间的排序。
• 节点展开/折叠：支持设置节点的默认展开或折叠状态。
• 节点拖拽：支持节点的拖拽功能，可以跨树或在同一棵树内移动节点。
• 节点缓存：支持节点状态的缓存，包括展开、折叠和勾选状态。
• 兼容性：兼容主流浏览器，包括 IE、Firefox、Chrome、Safari 等。

v-contextmenu

v-contextmenu是一个 Vue.js 组件，用于在 Vue 应用程序中轻松实现上下文菜单（右键菜单）。它提供了一个灵活且易于配置的解决方案，允许开发者为各种元素添加自定义的右键菜单。

主要特性：

• 易于集成：作为一个 Vue 组件，它可以无缝集成到任何 Vue 项目中。
• 自定义菜单项：支持完全自定义菜单项，包括文本、图标、子菜单等。
• 事件处理：可以为菜单项绑定事件处理器，如点击事件。
• 嵌套子菜单：支持创建嵌套的子菜单，以实现更复杂的菜单结构。
• 样式定制：允许通过 CSS 定制菜单的样式，以符合应用程序的外观和感觉。
• 性能优化：通过虚拟滚动等技术优化长列表的性能。
• 键盘导航：支持键盘操作，提高无鼠标环境下的可用性。

Cookie

Cookie 是一种存储在用户本地计算机上的小型数据片段，由网站创建并通过用户的 Web 浏览器保存。当用户首次访问网站时，Web 服务器可以发送一个或多个 cookie 到用户的浏览器。浏览器会将这些 cookie 保存在本地，并在随后的每次请求中自动发送回服务器，以便服务器识别用户并恢复会话状态。

特性和用途：

• 会话状态管理：用于识别用户在应用程序中的会话，通常用于登录系统
• 生命周期：可以设置为会话期间有效（浏览器关闭时消失）或特定过期时间
• 追踪和分析：用于分析用户行为，帮助网站优化和提供定制的广告
• 访问方式：通过 document.cookie 进行访问，也可以通过 HTTP 头部在客户端和服务器之间传递
• 存储位置：Cookie 存储在用户的浏览器中

限制：

• 大小限制：单个 cookie 的大小通常限制在 4KB 左右。
• 数量限制：浏览器对每个域名下的 cookie 数量有限制，通常为 20 个左右。
• 安全问题：如果不正确地使用，cookie 可能会引起安全问题，如会话劫持。

xlsx

xlsx是一个强大的 JavaScript 库，用于处理 Excel 文件，包括 XLSX 和 XLS 格式。它支持解析、修改和写入电子表格数据。xlsx 库可以在浏览器和 Node.js 环境中使用，为开发者提供了丰富的 API 来操作 Excel 文件。

主要特性：

• 读写支持：能够读取和写入 XLSX 和 XLS 格式的文件。
• 流式接口：支持流式读取和写入大型文件，无需将整个文件加载到内存中。
• 样式和格式：可以读取和写入单元格样式和格式，包括字体、颜色、边框等。
• 公式支持：能够解析和写入 Excel 公式。
• 多工作表：支持操作多个工作表（sheets）。
• 自定义功能：可以通过插件或自定义解析器/写入器来扩展功能。